Zara (Redesigned)
Refinement of an existing shopping app to ease the shopper's experience.
Overview
For the Creative X club at Rutgers University, my team was tasked to redesign the Zara app. For 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 Malaviya, Anannya 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
Research
My team conducted a user interview using quantitative methods to survey people's opinions on the Zara application.
Some of the Survey Responses
User Findings
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.
Original
Menu
No Hamburger menu, instead the words are cluttered around the screen making it seem messy.
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.
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.
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
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
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
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
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