Refining the mobile shopping user experience
Zara's mobile application presents a simplified interface for exploring Zara's fashion selections for women, men, and kids. The application provides a platform for users to browse and buy items, verify stock at nearby stores, and bookmark products for future consideration.
As the lead UX designer, my responsibility involved a clear objective of enhancing the user experience and interactive design by incorporating new shopping features and reorganizing the app's data structure for frictionless functionality while staying true to the brand's aesthetic appeal.
Zara’s mobile app approaches design with a modern and minimalistic interface that aligns with its editorial brand identity but faces challenges in it's user experience and interaction design. The emphasis on visual design overlooks key aspects such as user navigation, accessibility, and the technical design required for seamless app functionality. The absence of these crucial elements results in an inconsistent and frustrating shopping experience, as consistently echoed in the user feedback and app store reviews.
Adhering to Zara’s application's minimalist design, I retained the primary structure of the homepage while arranging the existing components to make the homepage more compact. This involved discarding the labels that overlapped the arrows on the original app’s homepage due to their unresponsiveness. The oversized 'ZARA' logo was also downsized, as it disrupted the design balance and had no interactive functionality. Meanwhile, the subscription button was relocated above the fold to be viewed without scrolling, transforming the homepage into a single landing page and eliminating unnecessary scroll-downs. The sequences in the bottom navigation were adjusted for the user's intuitive journey. Lastly, I introduced a new navigation bar on the top left, lacking in the original app, to facilitate a quick reach to supplemental details missing in the bottom navigation.
Product Page
Drop-down component
Integrated an 'additional product information' component with a pull-down function for individual selection of parts (i.e. “specifications”, “feedback”, “delivery & refunds”) to enhance the arrangement of data in a single accessible spot.
Icon placement/ accessibility
Relocated the shopping bag and favorites (heart) symbol to the upper section of the product image to emphasize immediate actions like “add to bag” and crucial product details in the description area.
Product photo gallery
The image collection of the product showcased a scroll design which required a user to scroll downwards to view more product images that would then materialize above the fold. This resulted in a clunky user interface - if a user inadvertently scrolled horizontally, they would be directed to a different product. Therefore, I elected to discard that scroll design in favor of adopting a more conventional image gallery layout that comes with visual cues for multiple images.
Sizing Details
Previously, it wasn't straightforward for users to find sizing information, as they could only see if sizes were available upon clicking 'add to bag'. My approach was to enhance visibility by incorporating a size guide link for immediate access and implementing a function that signals the product sizes to the user. The sizes were made apparent and selectable.
Quantity
Incorporated a product quantity option, facilitating users to specify the number they wish to add to their shopping bag. This capability was missing earlier, and its presence now empowers a user to make choices more efficiently.
Reviews
Incorporated user reviews into the product section of the Zara app that presently lacks them. This improvement empowers customers by offering them additional information for product decision-making processes, enhancing their overall shopping journey.
The product display page kept its initial grid arrangement, however, I incorporated a search feature that also included a sort and filter option. This component gives the user quick access to tailor their results and is easy to access. The “NEW” text was changed to a contrast color to distinguish from the product title and to enhance the call to action.
The revamp of Zara's app highlighted a crucial insight-the best UI centers its design around the user.
Taking the user-centric approach to my design, I was able to deconstruct the existing app information and assemble structured components to ensure a unified design throughout the user journey, making crucial information readily accessible. The design was modeled so that when one element is clicked, it does not disturb or overlap other existing elements on the page ensuring seamless functionality. I began breaking down all the information that already exists on the app and built components to organize critical information. This assures that the new design will be cohesive amongst the entire user journey and allow users to access what they need easily. The design was modeled so that when one element is clicked, it does not disturb or overlap other existing elements on the page. Critical information was also displayed and not “hidden” in other elements such as a button that isn’t clearly labeled for that purpose. This takes the guessing game out of trying to find what a user is looking for. Not clearly displaying information fails to take any accessibility into account for users with a disability such as visual impairment.
In conclusion, the app's overhaul preserved Zara's branding while embracing a more user centered approach that addressed prevalent user challenges, presenting key insights in a compact and easily navigable manner without overwhelming the design. Brands should remember that a mobile shopping app is essentially a pocket sized store and the user experience is as crucial as the visual design in driving customer acquisition and conversions.