In the summer of 2024, we partnered with New Character Store, a Tehran-based retailer specializing in high-quality eyewear, to design their first online store. With a clear mission to create a seamless, user-friendly experience for purchasing sunglasses, the project required a comprehensive UX/UI design approach, covering desktop and mobile platforms.

The store's representative, Saman Hooshyar, envisioned a platform that not only showcased their extensive product range but also simplified the customer's journey from browsing to checkout.

My role was to bridge design aesthetics with functionality while aligning with the brand's premium identity.

Background

Challenges, Goals, and Problems

Designing an online sunglasses store for the New Character Store came with its own set of challenges. The project required a balance between adhering to tight deadlines and creating a responsive, user-friendly design that met both the employer's expectations and the needs of the end-users. Communication was key, as the designer needed to collaborate closely with the employer’s product manager and development team to ensure seamless integration of the design into the final product.

The project goals were clear:

• Create a User-Friendly Platform: The online store had to cater to diverse users, offering a smooth shopping experience across both desktop and mobile devices.

• Streamlined User Experience: Simplifying the user journey from browsing products to completing purchases was essential.

• Reflecting Brand Identity: The design needed to reflect the professionalism and modern image of the New Character Store.

• Adapting to Future Needs: The design had to be scalable and flexible, allowing for updates and modifications as the business evolved.

The primary challenges stemmed from:

• Fragmented Requirements: Compiling all necessary information, such as product details, images, and page content, from the employer on time.

• Time Constraints: Completing the design within the agreed 40-business-day timeframe while maintaining high-quality standards.

• Collaborative Workflow: Coordinating efficiently with the development team to address any design issues after delivery.

• User-Centric Approach: Ensuring that the design was intuitive, responsive, and catered to the needs of the store’s target audience.

The project began with a deep dive into understanding the employer's vision, brand identity, and target audience. Through collaborative discussions with the product manager, a detailed plan was established to ensure every page, from the homepage to the payment process, reflected a user-centered design. Initial wireframes and prototypes were shared to gather feedback iteratively, allowing for alignment on both aesthetics and functionality. Throughout the 40-business-day timeline, agile methods ensured adaptability to evolving needs while prioritizing simplicity and scalability in the final design.

Process and Approach

1. Discovery Phase

I began with comprehensive research:

• Competitor Analysis: Studied leading e-commerce platforms for eyewear to identify trends, features, and gaps.

• User Personas: Defined profiles for typical users, including busy professionals and fashion-conscious shoppers.

• Collaborative Planning: Worked closely with Saman to gather brand assets, product images, and specifications.

• Competitor Analysis

To ensure the online eyewear store stood out, an in-depth competitor analysis was conducted, focusing on EyeBuyDirect, Zenni Optical, and Warby Parker. Each platform was evaluated for its effectiveness, efficiency, and user satisfaction. EyeBuyDirect excelled with a 90% success rate, a swift 4-minute task completion time, and a 4.8 user satisfaction score, thanks to its simple yet professional UI. Warby Parker achieved balanced results with dynamic layouts and a satisfaction score of 4.5. Zenni Optical, while chic, fell behind in learning time and recovery rates. Insights like user-friendly fonts, immediate feedback, and accessible navigation were prioritized in the design process to elevate the user experience beyond industry standards. These findings shaped a streamlined, efficient, and visually appealing design tailored to the client's unique needs.

Strengths, Weaknesses, Opportunities, and Threats

As we crafted the strategy, a SWOT analysis revealed both challenges and opportunities that informed our approach. The platform’s strengths—including a unique, modern design, competitive pricing, and excellent user experience—became its foundation. However, weaknesses such as limited brand recognition, financial constraints, and delivery delays highlighted areas needing immediate attention.

Opportunities were abundant, with the rise of online shopping, social media engagement, and innovative technologies presenting avenues for growth. Yet, the landscape was not without threats—fierce competition, economic fluctuations, and evolving customer preferences required adaptive strategies to stay ahead.

Summary and Conclusion

The competitor analysis provided critical insights to carve a unique niche for the online eyewear store. By focusing on points of differentiation, such as offering full customization of glasses, high-quality product images with detailed views, and advanced filter options, we sought to improve both functionality and aesthetics. Prioritizing an optimized mobile application and live online support enhanced accessibility and user satisfaction.

The competitive strategy emphasized targeted digital advertising, exclusive promotions for new and loyal customers, and fostering social media engagement through informative and captivating content. This holistic approach ensures a distinctive, user-centered shopping experience, setting the platform apart in a competitive market.

.User Research

Currently, online eyewear stores face issues such as customers' inability to experience the products in person, lack of trust in the quality and authenticity of the glasses, and insufficient product information. This results in a lower online purchase rate compared to physical stores and a much higher return rate.
This information may have been gathered from meetings with business owners or through competitor analysis.

Problem Statement

Goal setting

The goal of user research for the online eyewear store is to identify the needs and challenges that users face when purchasing glasses online.

Interviews

Focus:

The interviews focused on identifying:

• Key pain points in the online shopping process.

• Features users value most in an eyewear website, such as product variety, ease of navigation, and accurate descriptions.

• Satisfaction levels regarding shipping, customer service, and overall shopping experience.

Execution:

One-on-one interviews were conducted with a diverse group of five participants, including both experienced and first-time online buyers. The participants were asked structured questions to evaluate their preferences, challenges, and overall impressions of online eyewear stores. The responses provided rich qualitative insights for refining the design and functionality of the website.

Purpose:

The interviews aimed to delve deeper into individual experiences and uncover specific challenges users face when purchasing glasses online. The goal was to understand the factors influencing their buying habits and decision-making processes while highlighting the importance of features like virtual try-on tools.

Purpose:

The focus groups were designed to identify shared frustrations and uncover common patterns in user preferences. By fostering group discussions, the goal was to gain insights into collective challenges and evaluate early design concepts.

Focus:

The sessions concentrated on:

• Unveiling common pain points in the online eyewear shopping experience.

• Gathering feedback on features like filtering options, virtual try-on tools, and visual design.

• Exploring user expectations for navigation, product variety, and clarity of information.

Focus Groups

Execution:

Groups of 6–8 participants were brought together to share their shopping experiences and provide feedback. Participants engaged in structured conversations about their needs, challenges, and expectations while testing initial design ideas.

Purpose:

The usability testing aimed to evaluate how effectively users interact with prototypes or competitor platforms, identifying usability issues that hinder the overall shopping experience.

Focus:

Key areas of assessment included:

• Clarity and intuitiveness of website navigation.

• Ease of discovering and selecting products like glasses.

• Users' ability to complete critical tasks, such as searching, comparing products, and completing a purchase.

usability testing

Execution:

Participants were tasked with:

1. Searching for glasses using filters.

2. Comparing multiple products.

3. Adding products to the cart and completing the checkout process.
   Observations focused on task completion rates, challenges faced, and user feedback on navigation speed, interface design, and the accuracy of product information.

Result

Positive Features

1. Special Discounts and Personalization (P1): Personalized offers make the shopping experience feel tailored and rewarding.

2. Enhanced Visual Design (P2): A modern, visually appealing website improves user engagement.

3. 24/7 Support with Live Chat (P3): Continuous availability of support fosters trust and reliability.

4. User Reviews Displayed (P4): Feedback from other shoppers adds credibility and helps build trust.

Needs

1. Advanced Search Filters (N1): Users seek robust filters to streamline product searches.

2. Access to Ratings and Reviews (N2): The ability to view other users' opinions is crucial for informed decision-making.

3. Responsive Support (N3): Fast and reliable customer service is a key expectation.

4. AR Technology Try-On (N4): Virtual try-ons enhance confidence in choosing the right product.

Shortcomings

1. Lack of Detailed Product Information (S2): Missing or unclear details about materials can deter purchase decisions.

2. Long Shipping Times (S3): Delayed deliveries frustrate users and reduce satisfaction.

3. Quality Mismatches (S4): Disparity between ordered and received products erodes trust in the store.

To ensure that my decisions moving forward in the design process are user-centered, I wanted to have a clear understanding of who my platform’s users are. By identifying key insights from my research and empathy map, I created a user persona to represent the target audience I will be designing for - Meet Korosh!

.Persona

During the project, I worked closely with Saman to gather essential brand assets, product images, and specifications. This collaborative effort was key in ensuring that the product visuals and brand messaging aligned with our design goals. Together, we aimed to create a seamless user experience that meets the needs of our target audience, making sure that all visual elements complemented the overall brand identity and user expectations.

.collaborative Planning

2.wireframe and Prototyping

Introduction

Wireframing and prototyping are essential steps in the design process that help translate research insights into tangible, user-centered designs. In this project, I used data from user research, personas, and competitive analysis to shape the structure and functionality of the website. The wireframes provide a blueprint for the layout, while prototypes bring these ideas to life, offering a clear view of the user experience and interaction design. These stages allowed me to refine user flows and create an intuitive, visually appealing interface.

.Site Map

Wireframing and prototyping are essential steps in the design process that help translate research insights into tangible, user-centered designs. In this project, I used data from user research, personas, and competitive analysis to shape the structure and functionality of the website. The wireframes provide a blueprint for the layout, while prototypes bring these ideas to life, offering a clear view of the user experience and interaction design. These stages allowed me to refine user flows and create an intuitive, visually appealing interface.

.User Flow

The key stages in the user’s experience are as follows:

1. Discovering Products: The user starts by browsing through product categories or searching for specific items.

2. Filtering Categories: Filters help users narrow down their search by various criteria like price, style, and size, making it easier to find what they want.

3. Adding Items to the Cart: Once a user finds a product they like, they add it to the cart with a simple click.

4. Checking Out: The user proceeds to checkout, where they review their items, enter shipping details, and complete the purchase.

These stages influence wireframe design by ensuring smooth navigation. For example, clear call-to-action buttons, accessible filters, and a straightforward cart layout are prioritized to enhance the user experience. This makes the site intuitive, guiding users effortlessly from discovery to purchase.

.Low-Fidelity Wireframes

In this phase, I created low-fidelity wireframes to establish the core structure and user flow of the website, focusing on functionality over design details. The key screens include:

1. Homepage: Prioritized product highlights and promotional banners for easy user engagement.

2. Product Categories: Organized by filters such as type, size, and price, allowing for seamless product browsing.

3. Checkout Flow: Simplified navigation for adding items to the cart, entering shipping information, and completing the purchase.

These wireframes ensured that the user’s journey would be intuitive, guiding them smoothly through product discovery to finalizing the purchase, without the distraction of complex visual elements.

.Prototyping & High-Fidelity Mockups

After refining the wireframes, I transitioned to creating high-fidelity prototypes to visualize the final design and interactions. The prototypes showcase a polished visual design, with attention to layout, color schemes, typography, and branding. I integrated interactive elements such as hover states and smooth transitions, enhancing the user experience by providing intuitive feedback and ensuring seamless navigation.

Through feedback from the team, I made adjustments to optimize usability, resulting in a more engaging and user-friendly design. These refinements led to an interactive prototype that closely mirrors the final product, ensuring the user's journey is both functional and visually appealing.

3. Visual Design

The color palette for the project was developed collaboratively, reflecting the conductor's preference for joyful and vibrant hues. Together, we selected a palette that balanced brightness and cohesion, ensuring the colors resonated with the brand's identity while maintaining visual harmony across the design. This collaborative process ensured that the final palette was both engaging and aligned with the project's goals.

Typography

For typography, the Inter font was selected for its modern and clean appearance, ensuring excellent readability across digital platforms. Its versatility makes it suitable for both headings and body text, creating a consistent and polished visual hierarchy throughout the design. This choice complements the vibrant color palette, enhancing the overall user experience.

4. Collaboration with Developers

To ensure seamless collaboration with developers, I provided comprehensive style guides and detailed specifications for each page, outlining the visual and interactive elements. This facilitated a smooth implementation process and minimized potential discrepancies. Additionally, I maintained open communication, remaining accessible for troubleshooting and addressing design-related questions during development, ensuring the final product aligned with the design vision and user needs.

4. outcomes

The final design achieved remarkable results, featuring:

• Responsive Design: Optimized for seamless performance across desktops and mobile devices.

• Enhanced Usability: Clear navigation, visually striking CTAs, and a secure, streamlined checkout process.

• Aesthetic Appeal: A sophisticated, cohesive interface that reinforced the brand’s premium image.

The project met the deadline and scope, with post-launch support addressing minor updates and further optimizations.

Client Feedback

Saman commended the project’s success, noting the smooth user experience and visually engaging design. Users praised the store for its intuitive navigation and fast product access.

Reflection

This project reinforced the value of collaboration and user-centered design. Transforming Saman’s vision into a thriving digital storefront demonstrated my adaptability and commitment to delivering high-quality results.