Mentor Homepage Sketch
Ryan Russell
UX Designer
Avocademy Career Portal
CRM Dashboard - Desktop UX/UI Design
UX/UI Team Project: Avocademy Career Portal
Role: UX/UI Designer, Team Lead
Responsibilities included:
User Research & Results
Site Mapping & User Flows
Interface Design & Wireframing
High Fidelity Mockups
Tools: Figma
Team: 8 UX/UI Designers
Date: August-October, 2021
Challenge: Avocademy currently uses spreadsheets and a small business CRM platform called 'Keap', to manage their ever increasing number of students & job seekers in the Career Jumpstart program. This solution was failing to meet the needs of Avocademy Mentors.
Solution: Design a CRM solution for job seekers to keep track of job profiles, job applications, interviews, and assigned tasks. Ensure that there is access to available educational content, and that mentors are able to determine the status of, active task, and job preferences of the students.
Research
To get started on this project we had a team meeting to begin dividing up how we would go about our research. Deciding that everyone would conduct some general secondary research on CMS system design we divided up our primary research responsibilities. Individuals were assigned to recruit participants and complete interviews with our target user groups, while two individuals came up with the interview guides. This was decided to promote consistency within the interviews, as each interviewer would be asking the same questions to their interviewees.
After the guide were reviewed, the interviews were conducted and the notes from each dropped into a group document folder. We then met again as a team and began the process of drawing qualitative data from the interviews. As we worked we went through a process of review, collating and finally arrangement into empathy maps for the personas which would represent our user groups.
Sketching, Ideation & Site Map
Over the course of this project the site map took on many different forms. Its final edition looks only remotely similar to the initial iteration and goes to show how greater understanding of the problems as well as facing and overcoming challenges presented during the design process in shape the final product which is presented.
One way which the process of collaboratively building the site map helped, was by drawing attention of the team to the parts of the website which we needed to come up with specific design solutions on.
The continuous review of the site map against the corresponding design ideas (as well as UX best practices), helped to ensure that our pages were structured in a way to help our users accomplish their flows in the most efficient, and effective manner.
Final 'Student' Site Map
Design System & Components
As we moved from processing our research to ideation and sketches it was important to note that we had been provided with a component library which this system was going to be developed from. The shareholders wanted to keep development costs down by not developing too much (if any) custom content. This meant that we needed to design with the styling and components allotted to us.
The first thing I began to do was reconstruct the components in a private Figma file. Understanding the structure of each element I'm working with is vital to being able to edit and adjust within the parameters which are set while maintaining the fidelity of the element.
Wireframes
As I met with the shareholder to review our research and results, I was informed of another project wrapping up for the client. This other project would guide some of our design choices going forward in the project.
Welcoming Yoshi
I was given some PNG images and set forth to meet with the team in order to inform everyone of the change before too many hours were invested into divergent designs. However, seeing as the set deadline was coming up soon, with no time to coordinate a team meeting for 8 remote designers across 3 time zones; I opted to utilize our group channel to direct people to the cross reviewed files. With emphasis placed on taking a look at the shareholder comments, and the images provided of the closed project iteration.
We would go on to discuss the initial completion, release and design style from "Yoshi", in our wireframe review team meeting. This proved to be an adequate means of communicating the general ideas from the shareholders to the team and in our wireframe meeting we saw the stylings utilized across most designers wireframes.
High Fidelity Job Seeker Homepage, Iteration 1
High Fidelity
Peer Review & Shareholder Review
One of the most constructive and beneficial parts of working with the team was the contribution of ideas towards our final screens. Reviewing our wireframes in team meetings, we found inspiration from each others designs which would later become standard across the Career Portal.
As I met with the shareholders for this project they provided direction as to what they liked about the designs and what may not be necessary for their operations. From these discussions I was able to bring valuable feedback to the team to refine their designs through recorded review sessions, cloud notes and comments.
With two iterations of wireframes reviewed and refined we moved forward to complete an initial run of high fidelity screens.
Hi-Fi Iteration 2
After the first Hi-Fi iteration team review, we identified elements which needed to be consistent across our screens in order to ensure ease of navigation and understanding for potential prototype groups. In addition to this
Developer Handoff
Building on the design structure of the previously completed Avocademy Foundations CMS project, our shareholders did not need a prototype completed for these designs. The clarity of actions between screens was illustrated clearly in high fidelity, with each click being displayed for the developers.
Additionally developer annotations assisted in ensuring that the design vision was being clearly constructed in development.
Reflection
There was a lot that happened during this project: Leading a team of UX/UI Designers from across the country through the UX/UI design process, shifting design goals & structure, and working diligently with the client to ensure developer handoff was a smooth success.
Overall this project was a testament to the importance of communication. Within the team, with the clients & shareholders and with the developer, communication was vital to ensure that the end product fit the needs and designs which our client required.
Looking Forward
Communication & Consistency are two big items which I'm taking away from this project.
Having a reference in the previously completed project iteration 'Yoshi', was fantastic in referencing the style guide which was, and would need to be utilized for this project. The benefit of frequent, task specific team meetings was also realized in aligning our screens to a single vision through each stage.
However, concretely communicating/mandating the importance of aligned color, typography, margins and other pixel specifics for the team would be optimal going forward to ensure that, through each stage of development, there is a high degree of consistency throughout all of the screens being generated by individual team members.