The Avocademy Homepage
Radia Lahlou
Product Designer
The Problem:
Avocademy is an online school that offers a number of UX related courses, the most popular being the 8 week UX/UI Foundations bootcamp. One of the unique aspects that differentiates Avocademy’s bootcamp from other programs is the unlimited mentoring offered to students.
As the program grows, it is clear that Avocademy’s current Customer Relationship Management (CRM) software does not adequately meet mentor and student needs. Mentors are unable to track student progress in an easy and intuitive way, which leads to confusion and inconvenience when providing feedback and reviewing student work.
Solution:
Using research based design, our team will create a Mentor Dashboard to serve as the new front end of Avocademy’s existing CRM, Keap.
We will provide a complete dashboard design, from research to prototype.
Timeline:
4 weeks, August 2021
Tools:
Miro, Figma, Axure, Jiro
Role:
UX/UI Designer (Team of 5 Designers and 1 Developer)
The Avocademy Mentor Portal Team working on low-fidelity wireframes
Teamwork
Early on, we decided to delegate specific tasks to different groups of team members. Although we each provided input to all the steps below, I focused specifically on brainstorming, sketching, and UI design. I also worked to review all portions of the ideation process.
01. Empathize
User Stories
The client provided us with a set of basic user stories outlining what goals a mentor should be able to accomplish with our design. We then provided motivation behind each story and sorted them based on High and Medium priority.
These stories are as follows:
High
As a mentor, I’d like to see a directory of all students so that I can select which student I am meeting with.
As a mentor I’d like to see the progress of each student so that I can keep track of which week they are on and which assignments they’ve completed as well as any feedback from other mentors.
As a mentor, I’d like to progress each student to the next module so that I can keep track of their progress.
As a mentor, I’d like to rate each mentor session and leave notes for each student to flag any issues early on and provide context for other mentors.
I’d like to alert student success so a student can be properly supported if they are not progressing or need extra help.
I’d like to search for students so I can view individual student progress quickly.
I’d like to filter students by start date and projected end date so that I can make sure students are on track to finish the course.
Medium
I’d like to see the progress of each student per course so that I can distinguish between courses (foundations or career jumpstart)
I’d like to assign a task to a student with a due date so I can make sure students are progressing in a timely fashion.
We chose to categorize the last two stories as "medium" because our client expressed they were not necessary features, but would be useful down the line as the school adds classes and students.
Persona
To further focus and inform our work, we decided to create a distinct “Advocademy Mentor” persona.
We did not interview any actual users, but because the point person for our client is an Avocademy mentor, we had a pretty comprehensive picture of the sorts of pain points and needs other Avocademy mentors face as well.
A look into keep's front end page - confusing, disorganized and inconvenient!
CRM Comparison
As a final step before beginning our ideation process, we perused thorough Avocademy's current CRM, Keap, and conducted additional secondary CRM research to gain a broad understanding of the layout, assets, and pain points of already existing softwares.
02. Ideate
User Flows
After designing a mentor persona, our group worked together to come up with three red routes, focusing on the most pertinent user stores.
Red routes are the frequent and most critical paths that users take to complete tasks within the app. The three chosen were:
1. Check a Student's Progress
2. Leave Notes after a Mentor Session
3. Filter Students by Course Start Date
Final Site Map
Site Map
Once our team defined the initial user flows, we collaborated on the site map.
We used the initial site map as a framework for our screen sketches. As a team member and I developed the sketches, another team member iterated on the organization of the site map to match our screen layout. I created the site map to the right based on my teammate's initial work.
Initial Sketches of the Main Dashboard
Sketching
With our user stories, personas, and research at the ready, we began to create our first few sketches. We realized that a proper solution would require two main pages:
1. A Dashboard where mentors can easily access a list of students and general analytics.
2. A Student Profile page (for each student) where mentors can track individual student progress by module and leave notes about the student for other mentors.
Because our client was requiring us to work from a pre-existing component kit, we had to consider what design elements were available to us even in the early stages of ideation.
For this step, a team member and I worked together via video conferencing to brainstorm. I put together a rough version of our ideas, and my teammate cleaned up the design and prepared it to send to our group.
03. Design
All Low-Fidelity Frames
Low-Fidelity Wireframes
At this point of the project, we were finally ready to begin bringing our ideas to life through low-fidelity wireframes.
The process was highly iterative - as some team members created wireframe, others would review and provide comments/questions. We also worked closely with our client to make sure our designs matched Avocademy's practical and aesthetic needs.
Using Figma, we created up to 6 iterations of each main page, progressively getting closer to the final design .
Avocademy Colors
Style Guide + Components Kit
Once our client approved our low-fidelity wireframes, we begin to work with the Avocademy style guide for the final UI. Avocademy uses modern and bold colors to express a friendly and innovative brand personality. We made sure to work with our client's pre-established style guide as we moved forward with UI.
In terms of typography and general component style, we worked to ensure our UI used the components provided to us by our client to facilitate development.
Changes between initial and final UI
High Fidelity Wireframes
Next, we collaborated on 15 high-fidelity wireframes for two distinct pages: the Mentor Dashboard and the Student Profile. Once again, the process was highly iterative. We worked closely with our client and created many versions of each page before settling on a the final UI.
Development Handoff
In our final review session before prototyping, the team met with our client to discuss design details and development handoff.
First, we annotated our designs - this allowed us to better communicate with our stakeholders (answer "why?") and explain to the developer what coding decisions are needed moving forward.
Next, we discussed data fields and values. This allowed us to make sure we were working within the project constraints and set up for an easier handoff through Jiro.
Lastly, we discussed responsiveness, making sure to account for different breakpoints. We designed for a 1440px desktop screen, but wanted to make sure the developer knew how our design would adapt at critical size ranges.
04. Test
Prototyping and User Testing
Using Axure RP, the team created a clickable prototype. Not only did the prototype help show our stakeholders what the final product would look like, it also helped us to generate user feedback and identify any glaring usability issues. Prototyping is useful because it allows designers to iterate on a design before it is rolled out as a final product, saving both time and money.
We conducted a usability test with a current Avocademy staff member who provides students with Slack support, and who also works in the administrative side of the organization. The test was conducted as follows:
First, we asked the user to look at the dashboard page and describe what they thought of it: what struck them about it, what they could do on the page, and what they thought the page was for.
Next, we had the user complete 3 critical tasks, matching the red routes we outlined in the early stages of design.
Finally, we asked the user some post-testing questions, guiding them to describe their overall impressions of the product.
Thankfully, we did not encounter any glaring usability issues, but there were a few small details the usability test lead us to consider.
User Testing using Axure RP
Usability Considerations
Because our test participant was both a mentor and an administrative stakeholder, we found that her needs differed slightly from our original persona. For example, she wanted a way to be able to flag students who have dropped out of the course or temporarily frozen their enrollment.
Additionally, she found certain design features confusing - for example, she was uncertain why a mentor would need to rate a student.
Overall, however, the participant expressed that she found the design intuitive, useful, and visually pleasing. She was happy to find a button leading to mentor resources, and appreciated the way each student had an individual profile in which mentors could keep track of student progress and success.
05. Reflections
The Avocademy Mentor portal is an end-to-end product that will soon be developed for the use of the Avocademy mentor team. The design team has reported the usability test findings to our main stakeholder in a short brief to make sure both administrator and mentor needs are accounted for.
In this project, I've learned a number of critical lessons:
Communication is key. Whether between designers and stakeholders, designers and developers, or within the design team itself, constantly communicating and making sure everyone is on the same page is critical to creating a successful product.
Teamwork fosters creativity and learning. This project was highly collaborative and iterative, with team members working together to complete all portions of the design. From ideation all the way to user testing, working together is what allowed us to try out new ideas and grow as designers.
Identifying users a must. Although we created a number of user stories and even a mentor persona, it would have been useful to interview an administrator to identify what problems they needed solved by the mentor portal.
All in all, this project was a wonderful collaborative learning experience. As a mentor for Avocademy, I look forward to getting to use the product that the team created in the near future. We will be working closely with the Avocademy development team to ensure a smooth launch 🥑