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.
Madison Poe
Product Designer
Avocademy Mentor Portal
CRM Dashboard | Desktop Design
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
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
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.
UX 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
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.
Final UI Review & Developer Handoff
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:
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.
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.
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.