Madison Poe
UX/UI Designer

Avocademy Mentor Portal

CRM Dashboard | Desktop Design

Image alt tag

Overview

Avocademy is building its own technology to support its mentor team. Currently, mentors work directly out of a CRM called Infusionsoft. They want to create a front end where mentors can sign-on, see student progress, add comments, and check off progress/checkpoints.

Role

One of five UX/UI Designers working with stakeholders and developers
Duration

4 Weeks
Tools

Miro

Figma

Axure RP

Jiro

Zoom

Slack
Techniques

User Interview

User Persona

User Flow

Wireframing

Prototyping

Usability testing
Avocademy Mentor Portal Design

Teamwork

I was selected to serve on a remote team of five UX/UI Designers to research, build, and create a CRM dashboard tailored directly to the team of mentors at Avocademy.

Together we did secondary research, developed personas and user flows, built low-fidelity wireframes, and created high-fidelity UI designs.

Research Phase
Avocademy Mentor Portal Design
Avocademy Mentor Portal Design

Red Routes

Taking the user stories below that were provided by the stakeholder, we created three overall red routes that encompassed all of the user stories through three main user flows.

As a mentor,


- I’d like to see a directory of all students so that I can select which student I am meeting with
- 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)
- I’d like to progress each student to the next module and keep track of their progress
- I’d like to rate each mentor session and leave notes for each student
- I’d like to alert student success if a student is not progressing or needs extra help
- I’d like to search for students
- I’d like to filter students by start date and projected end date
- I’d like to see the progress of each student per course (foundations or career jumpstart)
- I’d like to assign a task to a student with a due date

Sitemapping

We then created a sitemap to help us plan which screens needed to be planned for and how the elements would interact.

Avocademy Mentor Portal Design
UX Design
Avocademy Mentor Portal Design

Sketches

After completing the user flows and sitemap, the main screens became the mentor dashboard and the student profile. We concluded that from these screens, the user should then be able to complete all of the user stories.

Low-Fidelity Wireframes

Once the sketches came to life, we were able to begin wireframing low-fidelity screens in Figma. We went through several rounds of modifications to make sure that the UX and data fields aligned with the stakeholder's needs.

UI Design & Prototyping
Avocademy Mentor Portal Design

UI typography and color scheme are in keeping with Avocademy's established branding.

Additional edits were made after the low fidelity versions in an effort to create a more simplistic dashboard which was important to the stakeholder.

Avocademy Mentor Portal Design
Final UI Review & Developer Handoff
This image breaks down the final changes that were made in UI development and explains how and why we made the decisions, both in keeping with the stakeholder and development needs.

This image breaks down the final changes that were made in UI development and explains how and why we made the decisions, both in keeping with the stakeholder and development needs.

Developer Handoff

As my first project to hand off to a developer, the team and I had a final review session to discuss the remaining gaps in our project. In this session, we covered the following checkpoints to ensure a smooth handoff to development:

  1. We questioned everything on the page and then annotated it. This helped us explain the reasons "why" to the stakeholder and also to better tell the developer how to code.

  2. We discussed data limitations with the stakeholder and developer. What data points are available? What are the values? This allowed us to work within the constraints. It also set up for an easier handoff through agile concepts in Jiro.

  3. Last but not least, we covered responsiveness. After building our design to fit a standard 1440 desktop screen, we accounted for different breakpoints so that we could tell the developer what our design would do at every size range.