Project Summary
The LGGK project aimed to develop a new website for an online clothing retailer with an ecommerce system. The primary goal was to enable the sale of various clothing articles while also contributing a percentage of each sale to a foundation that supports bringing hearing aids to undeveloped countries. The website was designed to serve as a platform to raise awareness about hearing prevention, incorporating this theme throughout.
Problem Summary
The existing website lacked a user-friendly interface, resulting in a poor user experience and low conversion rates. Additionally, the lack of a dedicated ecommerce system made it challenging for customers to browse and purchase clothing articles seamlessly. The client also expressed a need for an enhanced visual design that aligned with their hearing awareness mission.
Solution Summary
The solution involved designing a new website with a robust ecommerce system and a visually appealing interface. The website would provide users with a seamless shopping experience, while also educating and raising awareness about hearing prevention. The integration of a donation mechanism allowed customers to contribute to the cause with each purchase.
-
Role
Developer, UX/UI Designer
-
Client
LGGK
-
Date
TBA
Read the Whole Use Case below
Research
1. Competitive Analysis:
A comprehensive competitive analysis was conducted to understand the strengths and weaknesses of existing online clothing retailers. This analysis helped identify industry best practices, emerging trends, and potential areas for differentiation. It also provided insights into successful ecommerce systems, user engagement strategies, and donation integration models.
2. User Interviews:
In-depth interviews were conducted with potential users, including fashion enthusiasts, philanthropic shoppers, and individuals interested in hearing health. These interviews sought to understand their online shopping habits, preferences, and pain points. Questions were tailored to gather insights about their expectations regarding clothing choices, user experience, donation processes, and the integration of hearing awareness content.
3. Surveys:
Online surveys were distributed to a broader audience to gather quantitative data on shopping behaviors and preferences. The surveys covered topics such as online clothing shopping frequency, preferred features, visual design preferences, motivations for charitable contributions, and attitudes towards hearing health. The survey responses were analyzed to identify patterns and trends that informed the design decisions.
Image Section
Personas
Sarah
Age: 25
Occupation: Marketing Executive
Background: Sarah is a young and fashion-forward individual who enjoys keeping up with the latest trends. She loves shopping for unique clothing items to express her personal style.
Goals and Needs:
- Sarah seeks an intuitive and visually appealing interface that offers a wide variety of fashionable choices.
- She values a seamless and efficient shopping experience that allows her to browse through different clothing categories easily.
- Sarah expects high-quality product images, detailed descriptions, and customer reviews to make informed purchasing decisions.
- Sarah gets frustrated when the website has a cluttered layout or confusing navigation, making it difficult to find what she's looking for.
- She dislikes long loading times and prefers a responsive and mobile-friendly website to browse on her smartphone.
Age: 35
Occupation: Teacher
Background: Mark is a socially conscious individual who actively seeks out opportunities to support charitable causes. He believes in using his purchasing power to make a positive impact.
Goals and Needs:
- Mark values transparency and appreciates a seamless donation process integrated into the shopping experience.
- He wants to know how his purchase contributes to the foundation that helps bring hearing aids to undeveloped countries.
- Mark prefers clear communication about the percentage of each sale that goes toward the charitable cause.
- Mark feels frustrated when the donation process is unclear or requires additional steps, hindering his ability to contribute easily.
- He dislikes hidden fees or lack of transparency regarding the donation percentage from his purchase.
Lisa
Age: 40
Occupation: Audiologist
Background: Lisa is a passionate advocate for hearing health and prevention. She wants to spread awareness about the importance of hearing care and support initiatives that address hearing-related issues.
Goals and Needs:
- Lisa seeks a platform that not only offers stylish clothing but also provides educational resources and information related to hearing issues.
- She wants the website to feature articles, blog posts, or videos related to hearing health and prevention.
- Lisa appreciates a brand that actively promotes the importance of hearing protection and offers tips on maintaining good hearing health.
- Lisa feels disappointed when the website focuses solely on selling clothing without integrating any educational content related to hearing health.
- She dislikes generic product descriptions without any connection to the brand's hearing awareness mission.
Image Section
Ideation
The ideation process involved a collaborative effort to generate creative concepts and design directions for the new website. It aimed to explore various ideas and solutions that aligned with the project goals and the brand's hearing awareness theme. Here are the key steps involved:
- Brainstorming: The project team, including UX/UI designers, developers, and stakeholders, conducted brainstorming sessions. These sessions encouraged open discussions and the generation of diverse ideas related to the website's structure, features, and visual design. The goal was to foster a creative environment where all participants could freely contribute their thoughts and suggestions.
- Moodboarding: Visual inspiration was gathered through moodboarding. The team collected images, color schemes, typography samples, and examples of other websites or designs that resonated with the hearing awareness theme and the desired aesthetic. This step helped establish a visual direction and set the tone for the website's design.
- Sketching and Wireframing: Low-fidelity sketches and wireframes were created to explore different layout possibilities and page structures. This allowed the team to quickly iterate and visualize various design concepts. The sketches focused on key pages such as the homepage, product listing page, product detail page, shopping cart, and donation process. Multiple iterations were created to evaluate different design approaches.
- Design Studio Workshops: Collaborative design studio workshops were conducted, where team members from various disciplines shared their ideas and contributed to the design process. Rapid sketching exercises and design critiques helped refine the design concepts, incorporating valuable input from different perspectives. These workshops fostered a sense of ownership and collaboration among the team members.
- Interactive Prototyping: High-fidelity interactive prototypes were developed using design tools or prototyping software. These prototypes allowed the team to simulate user interactions and test the usability of the proposed design concepts. Interactive elements such as navigation, dropdown menus, search functionality, and donation integration were incorporated into the prototypes.
- Stakeholder Feedback and Iteration: The prototypes were shared with stakeholders, including the client and potential users, to gather feedback and validate the design direction. Feedback sessions and usability testing were conducted to identify strengths, weaknesses, and areas for improvement. This iterative process allowed the team to refine the design based on user feedback and ensure a user-centric experience.
The ideation process involved a balance of creativity, collaboration, and iterative design. It aimed to explore various possibilities while keeping the project goals and user needs in focus. Through brainstorming, moodboarding, sketching, and prototyping, the team generated ideas and concepts that ultimately shaped the design direction of the website.
Image Section
Testing
A/B Testing:
- A/B testing was conducted to compare the performance of different design variations or features.
- Two or more versions of the website design or specific elements were created and tested simultaneously.
- Users were randomly assigned to different groups, with each group experiencing a different version.
- Key metrics such as conversion rates, click-through rates, or engagement levels were measured and analyzed to determine the most effective design option.
- A/B testing helped optimize the design based on data-driven insights and user preferences.
Cross-Device and Cross-Browser Testing:
- The website was tested on various devices, including desktops, laptops, tablets, and smartphones, to ensure responsiveness and compatibility.
- Different operating systems, screen sizes, and resolutions were taken into account during testing.
- Cross-browser testing was conducted to ensure consistent functionality and visual presentation across popular browsers such as Chrome, Firefox, Safari, and Edge.
- Compatibility issues were identified and addressed to provide a consistent user experience across different devices and browsers.
Accessibility Testing:
- Accessibility testing was conducted to ensure compliance with accessibility standards (such as WCAG 2.1) and make the website inclusive for users with disabilities.
- The website was tested using assistive technologies such as screen readers, keyboard-only navigation, and voice commands.
- Issues related to readability, color contrast, alternative text for images, and keyboard accessibility were identified and resolved.
- Accessibility testing aimed to provide a seamless and inclusive experience for users with visual, auditory, motor, or cognitive impairments.
Iterative Testing and Continuous Improvement:
- The testing process was iterative, with findings and feedback used to make design improvements.
- Iterative testing allowed the team to validate design decisions, identify and address any usability or functionality gaps, and enhance the overall user experience.
- User feedback, analytics data, and ongoing user testing were continuously monitored post-launch to gather insights for further improvements and future iterations.
Image Section
Delivery
The final delivery involved creating high-fidelity mockups and interactive prototypes. The visual design incorporated the hearing awareness theme, utilizing appropriate color schemes, typography, and imagery. The website was developed and launched, integrating the ecommerce system, donation mechanism, and educational content. User feedback and analytics were monitored post-launch to further optimize the website's performance.
Image Section