Moda is a responsive concept website resolving challenges in existing fashion tutorials. It addresses the lack of user-friendly product searches and support for KOL marketing. MODA features product pop-ups, showcases items below videos, and provides personal accounts with product-saving capabilities for seamless access.
Moda
Product Design | Rapid Prototype | User Flow
_gif.gif)
Design at a glance
.png)
Design Process
Research
In the initial research phase, my goal was to create a responsive fashion tutorial website. However, understanding the evolving needs of the fashion industry was crucial. Traditional advertising methods like social media ads and SEO were losing ground due to soaring costs. Through interviews with marketing experts, a clear trend emerged: brands were favoring influencers and celebrities for promotion. This shift highlighted the growing influence of these individuals, making it imperative to incorporate features supporting their promotion in the project.
Finding
This shift signified a fundamental change in consumer behavior. People weren't just buying products; they were buying into the lifestyle of influencers. Recognizing this, the project focus shifted to creating a seamless user experience. The design aimed to start from the homepage and smoothly guide users to featured products, integrating influencers' endorsements effortlessly. The project’s essence became clear: a website not just for tutorials, but a platform embracing and leveraging the impact of influencers in the fashion industry.
Ideation
Persona
Based on the research findings, it is evident that a specific user demographic, namely individuals influenced by Key Opinion Leader (KOL) marketing and actively engaged as fashion consumers, can be categorized into distinct personas.
.png)
Competitive
Analysis
The trend of KOLs and celebrities promoting products is evident on YouTube, a platform I analyzed during my competitive audit. While YouTube offers diverse content, including fashion tutorials, product recommendations are limited to links in the description, causing inconvenience for viewers.
To improve user experience, I propose implementing a pop-up product information box when products are mentioned. Furthermore, featuring the product details below the video streamlines accessibility, enhancing convenience and facilitating future reviews.
Sitemap
With the crucial design features identified, the focus shifted to structuring the site effectively. The primary objective was to enable users to save their preferred videos, uploaders, or products for future reference within their personal accounts. Additionally, ensuring seamless access to all major features directly from the homepage was a key priority in the planning process.
.png)
Design
Sketching
In this design approach, I deliberately crafted the sketches to be deliberately hazy and swift. This intentional fuzziness allowed me to draw without the constraints of overthinking, enabling a free-flowing process without getting entangled in decision-making dilemmas.
Low-Fidelity Design
I made substantial enhancements to the low-fidelity design, refining it for increased feasibility and a cleaner interface in comparison to the initial sketches. Additionally, I introduced several new pages to ensure that the design effectively caters to the essential functionalities.
High-Fidelity
DeSign
During this phase, my focus sharpened on refining the overall visual aesthetics and ensuring user-friendly interface design. Additionally, I implemented essential features to enhance functionality, including integration of product discount codes and subscription tabs for content uploaders positioned conveniently beneath the videos.
Considering the perspective of a user navigating through videos, the experience tends to be inherently unpredictable, and this spontaneity is intentional. Consequently, the overall user experience of this web design does not follow a linear path. Instead, multiple diverse pathways are available, leading users from the homepage to the featured product website. These pathways can be categorized into two main flow categories:
.png)
1. Home Page → Video
2. Video → Product Website
Flow & Prototype
1. Home Page --> Video
Flow #A:
Navigate to the video page by either selecting the video directly from the homepage or by clicking on the uploader icon beneath the video to access the uploader page.
Flow #B:
Users have the ability to search for both uploaders and specific content, streamlining their video discovery process.
2. Video --> Product Website
Flow #C:
Product information seamlessly appears as the video uploader introduces the product. Users have the convenience to add desired items to their wish list, granting them the option to revisit the website at their convenience. Additionally, users can easily copy discount codes from this section, enhancing their shopping experience.
Flow #D:
All products mentioned by the uploader will be conveniently showcased beneath the video. Users have the option to add these products to their wish list, allowing them to explore each website at their leisure.
Flow #E:
Users can conveniently access the product website directly from the featured item below the video, bypassing the need to navigate through their wish lists.
Surrounding Features
User Profile:
Users can conveniently access the product website directly from the featured item below the video, bypassing the need to navigate through their wish lists.
Video Genres:
Users have the option to refine their content exploration by selecting specific genres like fashion, beauty, culture, and more. This feature enables them to access content that aligns with their interests effortlessly.
Responsive Design
Personal Account:
I ensured users can seamlessly access their accounts both from the sidebar and the navigation tab on the homepage. The layout of the personal account has been meticulously redesigned to adapt to various screen sizes while preserving its core functionality.
Hamburger Menu:
To optimize the user experience on smaller mobile screens, I relocated the video genre feature to the hamburger menu.
Additionally, users can access the Personal Account and information section conveniently through the same menu.
The Overall Flow
The coherence of the mobile version's flow remains unaltered despite variations in web design layouts. Users can seamlessly navigate the interface, ensuring a comprehensive user journey and effortless access to any of the aforementioned option flows.
Future Steps
While I take pride in the progress made so far in shaping the Moda design, I acknowledge that for a vast platform like a fashion tutorial website, our work is far from complete.
Looking ahead, it’s crucial to recognize that not all products endorsed by influencers or celebrities can be deemed reliable. To maintain trustworthiness, the implementation of a rating and comment system for recommended products is essential. Additionally, creating a fraud reporting mechanism for video uploaders will ensure a healthier user experience by swiftly addressing any concerns.
Rating and Report System
In the upcoming phases, implementing user account registration and sign-in functionalities is imperative. Furthermore, understanding which features should be included in account settings and their impact on user experience is a pivotal question that needs exploration. Addressing these aspects comprehensively will contribute significantly to enhancing the overall Moda user experience.
User Account Management and Settings
Engaging in this design endeavor, I dedicated my utmost effort and acquired invaluable knowledge.
Reflection
Recognizing the intricacies of the product's industry profoundly shaped the value proposition of my design.
Understanding the Essence
Enabling users to navigate the user flow in diverse ways liberated the design, making it adaptable to users' needs and preferences.
Embracing Flexibility
Initially plagued by indecision, I resorted to a pen and paper, allowing my hand to lead. This simple act unlocked clarity; inspiration, often confined within our minds, found its way through the freedom of my hands.