My Portfolio
Maren Fiorelli
TheStreet.png

Savvy Investing_TheStreet.com's stock education platform

Inspiring Millennials to invest smart

Company: Thestreet.com

I worked on the: Research, Interaction Design, Wire-framing, Prototyping

TheStreet.com is an American financial news and services website founded by Jim Cramer and Martin Peretz.

The Challenge
Our team assisted in completely re-vamping their brand identity, and redesigning a responsive/mobile stock education website focussing on the millennial investor.

 
TheStreet_Title.jpg
 

 

What was I asked to do?

  • Design a responsive, modular layout

  • Focus on more self guided actions than directed

  • Personalize user content

  • Build in the ability to track usage on the site

  • Apply a user centered design approach (based on research) to a new app design

 
quote backround.png

" Transforming the stock trading experience from solitary to interactivity."


 

Where I started?

IMG_4642.jpg

The project began with a set of over-promised features, and a very short deadline. Most people would be Toast....but as the only designer, I was tasked to make this piece of flaming burnt toast into the BEST SANDWICH YOU'VE EVER HAD.


THE APPROACH

How might we...

Create…

a complex, scalable, component-based, system that divorces the idea of investing from the aging financial institutions

For…

both savvy and non technical users

To…

easily and successfully connect with other company products

And improve…

the overall user experience and trust of millennials in their financial decisions

 

THE SOLUTION

Dashboard page

  Features   1.simplified filer choices  2.Easy to read graphics  3.Personalized content and bookmarking

SCREEN FEATURES

  • Simplified filter choices

  • Easy to read graphics

  • Personalized content and bookmarking ability

 

Portfolio page

Desk_2.png

SCREEN FEATURES

  • Simple understandable UI

  • Color coded rating system

  • Easy filtering

 

Video library page

Desk_3.png

SCREEN FEATURES

  • Self-guided user Education

  • Featured video selection

  • Inline and offline Video watching capabilities.

 

Final Prototype

( For the sake of time, this is just the mobile version. Contact me you really want to more.)

 

 
TheStreet_noTitle_2.jpg

The Process: You've seen the gist of where we landed. Now lets come back to reality and explore the design intentions.

 

 

Process

  1. Research
    (Who are the users? What is the product? What are the goals?)

  2. Document

  3. Collaborate and build relationships
    (users, stakeholders, devs, engineers)

  4. Create early low-fi designs and socialise with stakeholders
    (keep everyone in the loop, to prevent big surprises)

  5. Iterate & test  (user test where possible)

  6. Create Invision designs and socialise

  7. Iterate & test (user test where possible)

  8. Handover for implementation

  9. Support implementation (when possible)

 

 

Research objective

People and their financial habits

I needed to understand the user. Who they are? How they interact with the current product? How did they make their financial decisions?

I interviewed and observed

  • Professional Stock Traders

  • Casual investors

  • New College Graduates

  • Normal people just looking to learn more about investing

 
chris-liverani-552649-unsplash.jpg
 

Research outcomes

Customer Assessment: Millennials vs Baby Boomers

Persona 1: Financially Volatile, and Optimistic Millennials

  • Saddled with huge student loan debt, millennials are delaying many adults rites of passage, such as starting a family and investing in retirement.

  • They like to make their own decisions based on suggestions from people they know.

  • 42% of millennials don't trust big financial institutions.

 

Persona 2: Financially Stable, and Conservative Baby Boomers

  • They are more advisor-dependent and will not likely to make an investment decision without a consultation from a financial professional.

  • Less likely to take action during market volatility.

  • 42% of millennials don't trust big financial institutions.


quote backround.png

How can we bring all these different

issues together?


 

Brainstorming the architecture

After we looked at the research from all angles we started to brainstorm.

IMG-3136.png

Breaking down the flow

After we sketched out the user journey on paper, and went through many iterations. We began to put them in sketch.

User flow_Calendar.png

Design Direction

1.Navigation Design Goals

Alleviating the navigation confusion with a left navigation.

 

Wireframes_1.png

Left Navigation

.

1.This menu helps with the way finding issues

2. Streamlines menu hides not relevant information


2.Site Structure Design Goals

Simplify and personalize the site structure by focusing the information architecture

Wireframes_2.png

Page Structure

. 1.Personalized user profile

2. Bulletin section to keep the user informed

3. Self selected by the user

4.Bookmarking and personalizing content

 

3.Responsive and Adaptive Design Goals

Create a responsive website by redesigning the site in a modular way

Wireframes_3.png

Responsive design

1. Card style design that stacks in mobile and expands in desktop

2. Horizontal and Vertical scaling

 

4.User Education Design Goals

Create a learning as opposed to a “telling” environment for the user

Wireframes_4.png

Self Guided Structure

1.Stock education portfolio page

2. Ability to track certain stocks

3/4. Full access to articles

that reflect the users preference.

 

 

 

Final thoughts (humanizing the process)

In the end of the project there were more than long days and sketch books full of notes. Here are a few things that I learned along the way.

  • Agile comes in many forms, I'm not sure if the financial sector really know what that word means.

  • Let the development team estimate in hours for the user stories. I'm not good at that.

  • Divide out the tasks in to more manageable chunks.

  • Start development at a more basic level, before you get into the weeds. Show the Business, and Product team a user flow to create a foundation for your design....they are less likely to throw out " another feature idea" later on in the process this way.

  • Continue supporting the dev team, and get them involved at the beginning.

  • Eat more tacos with Mohammad. He knows the secret food spots.


Credits

  • Client: Jim Cramer and TheStreet.com

  • Role: UI/UX/Visual Branding

  • Coworkers: Team (UX, Sales, Marketing, and Development)

  • Status: Concept and Design Approved, and finished Development in the Summer of 2017.

  • Found on: itunes, and the Street.com

 
Thanks.png

Thanks for Watching!