Online Store App

‍I did a online search to get an overview of existing online store apps. After looking around, I defined the 5 Ws to define my Online Store app goals. 

Who?
‍The tool is for people who want to shop for sustainable design products without going into a physical store. My online store is particularly valuable for people who struggle to find the items they want in traditional stores. Most of the users will be proficient with technology but will greatly benefit from basic navigation and clean design.

‍What?
‍A responsive website, web app, and/or mobile app that shows users the inventory that can be filtered in particular ways depending on their needs. The tool allows users to purchase their desired goods and have them delivered to any address. 

‍When?
‍This product will be used most often on commutes to and from work, in the evenings, during lunch breaks, and on weekends.

‍Where?
‍Users can easily shop from anywhere they can connect to the internet, whether on a mobile device or on a desktop.

‍Why?
‍Users don’t have the time or ability to visit physical stores and would rather buy their goods on the go or from home. It’s also more convenient to try out the items and easily return those that aren’t desired or appropriate without having to return to a physical store.

After the research process, I created 3 user stories to clarify important requirements for the online store app. Based on the different user stories, I created a coherent user flow diagram.

‍1.
‍As a new customer, I want to access the inventory without having to register, so that I can make sure this store has what I’m looking for before having to create an account.

‍2.
‍As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time.

‍3.
‍As a frequent customer, I want to see recommendations of products I may like, so that I find items I might not otherwise on my own.

With the help of the user stories, I developed individual user flows which I then combined into a single user flow diagram. It contains all the paths the user needs to get to his desired destination.

‍After defining the user flow diagram, I sketched some wireframes with pen and paper. By creating a prototype I was able to become more aware of how the user interacts with the screens and moves through the app. It also helps me identify missing screens that I need to design so that the flow is complete.

Based on my low-fidelity wireframes, I used Sketch to design the mid-fidelity wireframes. During the design process I added a login/sign up page and additional pages of the account where users can get a detailed overview of their orders.

In this step I decided to test my high-fidelity wireframes on potential users before finalizing the design. I created a scenario-based prototype in InVision and recorded the feedback of my participants. I also consolidated and analyzed the results, identified the pain points of the users and prioritized them. Based on my results and suggestions I implemented changes to my design.

Scenario:  Browse the shop and buy a Tusc - Candleholder.

Focus of this task was to build a cohesive brand. I started with designing brand guidelines for the Online Store app to define what the brand is and how it should be communicated to the users, both visually and in words. With that I finalized the designs and components of my brand that includes guiding principles, the logo, color, typography, image and writing style.

To get a better visual understanding of the app, I also created a tablet & a desktop version and put everything into suitable mockups.