Mobile accessories E-commerce
X Accessories is an e-commerce website that sells customizable tech accessories, allowing customers to personalize phone cases and accessories.
My UX Internship Journey
During my six-month UX internship, I collaborated with the UX team to improve the shopping experience through user research, wireframing, iterative design, and reusable design system components.
Introduction
I embarked on a creative journey with X Accessories to craft an exceptional e-commerce website tailored to the unique desires of users seeking customizable phone case accessories. This endeavor aimed to deliver a seamless and delightful shopping experience, characterized by a diverse array of customization options and top-notch product offerings. I focused on a comprehensive UX design process, encompassing creative problem-solving, competitive analysis, customer journey mapping, and the development of user personas, all geared toward elevating the X Accessories platform.
Project Brief & Requirements:
The project brief and requirements were provided by the UX team. I followed the defined goals, user needs, and project requirements to create UX design solutions and deliverables throughout the design process.
UX Team Collaboration:
Worked with a UX team during the design process, receiving feedback through design reviews and iterating on my UX solutions based on team recommendations.
Team Members:
Kuyheang Baker (Product designer)
Neha Shekar Patil (UI & UX designer/Product designer)
Project Type: E-commerce website design
Tools: Figma, Google Meeting
Design Challenge: Rethink the experience the process of purchasing tech accessories.
Design Process Overview:
Case Study Menu:
Details in this case study have been intentionally generalized to comply with client's contractual confidentiality requirements.
Analyze existing e-commerce experiences to identify for the strengths, and opportunities for improving the X Accessories shopping experience.
Competitor Analysis
The project's initial challenge entailed conducting a thorough competitor analysis. The SWOT analysis identified common strengths, such as intuitive navigation and personalization, and weaknesses, including cluttered layouts and complex user flows. These insights guided design decisions.
Sitemap
Created the sitemap to help organize webpage sections in a step-by-step workflow, ensuring a smooth navigation for key sections such as accessories, customized cases, customer support, promotional deals, and login/register account.
Persona Ava — Visual Designer
User Personas
To address user needs, I created two personas: Ava, a visual designer, and Ethan, a marketing professional. These personas guided design decisions for improving the shopping experience, customization options, and personalization features of X Accessories.
Persona Ethan — Marketing Professional
Journey Map of purchasing a phone case
What do you learnings?
Journey steps ➤ Identify need for a case ➤ Research case ➤ Prices and features case ➤ Decision and purchaseReceive ➤ New phone case
User actions
Goals & experiences
Feelings and thoughts
Opportunities
Need and Pain points
Customer Journey Map
To create a user-centric design, I meticulously researched and constructed a customer journey map. This visual representation illuminated the sequential steps, goals, experiences, emotions, and thoughts that users undergo during their interaction with the e-commerce platform. This detailed mapping enabled a deep understanding of the user's voyage, particularly during the process of purchasing and customizing phone case designs for X Accessories. By identifying pain points and opportunities at every juncture, I ensured a smooth and intuitive user experience, paving the way for seamless transitions and reducing obstacles.
Journey Map of purchasing a phone case
What do you learnings?
Journey steps ➤ Identify need for a case ➤ Research case ➤ Prices and features case ➤ Decision and purchaseReceive ➤ New phone case
User actions
Goals & experiences
Feelings and thoughts
Opportunities
Need and Pain points
Homepage
Support
Promotion Deals
Login/Sign up
Custom Cases
Product Browsing
Footer Navigation
About → Company information
Social Media → External social platforms
Low-Fidelity Wireframes
I started by creating basic wireframes to outline the website's structure. These low-fidelity sketches helped plan the page layout and user flow for accessories, customization, customer support, promotions, and account registration.
Guidelines & Typography
Button System & Components
Design Guidelines and Design System
I created and utilized high-fidelity wireframes, incorporating company's branding while also adding my own touches. This experience was invaluable for understanding design principles and guidelines.
High-Fidelity & Prototype Wireframes
Next, I transformed the low-fidelity wireframes into high-fidelity designs. I used design system for consistent color, typography, and visual elements. I followed user-centered design principles to ensure accessibility standards were met. Finally, I created interactive prototypes for user feedback, including buttons and links.
User Testing
Problem Statement:
The X Accessories website had usability challenges that affected navigation, product discovery, and the customization experience. The UX team reviewed the existing experience to identify opportunities for improvement and create a more intuitive e-commerce journey.
Pain points:
Difficulty finding products and navigating through categories.
Complex customization process for personalized cases.
Inconsistent user flows across different sections of the website.
Tool Used:
Google meeting and Figma sharing with team.
Figma interactive prototype.
Participants:
UX design team members and project stakeholders.
Review Goals:
Evaluate navigation and product discovery.
Review customization workflow.
Identify usability issues and pain points.
Gather feedback to improve the overall user experience.
Summary:
In our user testing project for X Accessories' e-commerce site, we aimed to make the website more user-friendly. Users tested a prototype, provided feedback, and helped us make improvements. our goal was to improve the navigation of and recognized the important of user-friendly navigation in enhancing the overall user experience .
Conclusion
This project helped me understand the full UX design process, from research to final prototyping and testing. I learned how connecting user personas with journey mapping improves design decisions and enhances the overall user experience. A key challenge was organizing user steps into a clear and logical flow, as it was initially difficult to define how each action connects across different stages of the experience.
Overall, this project strengthened my practical UX skills and design thinking process.