GCGraphics
Shopping@400x-8.png

eCommerce iPhone App

My new design workflow from concept to clickable prototype

eCommerce iPhone App

I taught myself how to use Sketch because I have to admit, it is truly the best application out there for building app designs. Sketch's seamless integration with InVision allowed me to create a prototype from my High Fidelity design in one day.

In the eCommerce App, each product has a title, multiple photos, a description, a rating, multiple reviews, user uploaded photos, a price, shipping information, stock information and a buy or add to cart button. Each large photo at the top can be zoomed in for a closer look. Stock information is implied. Every item is always in stock or on its way to the shelf. The user just needs to know when she can pick it up at the store, or when it will arrive at her house. I added a feature to toggle each item to Pick Up or Delivery in the cart. On the cart screen, we can move any item from Pick Up to Delivery or vice verse.

 

Low Fidelity Design

I always start with sketches (which are too chaotic to show here). Sketches are refined in Sketch to a point at which the design team can begin discussions. Once discussions of the low-fi design is finalized, I move on to the High Fidelity Sketch design.

The boxes with borders represent images. The boxes without borders represent lines of text. You can't see it here, but in the Sketch file, each layer is labeled with what it is. I was pretty confident on the icons I included, so I just plopped them in there. Everything I design is always up for change at any moment, but it's easy enough to swap an icon.

LowFi.png
 

High Fidelity Designs

The Hi-Fi designs include lore ipsum text, headings, fonts, colors, and placeholder artwork. The artwork can be continually updated and refined by the design team. The Hi-Fi design is the final design for developer reference. Assets can be generated directly from these designs for the developers to use in production.

Here is where I added the toggle feature for adding and subtracting items from the Pick Up and Delivery sections in the cart. I also added an infographic for the dimensions of the product. Whenever I shop online, it is always frustrating to me when the product description does not include the dimensions. I want to know how big the thing is before I get it home.