Etobicoke Career Services - Booking a Mentor

Etobicoke Career Services is a non-profit organization in Toronto which is dedicated to support diverse Canadians and Newcomers with career counselling, training, and mentorship support. They have partnered with the local community, government, and businesses to provide their services.

I started my research with doing competitive analysis on local organizations that provide career services. I identified potential groups of users which use these services. I then interviewed some of these users about what they thought about mentorship and their motivations to use mentorship services.

I uncovered several pain points as a result of these interviews:

I also read a lot of research materials about how different age groups use technology and how they use smartphones and laptops for different tasks. The majority of these research materials indicated that smartphones were used more than desktops and laptops across all age groups. These findings compelled me to design with a mobile first mindset. I'd start with the app and then move on to the website.

Personas:

After conducting the initial research and identifying user pain points, I created personas from the collected data.

I created persona user flows to determine and map out the key screens and pages that needed to be designed prior to creating the wireframes.

Paper and Digital Wireframing:

I sketched out the app screen flow on paper. The purpose of these paper wireframes was to give each screen a visual appearance and to experiment with UI elements and patterns for the app. I created low-fidelity digital wireframes on figma using them as a reference. I linked the digital screens together to create a low-fidelity wireframe for testing the user flow.

Low-fidelity Prototype:

With the low-fidelity prototype, I conducted the first round of user testing. Under early career in mentorship support, five participants were asked to find and book a mentor. "Task Success Rate," "Time on Task," and "User Error Rate" were the parameters for this usability study. After each participant completed their user test, I conducted a brief survey to learn about their experience.

Branding and UI:

After the completion of first round of usability tested I started work on the app's branding and UI. I used a combination of Raleway and PT Sans font for their exellent readability and designed a custom color palette. Simple, modern, and most commonly used icons and components were added to the app's design system.

Mockups:

Based on the findings from the usability study, I added supplimentary information under the career labels to assist users in selecting the best option for their needs and situation.

I pulled the industry filter from the mentor results and made it a new screen that would precede the results screen. I also added a filter to search mentors by role. These updates would help the users to better filter their mentor search.

High-fidelity Prototype:

I connected the updated mockups and created a high-fidelity prototype. I then proceeded to conduct a second round of user testing.

Mockups:

I removed the unnecessary extra step required to go over to the mentor list by removing the search button and turning all industry options into buttons to further reduce user time on task.

I added a chat option on mentor profile to enable users to message or chat with their mentors.

Low-fidelity Prototype:

I applied my findings from the app usability study onto the low-fidelity digital wireframes for the website. To structure the web pages, I used low-fidelity components and elements from the newly created design system. To test the user flow, I used the same parameters as in the app usability study.

Usability Study: findings

• All Test participants were successfully able to complete all the tasks.

• On the mentorship services page, some participants paused for a while before they realized they had to scroll down to view more options.

• Some participants expressed a lack of navigational cues in between the mentor profile and the search results.

Mockups:

I added scroll description in places where necessary to guide users.

I added a breadcrumb navigation to help users easily understand their location on a page in relation to the higher level pages on the web application.

Responsive designs:

I created mockups in various screen sizes to see how various UI elements would appear in them.

The final high-fidelity prototypes, created from refined mockups provides a consistent user experience when booking mentors through App or Website.

• Used color palette that meets most of WCAG contrast ratios.

• Used universally recognized icons and symbols with text for easier identification of menu items and delivery components.

Impact:

Professionals in different stages of their career can access a variety of services for career development through mobile, tablet, laptop, or desktop.

What I learned:

I learned about the importance of a design system and use of popular design patterns to achieve a consistent UI and its implications on the overall user experience.

Thank you for taking the time to review my case study on Go Ontario. If you have a design problem and want to collaborate, please feel free to reach out to me.

Email:

mauryagovani@gmail.com

Linkedin:

www.linkedin.com/in/mauryagovani