UX Swagology 101
Crafting a space for E-Commerce Fashion Enthusiasts: Ensuring Seamless Shopping with Assurance of Quality and Precise Tailoring.
The genesis of the name "Swagology 101" stems from the fusion of "Swag" (denoting looking good in slang) and "ology" (indicating a subject of study or branch of knowledge). This playful wordplay encapsulates the essence of studying the art of looking good. The addition of "101" subtly suggests that mastering the art of looking good is akin to a fundamental college course, adding a touch of academic flair to the brand identity.
____________________________________
Overview
Role: Interaction Designer | Duration: 10 Weeks
Type: brain station agile project • school Project
Tools: Figma (Wireframes, Prototypes), Adobe Illustrate (Illustrations), Paper & Pen (Sketching), Stark Figma Plugin (Accessibility), Redline Figma Plugin (UI Library), Canva (Charts), Rotato (Mockups), Mobbin (Inspiration)
Type: brain station agile project • school Project
Tools: Figma (Wireframes, Prototypes), Adobe Illustrate (Illustrations), Paper & Pen (Sketching), Stark Figma Plugin (Accessibility), Redline Figma Plugin (UI Library), Canva (Charts), Rotato (Mockups), Mobbin (Inspiration)
The Problem
| How might we address the challenges for Gen-Xer’s and Millennials arising from customers not being able to physically interact with products before purchase so that they (the user group) can improve the outcome of their commercial exchanges, and receive products they're happy with? |
In the e-commerce retail sector, 20.8% of online orders are returned, with a substantial portion (30-40%) comprising fashion items. The challenge is worsened by the preferences of Millennials and Gen-X’ers, who constitute the majority of online shoppers (67% and 56%).
Warehouse personnel face significant hurdles in inspecting, sorting, and potentially restocking returned items, especially with the added burden of return shipping fees, which are particularly high for bulky or international returns. The extended inspection and restocking process results in products being temporarily removed from the sales cycle, leading to missed sales opportunities, particularly for high-demand items.
The considerable difference in return rates between e-commerce (35%) and brick-and-mortar stores (8.89%) is attributed to the inability of online customers to physically interact with products before purchase, prompting the widespread practice of ordering multiple sizes or variations and subsequently returning unwanted items. This pervasive issue underscores the critical need for a streamlined and user-friendly solution in the online shopping and return experience.
____________________________________
The Solution
Swagology 101 stands as a bespoke solution meticulously designed to cultivate a chic, premium, and size-perfect atmosphere tailored for Millennials and Gen X'ers. This distinctive platform collaborates with leading fashion brands, ensuring users access stylish clothing that not only reflects their individuality but also guarantees a perfect fit.
The culmination of this project manifests in high-fidelity mockups and a prototype that encapsulate the best case use of the product. A key objective of the product is to establish an all-encompassing virtual fitting guide, addressing the frustration of prospective users who often find themselves ordering multiple sizes of clothing online in the quest to identify the perfect fit or constantly returning clothing orders due to mis-fits.
____________________________________
Design Kick Off
Double Diamond Process
I used the UX Double Diamond process to design the framework of the project. It is a visual representation of the design thinking process and consists of two main phases: the "Discover" phase and the "Deliver" phase. Each of these phases is further divided into two stages, forming a double diamond shape.
1. Discover:
Research: Understanding the problem space, user needs, and constraints.
Define: Analyzing research findings to define the problem and create a clear design brief.
2. Deliver
Develop: Generating ideas and solutions through brainstorming and ideation.
Deliver: Prototyping, testing, and refining the chosen solution to create a final product.
The Double Diamond process emphasizes the importance of divergent thinking (expanding possibilities) during the discovery and development phases and convergent thinking (narrowing down options) during the define and deliver phases. It encourages a holistic and iterative approach to design, ensuring a thorough exploration of ideas and a focus on delivering solutions that truly meet user needs.
____________________________________
Diving Into The problem space
Percentage of E-Commerce Orders returned by Category
Consumers are more likely to return apparel than any other product type, with 26% having returned an item of clothing in the past 12 months.
Shoes (18%), bags (17%) and accessories (13%) make up the top four. In comparison, just 11% of respondents had returned electronics. Some 9% had sent back beauty and cosmetic products, while 7% returned entertainment items such as books, music, movies and video games.
Shoes (18%), bags (17%) and accessories (13%) make up the top four. In comparison, just 11% of respondents had returned electronics. Some 9% had sent back beauty and cosmetic products, while 7% returned entertainment items such as books, music, movies and video games.
Source: 3DLook.AI
Percentage of Fashion E-commerce Returns by Reason Code
The leading reason consumers for return online purchases is due to size, fit, or color according to Coveo.
Damage, defects, and poor quality are other top reasons. Some 55% of consumers make returns because they receive incorrect sizes, incorrect colors, or bad fit with the intent of keeping only those that fit.
Damage, defects, and poor quality are other top reasons. Some 55% of consumers make returns because they receive incorrect sizes, incorrect colors, or bad fit with the intent of keeping only those that fit.
Source: Insider Intelligence
Research Insights
1. Sizing and Fit Predicament
Insight: A significant portion of consumers (26%) have returned apparel in the past year, making it the most commonly returned product type. The primary driver behind these returns is related to issues with size, fit, or color.
Implication: There is a considerable opportunity for improving the online shopping experience by addressing sizing concerns. Enhancing size guides, providing detailed product descriptions, and implementing virtual try-on features could help mitigate this common reason for returns.
2. Quality Matters
Insight: While size and fit are major contributors to returns, factors like damage, defects, and poor quality are also significant concerns for consumers, contributing to 18% of returns.
Implication: Emphasizing product quality, ensuring robust quality control measures, and providing transparent information about materials and craftsmanship could help build trust and reduce returns associated with quality-related issues.
3. Multiple Size Ordering Strategy
Insight: Approximately 18% of consumers admit to ordering multiple sizes with the intention of keeping only those that fit. This suggests a strategic approach to online shopping, with consumers anticipating potential sizing discrepancies.
Implication: Retailers can explore initiatives such as improved size recommendations, virtual fitting rooms, or personalized sizing suggestions based on past purchases to assist customers in making more informed decisions during the initial purchase, thereby reducing the need for returns.
____________________________________
Understanding the Users & The Solution Space
Methodology
1. Interviews:
For user understanding, I employed a strategic approach centered on conducting interviews. I firmly believe that this method offers an optimal pathway to delve into the minds of potential users, unraveling their goals, motivations, and frustrations pertaining to the current landscape of fashion shopping in E-commerce. This insightful process allowed me to glean valuable firsthand insights, informing a user-centric design strategy.
2. Research Goal:
To address the challenges related to uncertainty that arise when customers can't physically inspect products. including uncertainties about product size, quality, color, or other attributes that significantly impact customer satisfaction.
3. Research Desired Goal:
To develop and implement user-centric solutions that effectively mitigate uncertainties arising from the inability to physically inspect products during online shopping.
Interview Protocol
1. Participant Criteria
Age Group: Gen Z and Millennials | Online Shopping Experience: Frequent Online Shoppers
Shopping Category: Fashion/Clothing | Technology Adoption: Participants who shop on phone apps
Return History: Participants who have a history of returning online purchases
Shopping Category: Fashion/Clothing | Technology Adoption: Participants who shop on phone apps
Return History: Participants who have a history of returning online purchases
2. Participant Information
Participant "A"
Age Group: Millenial
E-Com Shopping Habit: Aficionado
Quote: “I do more online shopping than I do anything”
E-Com Shopping Habit: Aficionado
Quote: “I do more online shopping than I do anything”
Participant "B"
Age Group: Millenial
E-Com Shopping Habit: Savvy
Quote:“So social media is a good platform for exploring new stores or new clothes items”
E-Com Shopping Habit: Savvy
Quote:“So social media is a good platform for exploring new stores or new clothes items”
Participant "C"
Age Group: Gen X
E-Com Shopping Habit: Efficient
Quote: “I'll give anything to chance once”
E-Com Shopping Habit: Efficient
Quote: “I'll give anything to chance once”
3. Affinity Mapping
4. Interview Insights
Product Quality & Assurance
Prioritizing product quality and assurance is a cornerstone of my design philosophy. This commitment places a strong emphasis on ensuring consumers receive high-quality items. By incorporating transparent information about product specifications, I aim to empower users with the confidence that their online purchases align with their expectations for excellence.
Navigating Return Order Ease
In acknowledging the importance of a positive end-to-end shopping experience, I focus on addressing the consumer's desire for hassle-free returns. Streamlining the return process contributes significantly to overall customer satisfaction. Through thoughtful design and user-centric solutions, I endeavor to provide consumers with the assurance that returning a product is straightforward, enhancing their confidence in the e-commerce platform.
Crafting for the Conscious E-Com Shopper
Understanding the mindset of financially and convenience-conscious e-commerce shoppers, my design approach aligns with their priorities. By prioritizing value for money and emphasizing streamlined, efficient shopping experiences, I aim to create digital environments that resonate with the conscious shopper. Through intuitive interfaces and strategic features, my designs cater to the needs of those who seek both affordability and a seamless online shopping journey.
Creating The Persona
1. Meet Miles Hamilton
Upon compiling and analyzing the interview data, I successfully synthesized a comprehensive persona that encapsulates the collective goals, motivations, and frustrations of the users. This persona serves as a representative archetype, providing a focused and empathetic understanding of the user base, thereby informing and guiding the design decisions throughout the project.
____________________________________
2. User Stories
3. Epics
____________________________________
Crafting the Research into A prototype
1. Task Flow
For the Task flow, I embraced Miles' journey in search of the perfect pair of jeans. Navigating through his profile page, I explored the seamless process of selecting jeans, meticulously consulting the size chart, and utilizing the virtual try-on feature. The narrative concludes with a smooth transition into the checkout process, providing a comprehensive overview of the user experience in Miles' quest for the ideal denim fit.
2. User Interface Inspiration Board
In curating the UI Inspiration Board for this project, I turned to Mobbin.com, meticulously exploring diverse app interfaces across various sectors such as Food Service, Fashion, Social Media, and Car Ride services. Through extensive research, I identified specific elements and layouts that resonated with my vision, carefully selecting those that contributed to an aesthetically pleasing and effective app design.
3. Exploratory Sketching
Following the selection of my preferred screens and elements from the UI Inspiration Board, I transitioned into the exploratory sketching phase. I focused on translating the most promising ideas into tangible form, sketching out the top three concepts for each screen to refine and solidify the design direction.
4. Solution Sketching
Moving forward, I advanced to the Solution Sketches phase. Here, I carefully chose the most compelling exploratory sketches for each screen, consolidating them into a cohesive and refined set of solution sketches. This stage aimed to distill the best ideas into a unified vision, marking a crucial step towards the finalization of the design concept.
____________________________________
Design Evolution: Making, Testing, and Iterating
1. Lo-Fi Wireframes
The Lo-fi Wireframing phase signifies the initial iteration of the prototype tailored specifically for the iOS format. This stage involves the foundational development of low-fidelity wireframes, serving as a fundamental step in shaping the overall structure and user flow of the design.
User Testing
Testing Executive Summary
User tests took place from: 1/5/24-1/6/24 in person & online with each participant
The purpose of user testing for the Swagology 101 app is to assess its functionality, usability, and overall user experience, ensuring that it meets the needs of users efficiently and effectively
5 Testers
5 Separate Sessions
In the user testing for the Fashion Right Sizing app, the evaluation tasks focused on assessing functionalities crucial for the users. Testers were tasked with navigating the home screen process, finding a specific item, find the size and color for that item, and entering payment information.
The purpose of user testing for the Swagology 101 app is to assess its functionality, usability, and overall user experience, ensuring that it meets the needs of users efficiently and effectively
5 Testers
5 Separate Sessions
In the user testing for the Fashion Right Sizing app, the evaluation tasks focused on assessing functionalities crucial for the users. Testers were tasked with navigating the home screen process, finding a specific item, find the size and color for that item, and entering payment information.
Testing Script & Tasks
Green Text: Task & Follow Up Questions
Yellow Text: User Movement on the Prototype With No Task
Blue Text: Conclusion Questions
Orange Text: Test Ending
1. Testing #1 Participant Quick Bio's
2. Test #1 Results
Task 1: Locate the Jeans Category
Task 2: Find Specific Jean
Task 3: Choose Size & Color
Task 4: Fill Out Delivery Information
Task 5: Choose Payment Type
3. User Testing #1 Analysis
4. Re-Design Prioritization matrix #1
5. UI Revisions #1
6. Prototype #2
Test #2 Results
1. Test #2 Participant Quick Bio's
2. User Testing #2 Results
3. User Test #2 Analysis
4. Re-Design Prioritization Matrix
5. UI Revisions #2
6. Prototype #3
Overall Testing Summary
During the testing phase, I acquired valuable insights emphasizing the importance of nuanced details in screen design, recognizing their pivotal role in shaping the overall user experience. A notable observation was the potential user ambiguity regarding scrolling actions, reinforcing the need for clear instructions to optimize app navigation. By incorporating feedback and observations from participants, I am confident that the refined app not only fulfills its intended purpose but also delivers an intuitive and seamless experience for users
Key Testing Insights
- The comprehensive user testing phase underscored the paramount importance of intricate details in shaping the overall user experience. The profound impact of small design elements and nuanced features on user interaction and perception has become a key cornerstone of our understanding
- The iterative process of sketching and prototyping has proven invaluable in our journey. This method has facilitated continuous refinement and optimization of the app's design, guided by user feedback, resulting in a final product that is not only more user-friendly but also polished with confidence.
- Striking a balance between a sleek, modern aesthetic and straightforward functionality is imperative. Our key insight affirms that a visually appealing design should seamlessly coexist with clarity and user-friendly functionality, solidifying our confidence in this foundational principle.
Post Testing UI Changes
Following the previous submission I met with some of my teachers and gained valuable insights. Missed in the testing phase I still had some accessibility issues with my final prototype. This information lead to essential improvements aimed at enhancing the app for users. These enhancements encompassed minor adjustments, such as refining smaller buttons, addressing issues with the back button, and ensuring proper alignment. Additionally, I have visual representations to share with you, offering a preview of these modifications before unveiling the high-fidelity prototype.
____________________________________
Navigating the Branding Landscape
Methodology of finding the Brand Identity
In my approach to defining the app branding, I explored the aesthetic landscape through a Mood Board, personally curating a visual essence to guide the design direction and evoke the desired emotions. Simultaneously, a UI Library serves as a centralized resource for reusable components, ensuring consistency and efficiency in development.
1. Mood Board
A Mood Board, in my methodology, became a powerful visual instrument conveying the projected user experience and design orientation. This compilation comprises a thoughtfully selected array of images, colors, textures, typography, and various design elements. Specifically, I employed seven carefully chosen adjectives, seeking out corresponding images to encapsulate and manifest the intended mood and atmosphere of the user interface. Following the generation of adjectives, I organized each descriptor into a "More 'A' than 'B'" list. This systematic approach served as a guiding framework throughout the brand development process
2. Expanded User Inspiration Board
Consulting my UI inspiration board played a pivotal role in refining this prototype. The board not only offered valuable insights but also influenced key aspects of the design, guiding the development of the new color picker, determining optimal button sizing, and reaffirming the judicious selection of card-style options for the galleries.
This iterative process, drawing from established design concepts, not only elevated the overall aesthetic but also ensured that the user interface harmonizes seamlessly with contemporary design trends and best practices. To maintain a dynamic approach, I am committed to expanding the inspiration board continually, incorporating new insights to keep the design in sync with evolving trends in the field.
3. Colors
Moving on to the next phase, I delved into extracting colors for the brand. Utilizing a color picker tool in Figma, I systematically extracted colors from all the images curated on the Mood Board. The initial extraction produced a palette that appeared somewhat confusing, prompting a cautious decision to conduct another extraction. This iterative process aimed to ensure precision and coherence in the final color palette for the brand identity.
From the second set of extracted colors, I proceeded to craft color neighborhoods using various methods such as Analogue, Complimentary, Monochromatic, and Triadic. This deliberate approach allowed me to organize and harmonize the colors effectively, ensuring a well-balanced and visually cohesive color palette for the brand.
I streamlined the color options from the neighborhoods, distilling them down to five sets that, in my assessment, most effectively encapsulate the emotions we intend to evoke when users engage with the app. This curation ensures a focused and emotionally resonant color palette for the brand identity.
Upon choosing Mystique Midnight Mirage, I promptly incorporated the color into the prototype. However, during a comprehensive review with supervisors, it became apparent that this color combination might fall short of meeting accessibility standards. To address this concern, we strategically substituted 737AC5 with 4C5D84, designating E5F1F5 as the new primary color. This adjustment ensures that our design not only aligns with accessibility requirements but also maintains a visually appealing and cohesive aesthetic. The iterative process of refining color choices is crucial to achieving both an inclusive user experience and a visually harmonious design.
4. Typography
In my quest for a suitable typeface, I narrowed down my options to the examples below. I specifically sought fonts that would resonate with millennials and individuals from Generation X. My search, initiated with a Google query for "fonts that appeal to young adults," led me to this collection. Unfortunately, none of these ultimately resonated or made a significant impact in my decision-making process.
After conducting additional research and exploration, I meticulously narrowed down my font choices to the following options. This process involved a careful consideration of various factors, ensuring that the selected typefaces not only appealed to the target audience of millennials and Generation X but also aligned seamlessly with the overall design vision for the project.
I choose the Raleway and Merriweather Sans fonts because I find the design exceptionally appealing, particularly in its sleek presentation. They contributes positively to the overall design. Raleway's clean and elegant appearance brings a sense of clarity and visual appeal of the content. The integration of Merriweather Sans as the chosen typeface significantly enhances user-friendliness, thanks to its modern and contemporary aesthetic.
5. Word Mark
In the initiation of crafting the word mark, I embarked on an exploration of diverse and creatively healing fonts. After identifying 10-15 promising options, I meticulously curated my selection to the top 5 favorites. To deepen my understanding of their visual impact, I took the step of sketching each font. This hands-on process proved instrumental in assessing and determining which font best resonated with the intended purpose of our word mark.
During the creation of the below version, I had a moment of inspiration: why not incorporate sunglasses into the O's? The idea resonated with me, so I sketched it out, and the result was fantastic. This led me to decide to bring the concept to life digitally through rendering.
Subsequently, I digitally crafted the word mark, and presented below is the final iteration.
6. App Icon
Creating an icon for UX design involves the process of designing a visual symbol or representation that effectively communicates a specific concept, action, or information within a user interface.
To Start the creative process i sought out inspiration from my Mood Board to come up with an icon. Then I sketched them out and created digital renderings below
To Start the creative process i sought out inspiration from my Mood Board to come up with an icon. Then I sketched them out and created digital renderings below
I opted for the third option from the top due to its perceived practicality, aligning seamlessly with the requirements of an app icon. This choice was driven by several factors, including the icon's simplicity, versatility, and its potential to convey the intended message effectively.
____________________________________
UI and Visibility Design
1. Accessibility
In my comprehensive evaluation, every aspect of buttons, screens, and sections successfully passed the accessibility test, with one exception. The setback occurred specifically with small letters, prompting a strategic adjustment. To address this issue, I increased the font size across the board, ensuring a consistent adherence to accessibility standards.
2. UI Library
In building the UI Library, I started with navigation icons, ensuring both active and inactive states. Expanding to basic icons across the prototype and header area, I maintained a focus on simplicity, consistency, and effectiveness. While facing challenges in measuring inside components initially, I resolved them with insights from helpful YouTube videos, emphasizing straightforward solutions for effective designs. When transitioning to organisms, I navigated the distinction between molecules and organisms, ultimately settling on a designated set after constructive exchanges with the library.
____________________________________
The Final Piece To the Puzzle: Hi-Fi Prototype
1. Hi-Fi Wire Frames
I am particularly pleased with the results as my illustrations effectively function as delightful details, impressing me with how the entire process culminated in a well-crafted design.
2. Hi-Fi Prototype
I refined my design through iterations, implementing decisions aimed at addressing user needs. Please refer below to witness the outcomes of these design enhancements on the interactions.
____________________________________
Project Reflections
1. Project Impact
Swagology 101 establishes an enjoyable and supportive environment, providing Millennials with a comfortable space to discover their favorite clothing items in the ideal size. This collaborative model extends its applicability to any group facing challenges in finding the perfect fit. As companies increasingly prioritize diverse sizing, this app contributes to the collective goal of enhancing inclusivity. Swagology 101, therefore, serves not only as a valuable resource for individuals but also as a potential channel for companies aiming to boost diversity sales by partnering with the platform.
2. Design Future Consideration
Smart Mirror
Considering alternative applications for the app, I envisioned its adaptation for a smart mirror. This approach, facilitating a user-friendly experience by leveraging the mirror's visibility, emerged as a compelling idea. Below, you'll find user stories, interactive features, sketches, and a mockup illustrating the potential appearance of the app on a smart mirror.
3. Key Learnings
The comprehensive user testing phase brought to light a fundamental key learning—details play a critical role in shaping the overall user experience. Through meticulous examination and feedback from participants, it became evident that the finer nuances within the design, such as button placement, color choices, and text readability, significantly impact how users navigate and interact with the application. Every small detail contributes to the overall cohesiveness and effectiveness of the user interface. This insight underscores the importance of a thorough focus on details in design, as they collectively shape the user's perception and satisfaction, ultimately determining the success of the user experience.
The key learning from the iterative process of sketching and prototyping is invaluable in the realm of design and development. This iterative approach underscores the importance of continual refinement and optimization throughout the design journey. By generating multiple sketches and prototypes, each iteration serves as a stepping stone toward enhancing the final product. This methodology not only allows for the exploration of various design possibilities but also facilitates the incorporation of user feedback and insights at each stage. The iterative process ensures that the design evolves organically, addressing potential issues, improving usability, and enhancing overall user satisfaction. It fosters a dynamic and responsive approach, where constant refinement is embraced as an integral part of achieving a successful and user-centric final outcome.
4. Next Steps
The next steps involve a thoughtful reflection and refinement process. Going back to review each phase with a critical eye is an essential step to identify areas of improvement and address any shortcomings. This retrospective analysis allows for a more comprehensive understanding of the design journey, considering not only what went well but also areas that could benefit from enhancements. By revisiting each phase, it becomes possible to apply the knowledge gained later in the class, incorporating newfound insights and best practices.
This review process serves as an opportunity to iteratively refine the design, ensuring that it aligns more closely with the latest industry standards and emerging design trends. It also provides a chance to address any user feedback received during testing phases, allowing for user-centered improvements. Additionally, considering advancements in design tools or methodologies learned in the course can contribute to a more polished and sophisticated final product.
In essence, these next steps involve a strategic and reflective approach, aiming to elevate the design by integrating lessons learned and continuously striving for excellence in every aspect of the project.
