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.
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
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.
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.
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.
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.
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.
.jpg)
.jpg)
V.2
Design Direction
Version 3 was chosen. These 3 screen would be the guidelines from which all other screens would be designed.
.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.
