LOYAL3 iPhone App
Design Lead
LOYAL3's mission was to democratize the financial markets 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. For this project we needed to deliver a native iOS app experience similar to the website.
Defining the Product
Together with product management and engineering, we created a prioritized list of both the business and user goals for the product. We then narrowed it down to the minimum viable product (black) and items for future releases (gray). Our user research, market research, website usage data, and customer service interviews assisted in the creation and prioritization of this list.
Sketching & Wireframes
I started with creating a sticky note for each chart and began to group them into logical groupings that would form the navigation. I moved to drawing each chart out on paper, lots of paper, to make sure I understood exactly the best way to display it. Once confident I was headed in the right direction, I began making the designs digital. After many reviews and iterations, we finalized the information architecture, interaction design, chart display, and visual design.
Usability Testing & Prototypes
At points in the design process where it was necessary to get feedback, I created clickthru prototypes using wireframes or visual designs to 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.
For this project, we ran usability studies in various ways: in-person / in-office studies, guerrilla testing in Starbucks, as well as remote testing on usertesting.com.
Visual Designs
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 were represented. As the design progressed, I created additional prototypes and ran 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 complete.
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.
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
