iOS and Android design: Mobile online store

voyager hero image

This is a design process case study for Voyager Books – a concept for an online travel book store and app.

My aim with this case study is to demonstrate my approach to design, and in particular how to wireframe, design and prototype an app for iOS and Android. I was working to a brief provided by CareerFoundry as part of my UI design diploma.

The brief

The brief was to design a product in a category of my choosing. It required that separate prototypes be created for Android and iOS – with each prototype adhering to best practices and design guidelines for each platform.

voyager the brief image

Wireframes

I developed user flows for three key ecommerce functions:

  1. Searching for items
  2. Filtering lists of items via categories
  3. Adding items to cart

These user flows were translated to mid-fidelity wireframes. A set was designed for each platform, ensuring alignment to Google’s Material Design and Apple’s Human Interface Guidelines.

The image highlights an example of the nuances between each platform’s design specifications.

voyager wireframes image

Research

Research helped me find the optimum design flow for each platform.

I used Mobbin to research design patterns. The Shop app’s ‘add to cart’ flow is a good example of a design I emulated.

I think it’s a design with an effective user experience, because the user remains on one screen and a subtle animation communicates a completed action.

voyager research image

Designs

For the final high fidelity designs, I created a set of 13x screens for each platform: iOS and Android.

voyager iOS designs
voyager Android designs

Takeaways

  1. The more solid the wireframes, the easier it is to design the UI. Building detailed, well thought through wireframes that evolved from native app UI design kits helped the final UI design stage feel smooth.
  2. Less is more. “Unobtrusive to the point of elegance” is a lofty ambition, but I feel like my designs for this project benefited from a less-is-more approach.
  3. You don’t need to reinvent the wheel. Users respond well to common patterns. Designing user flows and interfaces that are rooted in common patterns leads to more successful products. Positive results from user testing in this project supports this idea.