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
Utilized a 4-column grid
Created press states to highlight our professionals
Separated important screens into two menus - one for the primary navigation and the other for investment categories
Measuring success for mobile web
We tested three flows to ensure our users needs were met. And we improved our design!
Participants' scored the new flows an average easiness rating of 4.3/5 (from 3.9 to 4.3)
13% more direct completions
Increased the average success rate from 73% to 83%!
_
Desktop web
Hover states for making navigating and exploring with a mouse or trackpad fun.
Click through my prototype below!
My solution for desktop
Utilized a 12-column grid
Created dynamic hover states to highlight our professionals
Prioritized a horizontal nav bar
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
Investing is overwhelming
Novice investors like to put their money in emerging and trendy markets
Novice investors listen to others for financial advice
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...
Designing flows and screens with the user in mind
Harnessing social capital
Priority & hierarchy of information
Responsive design elements (web vs mobile)
Including multiple types of learning styles
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
Utilized a 4-column grid
Created press states to highlight our professionals
Separated important screens into two menus - one for the primary navigation and the other for investment categories
Measuring success for mobile web
We tested three flows to ensure our users needs were met. And we improved our design!
Participants' scored the new flows an average easiness rating of 4.3/5 (from 3.9 to 4.3)
13% more direct completions
Increased the average success rate from 73% to 83%!
_
Desktop web
Hover states for making navigating and exploring with a mouse or trackpad fun
My solution for desktop
Utilized a 12-column grid
Created dynamic hover states to highlight our professionals
Prioritized a horizontal nav bar
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.