UX Design /

Barron's NEXT

2018

Experience Design

Mobile/Web UI 

System Design

Overview

Barron’s NEXT is an online investing publication for the Millennials audience, but it hasn't optimized its usability for its target users since the product launch. I reviewed the usability of Barron’s NEXT onboarding and explore new features in order to redesign the Barron’s NEXT experience as a class practice project with Barron's company. 

Design Process

design process2-02.png

Challenges

Mobile Phone
How might we optimize the reading experience in investing better for the Millennials to save time and effort?
Pencil

User Research

persona02.png
persona01.png
Target:
 
  • Ages 23-37

  • Has investing experience

  • Employed full-time (30 or more hours per week)

  • Income $80k - $150k+

  • Currently or has previously invested in a publicly-traded stock 

Problems & User needs:

Basic Desktop Copy 2.png

Figure 1: Original user flow & problems

  1. Users are unable to find a company/stock to invest in quickly and easily because users have to click in one article and read the whole article to find a company.

  2. Users can hardly find important information since the sections are not organized well on the home page. E.g. the starter Kit section is on the bottom.

  3. Users need to spend too much time to find a specific stock.

  4. Users might get lost in the investing process since some buttons and pages didn’t allow users to go back.

  5. There is no filtering tool or comparison tool for users to research further.

Basic Desktop Copy.png

Figure 2: Designed new user flow

​To solve the problems, I simplified the process of finding a stock after reviewing users needs and re-structuring the sitemap. Also, I added three features based on Persona and User research in order to save the investor's time and effort.

Main features

Feature 1: Quick link of stock symbol
feature01_m.gif
feature01_w.gif

Figure 3: Quick link of stock symbol

on the homepage

On the market, each stock has a specific symbol. For example, Starbucks’s symbol is “SBUX” and Apple’s symbol is “AAPL”. They are highly identifiable. I added them as a quick link on the homepage so that users do not need to click into one article to search for one specific stock info.

Feature 2: Section titles and Photographic Categories
feature02_m.gif
螢幕快照 2019-01-19 下午5.41.29.png

Figure 4: Photographic categories

on the homepage

I organized the sections, for example, I moved “the starter kit” to the front part of the home page and gave a title to each section so that users will not be confused. I created photographic categories so that users can easily understand each category and reach them fast.

Feature 3: Tags of articles for further research
feature03_m.gif
螢幕快照 2019-01-19 下午5.54.04.png

Figure 5: Tags of articles for further research on the inner page.

I added tags on article lists so that users are able to filter articles and find what they are interested in easily.

Prototype

螢幕快照 2019-01-19 下午5.33.02.png

Clickable prototype (mobile): https://invis.io/G5PLYY7HXRZ

Clickable prototype (website): https://invis.io/RQPLYYYY6TZ

Design Style Guide

Including: Components, Color setup, Buttons, Form & Input elements, Typography

Components.png
Colors.png
Buttons.png
Forms.png
Typography.png