Covet

Covet

Senior UI Designer. London 2016

covet-hero@2x

Overview

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.

First devised in early 2016 by the Ideas made team, Covet is a very simple concept, where people can quickly record all the things they want to buy, effortlessly photographing a product, and sharing it with your friends, family or even the world. Covet is made for discovery and to inspire of all the things you never imagined wanting. 

Design process

As my first project with Ideasmade, I wanted to ensure there was a process in place to ensure we built a successful product as effortless as possible. I implemented a user-centered design approach, ensuring that at every stage of the project the user was at the core of all the decisions and solutions.

I began the project with a list of ideas and features required for covet from the project stakeholders and my first challenge was to collate research. I sent out a simple questionnaire to several current user’s of the NINE app who frequently tagged their photographs as ‘Buy’. The survey comprised a simple set of questions, so I could get an idea of their needs and behaviour.

covet-designprocess@2x

Requirements

Requirements

Working together with the Ideasmade team, we all collectively came up with a set of Business and user requirements. Ultimately, we wanted to Covet to be self sustainable, and to generate enough money via Affiliation and voucher commissions to pay for itself. 

Also, after speaking with several user’s from Nine, I could define a set of user requirements, and what features and functions were necessary in to have in Covet. This also helped me to structure some solutions in the initial sketching and ideation phase of the project.

covet-requirements@2x

Persona's

Based on my initial user interviews, I gathered enough information to get a solid understanding of our user’s and what they wanted from Covet. I then created a set of personas which reflected the demographic we were targeting so I could test these with my solutions.

Competitor analysis

Continuing with my research, I then began my competitor analysis looking for products which offered similar functionality within shopping and productivity apps. I searched for competitors based on several key search terms - ecommerce, mobile, inspirational & shopping.

I created a Competitor analysis Matrix with the following competitors closely matching Covet’s business model. There was also the addition of the native camera roll features in iOS and Android.

covet-competitoranalysis@2x

Customer Journey

To get a better understanding of how people would use Covet, I created a Customer journey map, based on our personas Jasmine, Samuel and Laura.

To comprehend the entire journey from start to finish and how we could create an experience which would cater for this physical journey. From the beginning of the project, it has been my goal to ensure Covet is as simple to use as possible and doesn’t cause any friction at any part of the experience.

covet-customerjourney@2x

User flows

Taking my initial ideas and sketches, I then built out a site map for Covet, so myself and stakeholders could have a visual representation of the app where screens lead to, what functionality should be where and any problems which might occur. 

After several iterations and meetings with stakeholders and developers, I completed a site map which everyone was happy with. I then took this and pushed it further so we were certain of any mistakes or any issues which may arise. I build user flow charts of Covet which were slightly more detail than the site map, this gave everyone a better idea what each screen did and also gave development time to check feasibility. 

covet-userflow@2x

Design system

Once we had conducted enough research and developed adequate ideas to work with, I then attended to the design system for Covet. 

Covet was all about the users and the content, and so the brand and UI for the app needed to be functional, practical but ultimately unobtrusive. I opted for a clean and minimal interface, mostly white with a primary red colour for call to actions and anything of importance. 

I also used the Avenir typeface across the app, mainly because of its high legibility but also because the typeface is preloaded on the iOS system natively, therefore minimising load speeds. Iconography had equal importance, designed on a 24px grid and enforcing a minimal design aesthetic but still maintaining recognition of its use. 

covet-branding@2x

Component library

Once I had completed the foundations to the design language for Covet, I could take this and begin building out the UI component library for the app. Working with development and adhering to the Apple HIG I built a flexible, responsive component library for Covet which allowed user’s building screens quickly and efficiently. Also, with the ability to customise these components if they were used for tablet or other OS platforms.

covet-components@2x

Interactions

It was also imperative that Covet's interactions and transitions were also carefully define. The app comprised many flows which transitioned and revealed new or important information. I first created low fidelity prototype to show the motion I wanted to include in Covet and worked closely with iOS development to translate my ideas to the actual code.

Final Design

Final Design

Covet is a minimal, clean and captivating app. Its sole purpose is to inspire its user's via the content that is captured and shared. The UI is intentionally veiled to create a beautiful, simple and intuitive experience much like an art gallery which to inspires.

covet-final@2x

PREV

Anthony Eamens 2020©

Anthony Eamens 2020©