FRAME

INDIVIDUAL PROJECT / UI, UX, BRANDING, VISUAL DESIGN
Frame is a concept for a mobile retail app designed to provide pleasant user experience with simple purchasing process

INTRODUCTION

With the rise of e-commerce, successful mobile shopping experience plays a key role that drives the company’s success. Nowadays, people are very much used to buying things without seeing them or touching them physically, so what are some factors that help users to make their decision?

• Good product photography

• Clear and detailed product description

• Reviews

• Hassle free checkout

The most challenging part about the mobile shopping app is that you have to include the whole web e-commerce experience into such a small screen. With this in mind, I arrived at a core design question:

How to design a simple, user-friendly, and aesthetically pleasing mobile shopping app without overwhelming the user?

RESEARCH AND INITIAL ASSUMPTIONS
Defining the core values of the tool- The value of this app

1. Ease of use and simplicity is the key.
   There are many mobile retail apps already exist in the market but it’s rare to find one that has simple, beautiful designs and that is user-centric. A clear and simple tool will enhance the user’s experience while they shop through products with no hassle.

2. In-store experience with fluid purchasing process.
   It is extremely important to provide a seamless user experience that is as easy and accurate as in-store experience through the app. It is extremely important that the user feels confident in their choices, and to know what they are exactly going to get. And lastly, the app needs to provide a simple and hassle-free purchasing process.

IDEATION

I developed rough ideas around core values of the app and tried to tackle both initial goals: ease of use and to provide in-store experience with the fluid purchasing process. I concluded that ‘less is more’ and tried to implement that idea in two main ways:

• Utilize dropdown functionality
  Mobile apps can easily be overwhelmed if you try to fit too much information. I’ve decided to utilize the dropdown functionality in many places as possible where it made sense, and by doing this, I was able to achieve the core value and the overall aesthetic that I was aiming for.

• Maximize the size of the photography
  The most challenging part about the mobile retail app is that everything gets small including photography. The product photography is the first thing that will wake user’s interest, so I wanted to maximize the space for the photography and wanted to give more focus over copy.

PRECEDENT ANALYSIS

I looked for a few precedents as a reference before diving deep into the design process. I was able to find a good and a bad examples of the mobile retail apps as below:

• Ikea

• Nike

Ikea

Ikea’s mobile app is not offering the best mobile experience for the users because of following reasons:

• Overall interface doesn’t look fluid

• Style guide is not refined enough- interface doesn’t feel cohesive

• Not using visual elements in a effective way

Nike

Nike’s mobile app offers great user experience and it looks aesthetically pleasing because of following reasons:

• Kept all the visual elements on the page in grey scale to highlight the photography

• Main emphasis is only on the product

• Minimized text to achieve clean and modern look & feel

WIREFRAMES

I used flow chart as a guide map to create initial low-fidelity wireframes. As I was developing low-fidelity to mid-fidelity wireframes, I revised checkout screen to show images of items that are in the cart so that user is clear on which items they are purchasing.

USER TESTING & REVISION

I performed user testings on mid-fidelity wireframes before jumping too deep into design process and have implemented those comments into revised high-fidelity wireframes.

VISUAL DESIGN & CONCEPT

I started developing a visual language to create mood in the product as below:

1. Clean. Core aesthetic is clean. I focused on designing clean and minimal interfaces so that it blends with product images.

2. Warm. Overall color schemes fall under warm tones which represents warmth and home.

CONCLUSION

Through this project, I was able to achieve great exercise in self-led work by setting up deadlines for myself and make sure I was solely focused on my core values of this product. I’m happy with the product I created and I think I was able to successfully conceptualize a retail application nature.