Disney
Mobile e-commerce app
Overview
Role
Research, UX/UI, Art Direction.
Technology
Figma, Jira.
Deliverables
UX/UI, Accessibility requirements.
Project Type
Mobile E-Commerce.
This case study is the sole property of its creator.
Problem
Shop Disney is more than just an e-commerce platform; it’s a digital extension of a brand that has enchanted generations. However, their app’s user experience was not living up to its magical reputation, particularly in the product review section. This case study delves into how I designed an intuitive, engaging, and accessible in-app product review experience from scratch to pre-launch.
Challenge
The Shop Disney app was notably missing a crucial UX feature: in-app reviews. With Baymard Institute’s findings that 95% of shoppers rely on reviews before buying, the importance of this feature was clear. The challenge? To develop a review feature that was engaging and intuitive, but also a natural extension of Disney’s magical experience, while prioritizing accessibility for all users.
Research/UX/UI
Ux Process
Research & Strategy
Under tight deadlines, I streamlined the traditional UX process for effective and quick insights. Starting with a focused UX audit and competitor analysis, I zeroed in on industry-leading solutions. I tapped into the Baymard Institute’s extensive mobile app UX research for foundational insights. Applying Nielsen Norman Group’s heuristic evaluation principles, I conducted a swift yet comprehensive interface assessment.
Supplementing this with insights from UX Planet and other top UX and business publications, the design strategy was not just quick but also aligned with the latest trends and best practices. This approach enabled the rapid gathering of essential UX data, ensuring my design was both innovative and firmly rooted in established patterns and methodologies.
Design
I focused on three key aspects for the in-app ratings and reviews: a user-friendly rating system, an AI-driven tool for summarizing and aggregating user reviews, and photo uploads. The AI tool, a standout feature, was designed to provide mobile users with quick, synthesized insights from reviews. Throughout the design phase, I prioritized accessibility, ensuring all elements complied with WCAG standards and best practices. This involved creating wireframes, Figma components, and interactive prototypes, all refined through rounds of team feedback.
Development & Collaboration
Embracing Frontend Principles in Design:
In the Figma build strategy, I adopted a ‘code-like’ approach in Figma, utilizing the “box model” for layer structuring and BEM-isk naming conventions. This method mirrors frontend development practices, ensuring a smoother transition from design to code. By employing principles like Flexbox (referred to as “auto layout” in Figma), I aligned the design closely with actual development patterns. This approach not only streamlined the handoff but also facilitated a better understanding between design and development.
Agile Methodologies:
The project embraced agile methodologies, with rapid prototyping and iterative design allowing for continuous feedback and improvements, ensuring a user-centric and technically sound final product.
Effective Communication Tools:
Slack and Jira were essential for maintaining real-time communication and efficient task management, ensuring alignment and progress tracking throughout the project.
Accessibility Detail
In leading the Shop Disney app redesign, prioritizing accessibility was key. Navigating the complexities of accessibility standards was a challenging yet rewarding aspect of this project. I ensured all visual elements consistently met or exceeded AA WCAG color contrast standards. For text elements, I adhered to WCAG guidelines, setting line height to 1.5 times the font size and letter spacing (tracking) to 0.12 times the font size. I aimed to keep font sizes above 14pt for enhanced clarity on various mobile devices. Input fields and hint texts were designed with high color contrast, in line with ADA standards.
The collaboration with the development team was integral to our success. Together, we planned for advanced features like voice input and screen reader compatibility, with a keen focus on the effective use of ARIA labels. This joint effort, balancing technical challenges with a strong commitment to inclusivity, was aimed at creating an accessible and enchanting experience for all users, in line with Disney’s ethos.
Anticipated Impact
The design choices were made to align with key business objectives and user needs, aiming for increased user engagement, improved conversion rates, and enhanced user satisfaction.
Challenges & Learnings
We faced a significant challenge in making it accessible. A deep dive into WCAG guidelines led to substantial revisions, reinforcing the lesson that accessibility is a foundational principle that must be embedded in the design process from the get-go.
Conclusion
Though I left the project before its official launch, the design process and the solutions arrived at serve as a testament to the power of user-centric, data-driven, and accessible design.