The Problem

Avocademy is a UX/UI Design Academy founded in 2020. It soon became a super-popular and fast-scaling UX/UI Design Institute with almost 300 students to date.

Avocademy used a spreadsheet as their CRM system, initially and quickly switched to Keap, a CRM platform for small businesses. Although Keap does some of the day-to-day job managing students, its functions are not fully serving Avocademy's mentors' needs. More importantly, with its fast-growing student body, Avocademy urgently needs a customized CRM portal.

The Solution

The design team practiced a high level of User-Centered Design throughout the entire process. We eventually created a mentor portal that is customized, intuitive, clean, simple, and adaptive to Keap, the currently-in-use CRM system.

Most importantly, the final product will optimize Avocademy's capability of managing a fast-growing volume of students.

Client

Avocademy

Industry

Design / Education

Tools

Miro

Figma

Axure

Role

UX/UI Designer on a Team of 5 + 1 Developer

Duration

4 Weeks. Aug, 2021

Process

Design Research

Empathizing

Ideating

Designing

Usability Testing

Happy Team, Happy Work!

Happy Team, Happy Work!

Communication is KEY

Working with a great team always ensures amazing outcomes - communication from start to finish was always smooth for this team. Right after the client kickoff meeting, we delegated the work evenly to make sure we optimize our strengths yet we are all involved and are contributing in every single phase of the design process.

1. Research

Knowing that we were designing a portal adaptive to Keap, we jumped right into it to find out what it was like using it and what functions they offered. Along the side, we looked into other popular CRM systems on the market and quickly came to some key points that all the reputable CRM systems have in common:

a. Appearance

CRM dashboards can contain a lot of information, but we should keep things simple by maximizing white space on the dashboard without using too many colors.

b. Intuitiveness

Smart design alone can't save a cluttered CRM dashboard. Widgets in a user-friendly CRM dashboard must be arranged for quick exploration. These widgets should also help users understand the progress of every individual prospect along the pipeline.

c. Improvement

A CRM dashboard should never have a final form. Regular testing and modifying as needed are important.

2. Empathize

2.1 User Stories

The point person, one of Avocademy's mentors, provided us with some basic descriptions, we compared them to Keap's dashboard, the team defined the User Stories accordingly.

01 As a mentor, I’d like to see a directory of all students so that i can select which student i am meeting with 

02 As a mentor, I’d like to see the progress of each student (which week they are on and which assignments they’ve completed, and feedback from other mentors)

03 As a mentor, I’d like to progress each student to the next module and keep track of their progress

04 As a mentor, I’d like to rate each mentor session and leave notes for each student

05 As a mentor, I’d like to alert student success if a student is not progressing or needs extra help

06 As a mentor, I’d like to search for students 

07 As a mentor, I’d like to filter students by start date and projected end date

08 As a mentor, I’d like to see the progress of each student per course (foundations or career jumpstart)

09 As a mentor, I’d like to assign a task to a student with a due date



Avocademy Mentor Portal

2.2 Persona

The Persona was very easy to create with our design research analysis, the client kickoff meeting, and the user stories. With the user persona, the "Avocademy Mentor," the team could empathize more with the end-users.

3. Ideate
Avocademy Mentor Portal

3.1 User Flows

Based on the persona we created, the team worked together and identified 3 Red Routes, the most critical tasks that deliver the most value to the users on the product.

a. Check a Student's Progress
b. Leave Notes after a Mentor Session
c. Filter Students by Course Start Date

Avocademy Mentor Portal

3.2 Sitemap

Site mapping is always important - it gives designers a bird's eye view of the product, it shows how pages are prioritized, linked, and labeled. The team worked together to pan out the sitemap based on the user flows.

Avocademy Mentor Portal

3.3 Sketching

Sketching for this project is a little different from normal projects because we were working on an add-on portal to an existing CRM system. Therefore, we had to take the Keap Component Kit Avodacmy provided us into consideration while sketching.

The team decided on two main pages - the mentor dashboard and the student profile.

Pre 3.4 Design Decisions

As I was one of the two leading members for this stage, I really dug deep into everything we had done thus far which really helped with all the design decisions.

See the annotation graph below.

3.4 Wireframing

One other team member and I were taking the lead on wireframing.

We reviewed everything we had created so far - user stories, persona, user flows, and sitemap before we started.

The rest of the team was highly involved, too, during this stage. We communicated efficiently with the client throughout, it was a "wireframe > iterate > re-wireframe" type of process.

Together, we went through 6 rounds of iterations by the end of this stage before the wireframes were approved by the client.

Avocademy Mentor Portal

A closer look at the finalized wireframes below.

4. Design

4.1 Style Guide & Components Kit

The client provided us with their very own Style Guide. During the UI Design process, the team had to bear in mind Keap's Components Kit. We had to make sure that all UI elements could work with the Keap system, aesthetically and functionally. Margins, gutters, spacing, fonts & sizes - everything needed to be in line with the components kit.

4.2 UI Design

Just like the wireframing stage, the team worked very closely with the client and make sure that the communication was efficient and timely, after 4 rounds of re-iteration, the final UI was ready to be handed off to the developing team.

4.3 Development Handoff

The developing team joined the project fairly early, we were able to communicate with the developer about the entirely process. Along with the deliverables, we made these handoff annotation notes below.

The annotations made it easy to communicate with the stakeholders and the developer on how the developing process was going to go.

5. Test

Prototyping & Usability Testing

The prototype is the best way to present what the final product would look like and how it would work to the stakeholders.

The team created a clickable prototype with Axure RP.

The moment of truth is coming - let's test it out. With the clickable prototype, the team conducted an online usability test with one of the Avocademy staff members - a mentor and an administrator. Her words were going to be very valuable to our design because not only is she a current mentor, she is also doing a lot of administrative work, she would be using the product the very most.

During the test, we asked the mentor to complete three tasks (the three red routes). We were happy to see that she completed all the tasks very smoothly. However, from an administrator's point of view, she didn't find the "Start Date" very useful, nor did she understand why mentors would need to "Rate" a student.

Overall, she said that the product was great in general, organized really well, super intuitive, straightforward, visually appealing and had a lot of info and functions the mentors would actually need.

6. Takeaway

The Avocademy Mentor Portal is an end-to-end product that will soon be online and used by all mentors. The team will be watching it closely for future iterations. My main takeaways are,

Communicate! Communicate! Communicate!

There is nothing more important than communication for any project. Communicate with teammates, communicate with stakeholders/clients, communicate with developers - constant and smooth communication is the key to a great end-product.

Annotation is another way of Communication!

Great annotations throughout the design process is just as important as great communication - it makes possible for everybody to be on the same page without guessing or assuming how something would work. Annotate more always helps.