LOYAL3's mission is to democratize the financial markets. We accomplish this by allowing people to participate in IPOs as well as invest in stocks with as little as $10 and pay no fees. We're taking an intimidating experience and making it simple, easy, and approachable.

The goal for this project was to deliver a native iOS app experience that provided most of the functionality of the LOYAL3 website.
MY ROLE
Design Lead
RESPONSIBILITIES
Product definition
Interaction design
Visual design
Prototyping
Usability testing
Style guide

DESIGN PROCESS

DEFINING THE PRODUCT

I collaborated with the product management and engineering leads to determine both the business and user goals for the product. We created a prioritized list and then narrowed it down to the minimum viable product. We used user research, market research, usage data from the website, and interviews with customer service representatives to assist in the creation and prioritization of this list.

SKETCHING & WIREFRAMES

Once the product requirements were set, I began designing. I started by sketching on paper to get my thoughts and ideas down quickly. After I had a basic flow and sketches that I was happy with, I moved to creating wireframes. Below is a higher fidelity wireframe, than I normally start with, but is shown to give you an idea of the rougher version of the app.

USABILITY TESTING & PROTOTYPING

At points in the design process where it was necessary to get feedback, I will create clickthru prototypes using wireframes or visual designs and run usability studies. I view prototypes as a necessary step in the process for (1) myself to get a feel for how the flow ties together and (2) for users in usability studies. I have run usability studies in various ways: in-person / in-office studies, guerrilla testing in Starbucks, as well as remote testing on usertesting.com.

VISUAL DESIGN

Once the user flow has been completed, I moved from wireframes to visual design. The visual style stayed in line with the iOS guidelines, but also ensured that the LOYAL3 style and brand was represented. As the design progressed, I would create additional prototypes and run usability studies to get feedback on the designs.

FINAL DESIGNS

After all the iterations, testing, and reviews with the product and engineering teams, the final designs were completed.

  • iphone screen1
  • iphone screen2
  • iphone screen3
  • iphone screen4
  • iphone screen5
  • iphone screen6
  • iphone screen7
  • iphone screen8
  • iphone screen9

LOYAL3 iOS Style Guide

The best way for us to ensure consistency in design and implementation was to get the entire team on the same page with the types of iOS widgets we used as well as how they looked. I created the style guide to define all the various widgets the app would need and documented them.

EXAMPLES OF WIDGETS IN THE STYLE GUIDE

  • iPhone styleguide example1
  • iPhone styleguide example2
  • iPhone styleguide example3

Documenting the Design

An effective way for me to communicate the designs to the engineering team was to create a design document. In that document, each screen, state, and specific size/color/style was shown to ensure the engineering team had a design to match their implementation. Below you'll see a few examples of what is contained in the design document.

Account Overview Showing Stocks and IPOs

The Purchase Flow

Various States of the Nav Bar