top of page
Group 141.png

Zara (Redesigned)

Refinement of an existing shopping app to ease the shopper's experience. 

  • Facebook
  • LinkedIn
  • Instagram

Overview

For the Creative X club at Rutgers University, my team was tasked to redesign the Zara appFor the semester long project, we refined the user experience of the app by creating a better UI to ease the shopping experience.

 

Disclaimer: This project is not affiliated with Zara.com in anyway. This is a project done for Creative X club at Rutgers University.   

My Role

I was responsible for the wireframing, UI design, and Prototyping

Timeline

Fall semester, 2022

Tools

Figma, Miro, Zara application

The Team

Sakshi MalaviyaAnannya Bhagat, & Sophia Cruz

Proposal

For this semester-long project, the Creative X Club in Rutgers University proposed to redesign any interface to make the overall user experience better. My team members and I decided to redesign the Zara application as all three of us were very frustrated with our shopping experience from the app. 

How Zara Looked Previously

Screenshot_20230221-190902.png
Screenshot_20230221-184554.png
Screenshot_20230221-215417.png

1

Research

2

Wireframes

3

UI Design

Research

My team conducted a user interview using quantitative methods to survey people's opinions on the Zara application. 

Screen Shot 2023-02-21 at 9.02.39 PM.png

Some of the Survey Responses

reviews of ZARA.png

User Findings

Screenshot_20230221-190902.png

Original
Home Screen

The app's UX is not intuitive for shoppers. The home screen can be swiped in multiple directions which makes it confusing. The icons such as search bar, menu, etc. appears on the bottom of the screen, unlike any other popular app.

Screenshot_20230221-184554.png

Original
Menu

No Hamburger menu, instead the words are cluttered around the screen making it seem messy. 

Screenshot_20230221-184807.png

Original
Shopping Screen

The lack of clear instructions for different shopping sections complicates the user experience. Further, the different sizes of the displayed images makes it confusing to navigate. 

products page.png

Original
Product Screen

No clear feedback about the product listed. The different sizes aren't properly visible and the varying pictures are hard to examine

Design Process

Ideation

Before working on the wireframes, my team and I brainstormed ideas to make the app more user friendly while continuously referring back to our research. 

 

For the design process we decided to focus on simplifying the features of the app. We primarily focused on the home screen, the product page, and the check-out page in order to ease the shopping experience of the app. 

Wireframing

My team focused on redesigning the icons. I was solely responsible for redesigning the hamburger menu as well it's slide-in & out, and pop-up page. I also designed the main product's page that had all the sections listed out in a clear-cut, easy to understand fashion. 

wireframe ZARA.png

UI Design

I was primarily responsible for designing the UI of the redesigned Zara application. I was solely responsible for designing the color scheme. To keep it consistent with Zara's colors, I used a mixture of black, gray, and beige color palate. I was also solely responsible for designing the onboarding page as well as the transitions associated with it. Furthermore, for branding, I kept the logo visible on all pages of the app. 


Redesigned
Home Screen

Instead of having just a singular picture of a model displayed on the home page, our team redesigned it to display the different clothing sections

Previous home page

arrow-removebg-preview_edited.png
Homepage.png

Redesigned home page


Redesigned
Menu

To address the cluttered look of the original menu with too many options, I redesigned the page by placing all options under a drop-down button and incorporated it into a slide-in screen instead of a separate page.

Previous Menu Screen

Screenshot_20230221-184554.png
arrow-removebg-preview_edited.png
ZARA Menu.png

Redesigned Menu


Redesigned
Navigation Page

The previous layout had images of the products displayed in multiple sizes, making it confusing and hard to navigate. I redesigned the products page to make the products clearly visible and easily accessible. 

Previous Products Page

Screenshot_20230221-184807.png
arrow-removebg-preview_edited.png
sweaters.png

Redesigned Products Page


Redesigned
The Products Page

The original app has limited product visibility. It is difficult to locate options such as the prices, the colors, and the size. The redesigned page has a carousel-like feature, which allows users to easily view the entire product. Furthermore, the price, the colors, and the size are all displayed in a very apparent and visible fashion. 

Previous Menu Screen

products page.png
arrow-removebg-preview_edited.png
Buying.png

Redesigned Menu

Prototyping

I was primarily responsible for prototyping the redesigned Zara application, I focused mainly on the motion design. Unlike the original application, which made the user swipe in multiple different directions, I ensured that the user was only able to swipe up & down to avoid confusion. While the rest of the app was kept in line with the original Zara app where I maintained similar pop-up screens and transitions from one screen to the next. 

Contact

I'm always looking for new and exciting opportunities. Let's connect.

732-762-4669

bottom of page