UX CASE STUDY

CONCEPT PROJECT

Online classes that teach you all about investing

Professor investor is a more reliable source of investment information

Within a team of four, we designed a platform that provides educational videos, taught by real professionals, so that novice investors could learn everything they need to know about how to invest. We created a responsive web-based product that leverages social capital to build knowledge.

Harnessing social capital and legitimizing financial knowledge.

Overview

Novice investors want to put their money in diverse investments. However, they lack the experience and knowledge to do so for a wide range of reasons. And with a wealth of financial influencers all across social media, novice investors are unsure where to get credible information online.

Problem space

Even though the origins of NFTs date back to 2014, it wasn’t until 2021 that this novel technology found its way into mainstream markets. Since then, NFTs have emerged as a new potential space to invest and diversify one’s portfolio. Many experts believe it’s here to stay, and others have criticized it to be an inflated bubble and “exposes people to unnecessarily high risk and the burden of risk.” NFTs have become a controversial topic that people passionately debate over. In part, this is due to the youth and immaturity of this space. Misinformation, manipulation, and convoluted processes plague its reputation, and novice investors may not know who to trust or where to go for information.

My role: Project manager | UX designer

Throughout the sprint, I managed a team of four UX designers (Lester Li, Minjae Kim, Sevil Eyubzade, & Shaina Goodwin) to design a responsive web-based platform that teaches novice investors about investing.

Methods

Created topic maps, conducted business research, competitive feature analysis, user interviews, created a screener survey, affinity maps, user personas, user journeys, MUSHCOWO map, feature prioritization, sketching & design studio, prototyping, and moderated & unmoderated usability testing.

Tools

Figma, Figjam, G Suite, Keynote, Trello, Zoom, & Slack

Timeline

2-week sprint + post-course reflections & learnings

Our goals

Learning goals: Responsive design

Part of General Assembly's learning experience was to teach the limitations of web, desktop, and native apps. During this part of the curriculum, students were asked to explore topics, picked at random, and create a new mobile web-based product.

Research & project goals

And with our insights from research, we then set out to create a platform where novice investors can learn about investing on mobile & web.

Our user research sought to find out: (1) what novice investors are doing with their investments; (2) how they choose their investments; (3) why they chose those investments; (4) which platforms they use to invest; and (5) what their experience with investing was like.

Our challenge

Capitalize on social capital

Novice investors rely heavily on the knowledge of others. We call this social capital. We’d like to capitalize on social capital in order to foster community and mitigate risk, all while being present and keeping up with the times.

With Professor Investor, novice investors can learn on the go and at home.

_

Mobile web

Pressed states for making tapping fun.

 Click through my prototype below!

My solution for mobile web

Measuring success for mobile web

We tested three flows to ensure our users needs were met. And we improved our design!

_

Desktop web

Hover states for making navigating and exploring with a mouse or trackpad fun.

 Click through my prototype below!

My solution for desktop

End of TLDR

I created the final screens shown above after the 2-week sprint as a personal UI challenge. Placement and content remained the same. I changed the color scheme, interactions, and the theme of the design.

I also learned some very valuable lessons from this exploration:

1. Technical capabilities

Web app vs native app

The type of product, features offered, and the UX/UI of the product is all affected by how the app is being developed.

2. Best practices

4-Column grid

We designed mobile while overlaying a 4-column grid on top, and desktop with a 12.

3. Information architecture

Primary navigation

We considered which navigation would our users use most often and designed around this.

_

I created a responsive UI design inspired by the business concept.

 Here's how my team and I did it.

The process

First, designing the right thing → Second, designing things right → Rebrand & iterate

Our team was given finance as a topic. But that's all we were given. From there, we had to discover a problem space and create a product backed by research. After the program finished, I revisited the UI design of the project. I decided to combine the UI, UX, and branding/business concepts.

2-wk sprint

Discover

Define

Develop

Deliver

Post sprint

Unify

User research & interviews

Listening to novice investors' experiences

We also found it important to validate the problem space through user research. Our team conducted interviews with 5 novice investors we pre-screened with a screener survey. We defined "novice investor" as individuals who have invested between $1-$50,000 within the last two years. We asked questions that aimed to uncover our users' pain points, frustrations, and past experiences with investing.

We then synthesized our findings through affinity mapping and distilled insights from strong groupings and themes.

Key takeaways

Personas + user journey

Designing for our target audiences

After we gathered our thematic insights, we created a persona that reflected our target audience. And with our newly crafted persona, we mapped out a user journey that shows what a potential novice investor would experience when investing in cryptocurrencies for the first time. We did this to see if there are any areas of opportunity for us to design a better user experience for someone like Lawrence. I combined the persona and journey in the diagram below.

Ideation

Sketch & ideate. Evaluate & sift. Rinse & repeat.

Revised Problem Statement

Novice investors find investing overwhelming; therefore, they lean on others they trust for financial advice. In the shoes of our persona, Lawrence oftentimes feels like he doesn’t have the time to keep up with what, how, and why to invest.

How might we provide up-to-date, relevant, and simplified information about traditional and modern investments so that novice investors can make educated decisions regarding risk?

Design studio

We held various design studios throughout our process. For the design studio that led to the MVP of our redesign, we used a MUSHCOWO map and feature prioritization matrix. While keeping our concept of social capital in mind, we came up with features that would address the pain points and insights we uncovered during our research.

We prioritized these new features & changes...

Sketching on Cr@zY 8'$

As a way to generate and explore a lot of ideas and concepts quickly, we ran rapid-fire timeboxed design studios. Our team sketched, ideated, iterated, and debriefed on what works and what doesn't. We focused on addressing the insights we got from our research. In particular, we focused on...

Usability testing

Mid-fidelity high-fidelity

In order to ensure our product met the expectations of our users, we had 2 rounds of usability testing with 10 participants. After testing our mid-fi designs, we revised the project to address the issues we surfaced. Check out our process below.

Home

Many participants could not find the CTA button to "Meet our instructors!"

Tested the color contrast of the CTA in high-fidelity

Menu

Some participants went for the hamburger menu first in lieu of the categories

We considered swapping "categories" with "my account". However, we decided to leave this placement because we anticipate users using "categories" more than "my account"

Introducing...

Professor Investor

Professor Investor is a non-fungible educational web-based platform that teaches novice investors more about investing. After the 2-week sprint as a personal UI challenge, I updated the UI to match the branding concept we had for this platform. Placement and content remained the same. I changed the color scheme, interactions, and the theme of the design. 


_

Mobile web

Pressed states for making tapping fun

My solution for mobile web

Measuring success for mobile web

We tested three flows to ensure our users needs were met. And we improved our design!

_

Desktop web

Hover states for making navigating and exploring with a mouse or trackpad fun

My solution for desktop

Post project reflections

Looking back with appreciation and a growth mindset

This concept project challenged us in many ways. First, we had to think critically about the advantages and limitations of desktop web, mobile web, and native apps. 

Additionally, it was really important for us as a team to make sure everyone felt heard. We practiced active listening and amplified each other's strengths in order to achieve the best MVP our team could make. A special thanks to my teammates. We delivered a product that I'm extremely proud of and am grateful for the chance to show you what we've done.