ShopMore

Shopping made simple. An experience that combines online and instore shopping.

The Problem

This app aims to lessen the burden of shopping by making it more convenient, quicker, and more cost effective. The user will be able to search for an item and find out whats in stock in stores nearby or online. They will also be able to filter their search results according to best match, price, availability, and location. This eliminates the inconvenience of going to multiple stores and spending hours searching online for the best price.

Style Guide

I began my design process by creating a style guide to decide on colors, fonts, logo and button styles. This is an important step because it ensures that my design will have a consistent look.

The majority of shopping apps are targeted towards women. Therefore, I choose to keep my design simple by using mostly neutral colors. I choose the two blue-green colors because I think they will appeal to the majority of users.

Wireframes

I used Sketch to start visualizing my idea for the app, focusing on the functional component. I wanted to keep the interface layout simple to create a seamless and enjoyable shopping experience. Most importantly, I wanted to make it easy for the user to navigate between the nearby and online search results. The main features include: search for an item, view nearby and online results, filter based on preferences, and view multiple images of an item.

Design

I started the design process by building off of my initial wireframes as I altered and added screens along the way. A few features I added were a screen for new users to create an account, an account page to show saved items, and the ability to get directions to a store. I focused on keeping the design simple by adhering to my style guide in order to emphasize the main purpose of this app: Improving the shopping experience.

Prototype

After completing the hi-fidelity comps in Sketch, I exported my designs to InVision in order to incorporate animation and screen transitions into my static screens. Feel free to click through the prototype to get a feel for this app and view the final design.

I think that creating a mobile prototype is an important step in this process because it allows you to experience the app's flow and identify functional or design issues. While I was creating the prototype for ShopMore, I noticed a couple issues relating to navigation and usability. I was able to go back into Sketch and alter a few screens to ensure an ideal user experience.