FIO

An E-Learning app designed for people who want to learn about a career path before committing to it

Who is Grobot?

Case Study

Contact

Who is Grobot?

Contact

Case Study

Design Portfolio

Mobile App & Responsive Web - Portfolio Project

Overview

The final project in the Google UX Design Certificate course was to create a project for social good. FIO (Figure It Out) is something I wish I had in college. As someone who changed majors more than once, it would have been so nice to have a peek behind the curtain of career paths I was interested in before deciding on next steps in my own career.

Goal:

Design a user flow for an e-learning platform with a rating system after completing an activity.

What I learned:

There is a vast community online that provides free artistic elements for use in Figma designs. Using available elements, colors, and layouts can speed up and simplify the design process.

What I would do differently:

If this was a real-world project, I would make sure to sit down with a development team to see what is feasible before setting out to make a design like this.

User Research

For this project, I conducted several usability studies and multiple rounds of interviews after each iteration of the design. Research participants were given the opportunity to provide feedback after each round of questions.

Pain Points

1 Navigation

Users need to be able to find what they are looking for quickly and easily.

2 Starting over

Since there is a progression system built in to the app, there must be a way to reset your score without penalty.

3 No judgement

Career paths are deeply personal to each individual. At no point must the content on the app sound harsh or judgemental.

Persona

"Mom wants me to be a doctor, Dad wants me to be a lawyer. I don't even know what I want."

Age

Gender

Male

Family Status

Single

Children

None

Job Title

Student

Most used device

Smartphone

Tony

Art credit: Framui

Tony

Background

Tony stops for lunch at the college cafeteria. He finds a seat and takes out his laptop to watch a video from his homework assignment as he eats. 20 minutes into watching the video, Tony starts to daydream about his future. First, he sees himself as a doctor, tending to patients; then, he thinks about how much he loves cars and that it might be interesting to try out something engineering-related. Tony has not picked his major yet and he is almost done with his GE classes. The pressure of having to pick a path gives him anxiety. The video he was watching abruptly finishes and Tony realizes he missed half of it. He laughs to himself and starts the video over, focused and ready to learn.

Goals

• Do well in his classes and pick a major before the deadline.

• Find a way to learn about career paths without having to ask people directly.

Frustrations

• It is difficult to ask for help with something that looks so easy from an outside perspective.

• Other people seem so sure about their career choices.

• Tony does not have a mentor.

User Journey Map

Persona

Goal

Action

Tasks

Emotions

Opportunities

Tony

Pick a major based on his FIO score

Research options

Find FIO

Do an activity

Rate his interest

Pick a major

• Go to student portal

• Note the available options

• Open app store

• Download FIO

• Open FIO
• Pick a category

• Start activity

• Rate the activity

• Start a new activity

• Pick a major based on his FIO scores

• Anxious

• Curious

• Interested

• Amused

• Curious

• Engaged

• Confident

• Proud

• Integrate with college portals

• Share function

Starting the design

FIO was designed mobile-first with progressive enhancement in mind. Inspiration was taken from Coursera, Duo Lungi, and Kode with Klossy (which is an awesome coding bootcamp for girls) to make a punchy, colorful, and playful application that used classroom colors and a cute mascot.

The first designs were made on paper then transferred to an extremely simplified digital wireframe.

Digital Wireframes & Lo-Fi Prototype

The home page was designed to be a quick place to see your latest results and move on to a new task without any hesitation.

The explore tab is where users can find a specific category or task. In this early iteration, categories were missing from the wireframe.

At first, the rating system took up a whole page. It was later consolidated with other features

View Lo-Fi Prototype

Usability Study & Design Iterations

Study Findings

1 While easy to navigate, the Lo-Fi prototype left users wanting more information

2 Scrollable sections on a prototype must be marked with a scroll bar, even if it is not functional

3 Inconsistent design language can disrupt the user flow

Experimenting with style

FIO was designed to use classroom-style shapes and colors from inception.
Deciding on which icon kit to use took a bit of trial and error.
I decided to go with a kit by streamlinehq.com after asking my wife for her opinion.

A little explanation goes a long way

Some users did not understand what to do with the rating slider.
Since there was so much extra room on the card, I opted to write an explanation of the score.
In this case, an explanation was the perfect accessibility feature to walk people through using the rating system without being patronizing.

Accessibility Considerations

1 Large buttons and clear lettering helped users read the text on each page.

2 Explanations are not a substitute for an intuitive user flow.

3 Some users wanted to go back to the activity after completion before submitting a rating. Backwards navigation was limited by design.

HI-Fi Prototype

Using what I learned from the past two portfolio project, I made sure to design FIO with as many reusable elements as possible. This project is the culmination of my learning from the Google UX Design class, along with hours and hours of watching YouTube videos from the UX design community. I am grateful to live in an age where access to learning new skills like UX design is so accessible. There is always more to learn, and I am excited to see what comes next in my UX design journey.

View Mobile App Prototype

View Desktop Prototype

View Tablet Prototype

Back to Portfolio

Art credit: Luiz Carvalho (Raccoon)

To view more, please use desktop mode :)