The goal for this project was to deliver a native iOS app experience that provided most of the functionality of the LOYAL3 website.
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.
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.
After all the iterations, testing, and reviews with the product and engineering teams, the final designs were completed.
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
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.