My Portfolio
Maren Fiorelli
TheStreet cover.png

Savvy's stock education platform

Inspiring Millennials to invest smart


I worked on the: Research, Interaction Design, Wire-framing, Prototyping 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.



Project Goals:

  • Design a service experience that connects with the current brand.

  • Creating one design system responsively optimized for the device being used.

  • Prioritize more self guided experience rather than a directed one.


"From complex to a digestible environment. "


Where I started.


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.


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



Dashboard page

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


  • Customized content

  • Personalized screen behaviors


Portfolio page



  • Simple understandable UI

  • Color coded rating system

  • Easy filtering


Video library page



  • 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 if you want to more.)



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




  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


Research outcomes: : 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.


How can we tie all these

issues together?


Brainstorming the architecture

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


Breaking down of 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

Navigation Design Goals

Alleviating the navigation confusion with a left navigation.



Left Navigation

More intuitive navigational menu.

Site Structure Design Goals

Simplify and personalize the site structure by focusing the information architecture


Page Structure

Personalized user profiles, with bulletins to keep the user informed, and book mark to save important items.


Responsive and Adaptive Design Goals

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


Responsive design

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


User Education Design Goals

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


Self Guided Structure

Stock education portfolio page, with the a

bility to track certain stocks.




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 while designing. It keeps the creative juices flowing.


Thanks for Watching!