Dina B LIght mode_edited.jpg
zra.jpg
About the Project

This project was part a UI Design course at CareerFoundry.

My Role:  

UI & UX Designer

Project Duration:

2 months

Goal:

The goal was to redesign part of a responsive web product for an existing organisation of my choice. Zara is one of my favourite fashion brands and although I am not affiliated with them in any way, I had some ideas for how their app could be improved.  Based on my experience and interviews with other shoppers, this motivated me to give the Zara app an entire redesign; making it more user friendly and understanding whilst maintaining it’s modern, minimalistic and stylish theme

GROUPED PHONE SCREEN.jpg

Analysis

Current Website Analysis
I needed to gain an understanding on Zara's current layout and functionalities of it's web app; so I carried out an in-depth analysis on their site and noted any issues I thought I could solve:
  • Confusing functionality - arrow buttons on the top, left, right and button of the screen, no direction to what happens when you press them. 
  • Results page - 2 of the same item comes up for some products but under one link whilst others only have one image - lack of consistency. 
  • Menu left hand side of screen, very long list to read through

Planning

User Stories
With Zara's current web-app in mind, I began to structure out the necessary screens needed for Zara's customers in a User Flow using the following User Stories:  
As a Zara customer, I...
  •  Want to be able to browse various products the company sells that are organised by different categories.

  • Want to view the product that I have select and see the details (sizes and colours available, material, etc.).

  • Want to view the product reviews from other customers.

  • Want to add selected products to my basket and view them.

  •  Want to be able to login to my account to see my profile with all my favourites.

Zara userflow.jpg

Sketching

Low & Mid Fidelity Wireframes
Now that I had established the information architecture of the app, I was ready to sketch the low-fidelity wireframes by hand and turn them into black and white mid-fidelity wireframes using Sketch using the mobile-first approach:

Create

To create the high-fidelity wireframes, I needed to made a decision on: the visual design principles/trends, colours, imagery, typography, shapes & icons.

I first created a mood board which is a collection of Zara inspiration and design pieces that established their current mood;  I wanted to remain consistent with the black, white & grey colours as this was reflected on their site and gives a stylish, modern theme. This helped me make the following design decisions on the web app:​

Moodboard
Zara Moodboard #1.jpg
Logo
1000px-Zara_Logo.svg.png

H: 150px        W: 221px

1000px-Zara_Logo.svg.png

H: 47px        W: 31px

Typography

Header 1

Helvetica Bold, 60px

Body 1

Helvetica Bold, 18px

Header 2

Helvetica Bold, 36px

Buttons

Helvetica Bold, 22px

Subtitle 1

Helvetica Bold, 27px

Caption

Helvetica Bold, 16px

Subtitle 2

Helvetica Bold, 22px
Colours

Primary

HEX:#000000

R:0 G:0 B:0 

HEX:#757575

R:117 G:117 B:117 

Text

HEX:#FFFFFF

R:255 G:255 B:255

HEX:#000000

R:0 G:0 B:0 

HEX:#E1E1E1

R:225 G:225 B:225

Iconography
ZARA STYLE GUIDE.jpg

My Account

ZARA STYLE GUIDE.jpg

Password

ZARA STYLE GUIDE.jpg

Home

ZARA STYLE GUIDE.jpg

Search

ZARA STYLE GUIDE.jpg

My Cart

ZARA STYLE GUIDE.jpg

Favourite

ZARA STYLE GUIDE.jpg

Remove

ZARA STYLE GUIDE.jpg

Close

ZARA STYLE GUIDE.jpg

Settings

ZARA STYLE GUIDE.jpg

Rating

ZARA STYLE GUIDE.jpg

Back

ZARA STYLE GUIDE.jpg

Filter

UI Elements
PRIMAYR BUTTON.jpg

PRIMARY BUTTON

FILL: #000000, TEXT: #FFFFFF

SEC BUT.jpg

SECONDARY BUTTON

FILL: No fill, BORDER: #FFFFFF, TEXT: #FFFFFF, 

ACTIVE BUTTON

HEX:#000000

INACTIVE BUTTON

HEX:#909090

1000px-Zara_Logo.svg.png

APP ICON

Project Learnings
TAB.jpg
Categories tab bar.jpg

MY ACCOUNT TAB BAR

CATEGORIES TAB BAR

Group.jpg

PRODUCT DETAILS TAB BAR

COLOUR TAB BAR.jpg
Search bar.jpg

SEARCH BAR

Group 6.jpg

CATEGORIES MENU

Bitmap.jpg

ACCOUNT PROFILE PICTURE

SIZE TAB BAR.jpg

PRODUCT OPTIONS BAR

Group 2.jpg

PRODUCT CARD

Group 3.jpg

QUANTITY STEPPER

Group 7.jpg

PRICE SLIDER

Product Details.jpg

PRODUCT DETAILS CARD

Page Indicator.jpg

PROGRESS DOTS

Final Product

Putting everything together, I created the following high fidelity wireframes and implemented them in tablet and desktop version also. 

ONBOARDING

A magazine-inspired on-boarding process

smartmockups_kjlhow2d.jpg
smartmockups_kjlhpfiy.jpg

HOME SCREEN

To view the latests collections, sales & more, 

MY ACCOUNT

 View your favourites 

smartmockups_kjlhpwcm.jpg
smartmockups_kjlhqofz.jpg

MY CART

One click purchase

SEARCH

Grouped menu categories - when clicked on, sub-categories are shown.

smartmockups_kjlhsrvc.jpg
smartmockups_kjlhuiwy.jpg

PRODUCT VIEW

Results are displayed & can be filtered by pressing the filter icon in the top corner.

SINGLE

PRODUCT

VIEW

View product details and reviews/ratings in one click.

smartmockups_kjli8s1w.jpg
devices products res.jpg

View the prototype here for full experience