InvestEd

Mobile App (UX Design)

WHO

  • Jason Cairati
    Designer, Researcher

WHAT

  • InvestEd is a mobile platform for investing education.

WHEN

  • September 2023 - ongoing

WHY

  • Users need a simple way to learn about complex topics related to investing. The goal is to create an easy-to-use platform that can promote a sense of simplicity and clarity.
A hero image of the GalleryScan being used on an iphone
THE GOAL

Create a learning platform to help make investing more accessible and easier to understand. Focused on ease of use and inclusivity/accessibility.
THE PROCESS
Since this was a personal design project, the budget for research was limited. Initial research consisted of developing a set of questions for interviewing a small sample of people (5-7) and gathering insights through this process. A competitive audit of existing apps/websites both related to learning, such as Duolingo and sites for investing such as Investopedia was conducted.

According to The Washington Post, 61% of people in the US invest, so I wanted to understand who the other 39% are. Personas were developed around this research with a focus on one user group for this round of testing. The lowest-percentage of people who invest, based on data, showed specific demographic information that is reflected in the persona.


PROBLEM STATEMENT

Jennifer is a busy working-class person with limited funds and limited time to learn about investing but wants a simple understanding of how investing works to support her future and finances. She doesn't have a lot of means to get started currently but is interested in understanding with the limited time and resources available to her.

PERSONA - JENNIFER


Age:
35
Education: High School Graduate
Hometown: Jackson, MS
Family: Single
Occupation: Food Service Worker

"I want to know how to set something up for my future and my future family in a way that is easily understood and won't take up a lot of my time.

GOALS

Learn how investing works

Use that knowledge to help grow her future finances and be an informed participant in the process.

FRUSTRATIONS

Finds the barrier of entry to investing overwhelming and confusing.

Is frustrated with knowing where to start in her process of learning and practicing investing.
IDEATION
Understanding the potential user problems helped in the brainstorming/sketching process. I started to think about how the layout could better inform the user on what was important to their learning process. The biggest insights were developing a section for deep learning and a section for testing the user's knowledge, ideally in a way that would demonstrate their progress.
Through this process, I learned I needed to develop two potential paths; a way for people who were interested in knowing an in-depth amount about the subject and those with a passing interest or limited time to devote to this process.
STARTING THE DESIGN
After sketching out potential home layouts, I began thinking about the inital on-boarding process and developing solutions to customize and personalize the experience for the user.
DIGITAL WIREFRAMES

The initial design focused on two categories listed, "Simplified" and "Detailed" to help create a homepage and workflow designed for each category.
LOW FIDELITY PROTOTYPE
One round (so far) of testing was done with a low-fidelity prototype. It showcased the main on-boarding process to focus on first impressions and first experiences with the app.
USABILITY STUDIES

BUTTON LAYOUT

Button layout was inconsistent between the pages and could be better placed for ease of use and time on task.

VISUAL REPRESENTATION

Iconography was incorporated throughout to improve navigation.

MENU ITEMS

"Profile" was moved to the top instead of the bottom bar to prioritize access to a search function.
REFINING THE DESIGN
After reviewing the data, a number of changes were implemented at the high-fidelity level. Additional testing is still needed at this stage before iterating on the design.

BEFORE USABILITY STUDY

AFTER USABILITY STUDY
"Profile" was moved to the top corner and replaced with a "search" function to improve navigation. Icons for the courses were used as well to highlight the course titles and illustrate the movement to the next section after "Courses".

BEFORE USABILITY STUDY

AFTER USABILITY STUDY

Text was added in the HiFi version to give the user an approximation of time spent reading an article. This could be developed using existing platforms that convert text into time spent reading.
FINAL DESIGN
A high-fidelity design followed the same main user flow utilizing the design system developed for colors, typography, spacing, layout, and iconography.
DESIGNING FOR ACCESSIBILITY

Colors and font sizes need to pass WCAG standards. Further exploration of color contrast might be tested to reach AAA rating on Accessibility Scale

Icons have clear text labels to help with users unfamiliar with certain icons.

Headings follow hierarchal structure to facilitate easy use with screen readers. Alt text for images will be added in next iteration.
FINAL THOUGHTS

IMPACT

Users felt excited at the potential of a product to help them understand a subject that they often said was either too complicated or scary to learn about.

Use of search function and button placement helped improve time on task by 27% in the limited testing done for this project so far.

WHAT I LEARNED

I learned the value of spending time researching the problem from both a user and industry perspective. The personal nature of this project left me to be creative with my ability to research and test. I hope to continue to iterate on this design for further development in my own practice and understanding of both design and investing.

MORE WORK

McCarthy Music
Desktop/Tablet App Redesign (UX/UI)
Rahma Beauty
Responsive Web Design (UX/UI)