01| SUMMARY

Zara Case Study

Academic Project

Timeframe

2 weeks

Tools

Figma, Photoshop, Sketching

Team

Independant Project

Problem Overview

The following academic project aims to reshape and refine a new experience for the Zara mobile application. Whilst only being a design based project, users had become increasingly frustrated by the long loading times and the unclear narrative demonstrated of the overall application and more specifically the homepage. In this academic project I had to focus on one section of the application rather than many.

The Solution

I constructed a new homepage to interpret a better form of navigation for general shopping. The intention of the design is to create a better environment for therapeutic utility, which is simplified as the users need to shop as an emotionally driven response. Therapeutic utility is always in place when we shop digitally or physically as there is an emotionally driven response to do so.

02| RESEARCH

Why Zara?

I have always had a large liking towards technology, digital and physical. This being said I wanted to expand my knowledge of industries and just generally set a new challenge for myself for such a small timeframe. After looking at numerous brands I quickly noticed how Zara had such a poor level of feedback and ratings towards its mobile application opposed to the website which is fluid and objectively seamless to navigate. Nevertheless, I wanted to create a UX case study on Zara's mobile application to redesign the homepage and start my first UX design project.

| Online Reviews: App Store & Google Play

The project was solely based on design, the academic briefing still needed to represent that the case study would be viable on the basis of there being a visible issue in place. Therefore, I utilised the Apple app store and Android Google play to define the response users had towards the overall application.

| Comparative Analysis: Asos & Farfetch Homepage

After understanding the frustrations of users in response to the utility of the Zara application, I looked to understand what separated them from two well renowned and loved applications for online mobile attire shopping.

| Comparative Analysis: Asos & Farfetch Product Navigation

Although I focused on the homepage of Zara I also constructed a side piece for better navigation within the application. I felt that the user responses also heavily disliked the way of interacting when finding or looking at a piece of clothing.

Design Targets

After conducting some light comparative analysis I created the design goals. The illustration below defines what needs to be done to accomplish a successful reshaping for the homepage and product navigation for Zara.

03| DESIGN

Homepage

The first part of the design process was to start reshaping and creating a new design for the homepage. This process took three iterations. Although the project was purely design related, I utilised two users to have some feedback instead of just personal decisions on how I wanted it to be developed. This gave room for both criticisms and general iterative progression.

| User Flow Mapping: Homepage

To assist my design process I wanted to create a brief user flow diagram that showed what features could be accessed through the users interaction. This became of prevalent and constant usage since simplicity was key in the redesign.

| Initial Sketch: Homepage

The three iterations of the homepage were developed off a simple sketch. The sketch showcased simple forms further explained within the illustration below.

I wanted the landing page to be able to showcase their new arrivals in a new format. Rather than display large scaled images without any literacy to explain, I constructed a system called weekly spotlight which would dictate products of both new arrivals and sales.

| User Feedback: Homepage Initial Sketch

Most of the user feedback were simple critiques and what the user wanted to see. Since I was asking for feedback during working hours I had to keep it brief but with as much detail as possible.

| Low-fidelity Design: Homepage

After getting some feedback I established another low-fidelity design that details a blueprint for the high-fidelity prototype. This would be second variable but first iteration for the next two developments to come.

The design follows suit of the users feedback. I developed the weekly spotlight function further and implemented alongside it seasonal arrivals on vertical scroll. I constructed two tabs on the homepage for man and woman to make accessibility more convenient towards what category the user wanted to quickly see.

| Low-fidelity Design: Product Page

For the product page I looked at sneakers, more specifically a way of implementing this within the homepage as a partition to the weekly spotlights function.

I focused on sneakers out of personal choice, it could have been anything but sneakers tend to dominate the fast fashion industry by quite a margin. Therefore, I incorporated my design choices through the sneakers.

| High-fidelity Prototype: Homepage

As I ventured forward, I developed the low-fidelity blueprint into a functioning prototype. The prototype closely delegates the vision me and the users had to progress the design further within the next two iterative design phases.

The design features the first iteration of weekly spotlights and the seasonal arrivals as the initial content seen within the homepage.

| High-fidelity Prototype: Shoes

As shown within the weekly spotlights, I was able to incoporate the sneaker factor through shoes. When exploring more the user is met by the following page.

I kept the background white throughout the designs which felt nice to compliment the products. The product page has the ability to be viewed either one shoe at a time or within a double grouping.

| User Feedback: Homepage & Product Page(shoes)

The secondary stage of user feedback focused on both the product page and homepage. The product page had a clear liking to it. Therefore, I postponed a high focus to it until the end as the homepage required more attentive looking at.

| Low-fidelity Design: Homepage Second Iteration

Within the second iteration I was able to create a new system. The system takes the form of clickable buttons that allow the user to view new arrivals in a more formidable way without taking up much room within the viewport of the mobile application. This is alongside the developed weekly spotlights, which is now not plural. The weekly spotlight showcases one specific category that is trending and thus requires less room to take within the hierarchy of the application.

I also incoporated sale and recommended items with the room given from removal of the previously large weekly spotlight.

| High-fidelity Prototype: Homepage Second Iteration

After establishing the low-fidelity blueprint I constructed the second prototype with the changes made. The vertical scroll begins from left to right.

The producct page (shoes/sneakers) was postponed til later since the homepage required more decisive attention than the already liked sneaker page.

| User Feedback: Homepage Second Iteration

The user feedback critiques the changes towards the weekly spotlight system, the homepage is liked otherwise but needs refinement for the weekly spotlight space taken.

| High-fidelity Prototype: Homepage Third Iteration

At this stage I did not need to construct more sketches but conceptualised the designs around previous iteration. The weeky spotlight system was changed to a focused trending category which meant for more space taken but also a reduction of space from the previous weekly spotlight design.

| High-fidelity Prototype: Sneaker Product Page

After creating the third iteration for the homepage I had finally gotten around to designing, what would be, the final iteration as well to the product page.

| User Feedback: Conclusion Feedback

This was the final set of feedback, the project ended at this stage as the timeframe came to a close finish. The project was overall a great insight to creating a case study on a specific element within a digital tool.

04| CONCLUSION

Overall the project was a great insight into the fast fashion industry, more specifically how users interact with digital tools to grasp a sense of therapeutic utility by simply shopping. The project really started to develop my love towards experience and iteraction design a sit gave me the fundamental basis to start learning figma and photoshop in-depth. Lastly, this project was the first time I had interacted with people to grasp feedback which is later developed within Paw Capita, my final major project. In two weeks this was an accomplishment for my first real utility of Figma.

Interested? Let's Connect

rajvirdee.singh@gmail.com
Designed and Constructed by Rajeev©2023