Covet

iOS Shopping App

Context

After the recent success of visual to-do list app NINE, a trend in user behaviour was discovered and the way certain features were been used, in particular visual shopping lists. Because of this, it was decided there was potential for a fully featured app focusing on visual social shopping and so Covet was born.

Covet is a simple concept where a user can go out, photograph products they wish to purchase or already own and share them with the world to motivate and inspire. They can create and collaborate on lists, share them with friends and family, discover unique, interesting and unusual things that would never of even been envisioned.

Timeline
Oct 2016 - Sep 2016
Role
UI Designer
Project Type
iOS App

The Solution

I was fortunate enough to have a vast amount of valuable user research from NINE and majority of it applied to Covet and what we wanted to build. Looking further into the research, I began to draft out possible features, visual concepts and flows. The process moved fast, and as soon as ideas were fully drafted, it was then I moved onto producing a series of low fidelity wireframes and user flows ready to prototype internally.

User testing confirmed my flows, features and functionality worked correctly as imagined and this enabled me to move onto a design system for Covet, which had no visual design. So I was starting via a blank canvas.

Design System

The first stage of my design process is to create and build a flexible grid system which will be the foundation of my component library. Once the grid system was tested and finalised, I then experimented with typography, colour palettes and iconography styles which all formalise the final components.

It was agreed that Covet should be a clean, minimal and elegant app, with emphasis on ease of use and speed in capturing products. The user was our priority, but also the content would be centre stage and seize the users attention.

I selected the Avenir typeface, as it has the clean, sharp and legible qualities that Covet desired. I also opted for a neutral palette, and thought that if content is king within the app, then colour should not be an obstacle and so I selected a crimson red for subtle interaction throughout.

Grid System

10 columns | 32px width | 5px Gutter, Margin | 8px Baseline

375

375

10 Columns

8 Pixel Baseline

Typography

Avenir Typeface

Image
Image
Image
Image

Avenir Regular

Avenir Bold

Colour

Primary colour palette

#FD3C54

#1D2027

#EEEEEE

#FFFFFF

Iconography

24px width 2px outline iconset

Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image

UI Components

Atomic design components

Image

Interaction Design

The use of motion was carefully considered when designing Covet. The visual language was based on clean, minimal aesthetics and I wanted the motion to convey these principles also. I wanted smooth transitions from screens and elements to allow enough feedback to the users.

Motion brought Covet to life, and enhanced the user experience and general usability of the app. I carefully chose easing and weighting values which were subtle but still gave enough value to the motion on elements.

Image

Feed

This is the heart of Covet, where users can browse and discover products that their friends and followers are uploading, but also find products from around the world filtered by category.

Product Details

The Product details pages are where all the valuable content of each Covet goes, from imagery, prices, store information and even product barcodes to make it easier for users to find.

Image
Image

Lists

Creating lists is designed to be effortless. Simply naming it and adding a couple of covets and your done. Making it private is also possible incase your browsing for a special soneone.

Final Screens

The final app is a homage to Minimalism, fresh, original design. The content within Covet is the vital aspect, and so I chose to keep the UI minimal to avoid distraction or unnecessary force. I wanted Covet to be easy on the eyes, and I carefully considered and crafted every element to be as simple as possible.

The contrast between the clean white UI and subtle red actionable states works incredibly well, and motivates and influences a user in their direction throughout the app.

I wanted the app to not only be simple visually but also in the way people interact with the platform, and so every aspect and feature was precisely designed. With this intent from the way a user captures a product, to the way a user shares this product to the world, it was vital that users were able to inspire and promote content as quickly as possible within a shopping environment.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image