top of page

BUY CENA | UX DESIGN

Project

Buy Cena (also known online as Turbado)

Role

UX Designer / Assisting UI Designer

Date

December 2018 - April 2019

Programs

Sketch, Invision, Photoshop

Description

Turbado is an international e-commerce company active in 8 countries.In it's shops it uses an innovative business model aimed to build long term relationships with consumers in the fast moving consumer goods market. Now that they have a good functioning website they wanted to add an app.

Buy-Cena-Login-Mock-Up.png
Naamloos-1.png

INTRO

This app started out as an idea to add an app to an already existing website. The website has over 1 million users a year. The goal of the app was to sell products that are not getting sold quickly straight from the website. The goal of the app is to sell these leftover products using the limited amount that they are in stock for, combined with timed release of products  to create urgency to buy.

In the following case study I will show you how this project went from an idea to a fully functioning app.

PHASE 1

(USER) RESEARCH

 

The first phase was to do research about the Turbado website and creating user profiles that represent the general users of the website and upcoming app

user profiles 2.0.png

PHASE 2

Whiteboard to digital

 

After getting a sense of who is going to use the app there was a brainstorm session where the functions of the app where discussed. After general functionality of the app was decided on we moved on to the creation of a sitemap that show the intial main screens that will be needed as well as other important screens.

IMG_7181.JPG
IMG_7180.JPG

PHASE 3

SITEMAP

Whiteboard notes where changed into a digital version, which was the starting point from which could be moved on to a flowchart.

Challenge:

The challenge here was to understand the client's needs from the start and get an inclusive overview of what was needed to make a complete app. The client here was more focussed on the main features, which left some blank spaces that could later impair usability.

Solution:

starting with writing down all the functions that the client wanted and translate this into the start of a sitemap drawn up in the meeting. This was afterwards worked out into a full digital sitemap.

Desktop Landscape.jpg

PHASE 4

FLOW CHART

With a sitemap made, this was translated into a flowchart using sketch. Here functionality, usability and flow where focussed on.

The flowchart showed which screens needed to be added further more, aswell as pop up screens and buttons that had to be added.

_5-flowchart-white-background.jpg

PHASE 5

WIREFRAMES

Flowcharts were now translated into wireframes, which had flow lines added afterward in different colors to represent different decisions being made, or goals within the app.

Challenge:

1. Adding all functionality to the wireframes, without unnecessarily overcrowding screen with information.

 

2. Keeping the payment system clear and with as little clicks as possible.

Solution:

1. Keeping the flowcharts in mind and only adding buttons where necessary and not showing any more information on a screen that did not make the situation more clear, or to show the user where he/she is at any point in time. Here the 10 heuristics of Nielsen where used as a guideline in this decision making.

 

2. A three-step system was implemented where once information was put in the first time it will be saved so later purchases can become quicker and with fewer clicks. These three steps are also shown at the top of the payment box on the screen to show the users where they are at any given time.

Schermafbeelding 2019-03-23 om 13.51.18.

PHASE 6

UI Variations

After approval of the wireframes the design phase was started.

The design phase was led by Maggie Hicks. This strated with asking the client for references in the form of apps and websites he wanted us to use as reference.

 

The main points of attention where:

- Main colors blue and white

- Simple

- 3 large buttons on the home screen

From this followed 3 versions. From these one got chosen by the client.

Version-3-(all-3).jpg
Version-2-(all-3).jpg

V.2

Design Direction

Version 3 was chosen. These 3 screen would be the guidelines from which all other screens would be designed.

Version-1-(all-3).jpg

V.3

PHASE 7

UI Design

 

After approval the design phase began. All screen designs are based on the initial design proposal.

 

Challenge:

Trying to make the app not look too blue and white.

 

Solution:

Smart use of bright opposing colors to guide the user to find the most important functions. An example of this is the golden "Buy Now" button to stand out.

App-Screen-Front-View-MockUp.jpg
bottom of page