Stockpile - Anh Dang Studios

MY ROLE

Revamp the homepage.

Redesign the gifting experience for stock across the Web and mobile apps.

Design a new and more intuitive stock trading platform from scratch. (Only gifting was possible when I joined.)

Lead and execute all design functions from digital to printing. Ensure that the best user experiences are achieved while meeting business goals.

Establish a new appearance for the company to improve credibility.

Add new features and improve existing ones as necessary.


GOALS


Design the product in a way that makes stock investment less intimidating so that even kids and those who are not very tech-savy can enter the stock market.

Revamp and establish a more coherent design scheme across different platforms and devices.

Also use the platform as an outlet to provide free learning materials on the stock market.

HOMEPAGE

The very first thing I did when I joined Stockpile was to quickly update the homepage. The old homepage triggered some concerns regarding credibility.

With the redesign I focused on:

Highlighting why Stockpile is different from other brokerages.

Shifting focus from gifting stock for someone to buying stock for yourself because I believe many people would invest more in themselves. Gifting usually happens during the holidays and special occasions.

Because the company is still in its early stage, I decided to improve credibility with endorsements, security, and a more modern look.


To view full image:

1. Click on the image to open lightbox view.

2. Click on the square icon in the lower right corner and select "Original".


Old homepage

New homepage

Wireframing - Round 1

Wireframing - Round 2

Iterations

#1

#2

#3

#4

#5

#6

The final outcome

GIFTING STOCK (Online)

Allow customers to send e-gifts of stock and ETFs via the Web and mobile apps.


Customer insights

Collect customer feedback and analyze behavioral data from various analytic services to identify customer’s pain points and address them in the redesigned experience.

Most favorable feature to be added was the ability to place multiple orders of stock for different recipients in a single transaction.

Existing experience

Only one stock purchase per transaction.

Poor user interface & visuals.

Redesigned experience

Ability to purchase multiple stocks for different recipients in a single transaction.

Improved user interface & visuals.


Outlining for structure

• Entry points. (From homepage, or other call-to-actions elsewhere.)
• Select multiple stocks from catalog. (Add-to-cart style.)
• Set dollar amount for selected stocks.
• Enter recipient info (#1)
• Prompt user to restart flow for recipient #2
• Allow user to repeat flow for more recipients as they wish.
• Checkout
• Confirmation screen


Basic wireframing to get the structure of the gifting flow.

After several iterations and click-through prototypes, this is the final outcome:

GIFTING STOCK (Physical)

Allow customers to buy physical gift cards for stock at over 15,000 participating retail stores nationwide. Gift cards can also be ordered and shipped from our online store.

Old cards

Redesigned cards

(Worked with graphic designers on the redesigned cards.)


BUYING STOCK


With our mission to make the stock market more accessible to everyone, we strive to make buying stock as simple as shopping for a merchandise online. That means customers can buy $52, $28, or even $5 of Google stock with their credit or debit cards! The ability to buy stock at any dollar amount instead of a whole share provides an easier access into the stock market for many people.


Research & method

Dive into the online shopping experience to study established practices that people are already familiar with.

Look at various online retailers to study how people select items and pay for them. Identify which behaviors can be used in the context of stock trading, and modify as needed.

Reduce the complexity of a typical stock brokerage by incorporating familiar consumer practices for a thoughtful and engaging user experience.


Basic wireframing

Team feedback

Everyone on the team is onboard with the proposed experience.

However, there is a debate whether to display the number of shares somewhere in the flow.


The outcome

I decided to display the share number on the amount screen, as opposed to the checkout screen as some colleagues have suggested. Additionally, instead of displaying the share number as uneditable text, I designed it as an interactive calculator with editable text field to engage the users.

User testing

A/B testing shows that users actually love to fiddle with the shares estimator. In fact, many users tend to round up the shares, which results in bigger purchases.

User feedback further confirms that my approach to design the flow like an online shopping experience is indeed simple to use and alleviates the complex nature of a stock brokerage.


DASHBOARD

The dashboards of stock trading platforms are undoubtedly very complex and difficult to digest, especially for people who are new to stock investment. My goal is to design a dashboard that is easy to use and present relevant information in the most helpful way possible. Many of our customers are new to stock investment so I assumed that the thing they would want to know the most when logging into the dashboard is to have a clear update of how much money they have invested, and their profit. Other features and details will follow as they take a closer look.


Basic wireframing

      The outcome

      User testing

      User testing with high-fidelity protypes. My assumptions are accurate aligned how the users think. Before showing users the dashboard, many expressed that they would be most excited to know their total profit.

      Users feedback came back positive as they find it very intuitive when looking at the dashboard to find out the amount of money they invested and their profit.

      Very positive feedback regarding the organization of the dashboard. Users can easily understand the information being presented.

      The lean sidebar and profile’s drop-down menu are very well received as users find it very intuitive to navigate through the page.


      The team is happy, users are happy, but I’m not

      I felt like something else can be done to make the dashboard even more intuitive and useful for the users. Even though everyone seems to be happy, I think it would be a better experience if the users get to see more of their stocks above the fold. Furthermore, the information can be arranged in a more self-explanatory way. After some considerations, I further revised my design and got another around of feedback. The the result and feedback was even more positive after my revision.


      The final outcome

      Mobile Web:

      Delivering

      I deliver the final design and specification to the engineering team via Zeplin. I always try to keep everyone informed of important matters throughout the project so delivery is always smooth. I continue to stand by for support, testing, and address any customers feedback as necessary.


      MOBILE APPS

      We used React Native so both iOS and Android apps are the same. Not only a tremendous amount of time was saved in design and development, there was also an added benefit of having both platforms sharing the same experience.

      iOS

      Android


      MARKETING

      With a photography background, I also took the lead on marketing efforts to produce creative assets, designing email templates and landing pages for growth initiatives.

      Emails

      Growth


      SIGN UP

      With all the efforts putting into making our existing customers happy and attracting new ones, I also revamped the sign up flow to minimize frictions and made sure onboarding was as smooth as possible.


      TOOLS USED

      Primary:  Sketch, InVision/Marvel, Zeplin.
      Secondary as needed:  Photoshop, Illustrator, After Effects.


      THE IMPACT

      The number of users increased 300% in 1 year.

      Old experience: 20% said the company feels credible and would recommend it to friends and family.

      New experience: 100% said the company feels credible, and 95% said they would recommend it to friends and family. The other 5% said they would need to use the product first.


      LEADERSHIP

      First-hire as a full-time designer to lead and execute all design functions from ideation to completion. Design for more than 10 engineers and maintain a steady workflow for each member on the team. Hire and/or outsource to agencies as needed.


      Powered by SmugMug Log In