30.08.2023 - 29.11.2023 / Week 1 - Week 14Yung Siew Weng / 0339847
UX Design / Bachelor of Design (Hons) in Creative Media
Project Compilation /
Rich Digital E-tail App Experience for Fashion-niches
Project Compilation
MODULE INFORMATION
UX Design - Project : Rich Digital E-tail App Experience for Fashion-niches
INSTRUCTION
The rise of fashion blogs, street style photography, social media influencers, and sewing crafts has changed the way people are influenced by fashion. Today’s 20-something consumers are more inspired by the clothes they see on the street, celebrities, and their peers, more than catwalk trends. However, with such an overload of fashion inspirations, it is getting harder to keep track of the selective trends that target specific audiences and niches.
Our task for UX Design is to develop a unique brand proposition for a fashion e-tail app that aims to inspire and engage with its niche audience on a daily basis in a way that feels credible, authentic and cool. Imagine a brand that caters to a specific trend and style, and how your commerce app is able to present and share fashion inspiration in an entirely new way to your target users - 20-somethings who actively use mobile phones to stay up to date and make purchases online.
EXPLORATION
After receiving the project requirements, we formed a group comprising Pei Yun, Carmen, Brigita, Jia Hsuan, and myself. We promptly initiated a brainstorming session to explore the question of "Which fashion-niche should we focus on and collaborate with?" In our class session, we were introduced to the concept of "Fashion Niches," which refers to specific segments within the clothing market. These segments cater to customers with distinct preferences and expectations regarding styles, quality, and pricing. For instance, one such niche is Lolita fashion.
After a brainstorming session, we documented all of our potential ideas and utilised a process of elimination to narrow down the concepts, ultimately selecting the final ideation based on majority agreement. By the end of the first week, we arrived at the concept of "Glamping/Camping" with a touch of 80s village style, emphasising a color scheme predominantly in beige or brown tones for fashion clothing. The comprehensive details outlining how we arrived at our potential topic and made the final decision are available in the attached PDF document :
Fig 1.1 Brainstorm Idea 1
Despite having decided on the concept of "Glamping/Camping" for our exploration and further development last week, we encountered challenges in narrowing down the scope of this topic during week 2. It became apparent that this theme was quite broad, making it difficult to find reference images and formulate a comprehensive mobile application concept. As a result, we continued to brainstorm and refine our ideas, ultimately settling on a different concept centred around Bohemian clothing with a holiday vibe.
Bohemian clothing, often referred to as "boho" clothing, takes inspiration from the Bohemian and hippie cultures of the 1960s and 1970s. This style is known for its relaxed and free-spirited aesthetic, prioritizing comfort, individuality, and a deep connection to nature.
During our class session, we engaged in discussions about our brand's identity and name. As part of our decision-making process, we conducted a poll to select our final brand name, which ultimately became "Gypsy". Each team member, including myself, was assigned the responsibility of designing the brand's logo. You can find the documentation of my individual logo's development in the attached PDF document below :
Fig 1.2 Gypsy, Brand Logo, Individual
While waiting for the following week's discussion, I continued on my journey towards some research on the branding (bohemian clothing) in order to make myself in a more clear direction.
Fig 1.3 Bohemian Clothing Research
Continued to week 3, we focused on further developing our logo design. However, it became apparent that we had differing ideas and visions for our ideal branding concept.
Fig 1.4 Logo Development, Canva Board
During our discussion, we found it challenging to make a definitive decision on our logo design. To gain some clarity, we sought feedback from Ms. Anis and she suggested a potential design created by Pei Yun, which we felt was quite suitable for our branding concept. However, we recognized the need for some adjustments. Specifically, we decided to change the font to a more "luxury and minimalistic" style in order to align better with our brand's identity, which revolves around luxury, minimalism, and feminine clothing design.
And, Jia Hsuan had suggested the idea of combining my design with Pei Yun's to see how they would complement each other.
Fig 1.5 Combination, Wavy + Stroke
Although I had tried on the combination, not all the members were satisfied with the ideation. So, rather than rushing into a decision, we made the collective choice to extend our timeline by another week. This additional time would allow us to thoroughly explore and refine our ideas, aiming to create a final design that would successfully balance all of our individual ideals and aspirations.
Continue to week 4, we began the final phase of brainstorming for our logo. Since the ultimate application would be on mobile devices, we made the decision to create mockups of our latest logo design within a mobile screen. This allowed us to evaluate which version best aligned with our brand concept and, fortunately, this approach was successful. We ultimately arrived at a logo design that everyone was satisfied with, marking a positive outcome for our project.
Fig 1.6 Gypsy Logo, Discussion
#1 : Bohemian enthusiast fashionista
#2 : Plus-Size Fashion Blogger & Influencer
#3 : Bohemian Vacation Seeker
And, I was responsible in designing the user persona #3: Bohemian Vacation Seeker.
Fig 1.7 User Persona + Empathy Map, Canva Board
Continuing from journey, our next step is to develop 2 User Journey Maps for each for the three user personas, encompassing both the offline and online (Gypsy) store experiences. After our discussion, we determined that it would be valuable to conduct on-site visits to offline stores before delving into the creation of user journey maps.
Fig 1.8 Offline Store Exploration
Following the site visit, we made a strategic decision to concentrate our efforts on creating an ideal user journey map centered around the ZARA store. This choice was driven by the valuable insights and a wealth of innovative ideas it provided, which we believe will be instrumental in the development and enhancement of our new mobile application.
Fig 1.9 User Journey Map Discussion, Canva Board
Fig 1.10 User Journey Report Compilation
After completing the user journey report, our attention shifted towards preparing for the proposal presentation. One of the critical aspects of the presentation was to showcase our wireframe designs. We collectively recognised that for a module centred around UX Design, it would be imbalanced if only one or two team members were responsible for the wireframes as It was essential to ensure that everyone actively participated in this phase of the project to maintain the integrity and coherence of our journey throughout the module.
After some discussion, we decided to individually create a set of wireframes for our GYPSY app. Our intention was to collectively analyse these wireframes, evaluate their features, and ultimately merge our design ideas to produce the most favourable results. This approach was key to gain insights or benefits from a diverse range of perspectives.
So, I decided to move to Adobe Illustrator (AI) to craft my ideation instead of Figma as AI would give me more benefited to create my ideal outcome :
Fig 1.11 Development in AI
Fig 1.12 Wireframe Crafting, Individual
Continue then, we transitioned into the stage of discussing how to combine our potential contributions. We embarked on a process of summarisation and analysis, providing each team member's design with valuable feedback. Since not all team members had a completed set of user flow, we made the collective choice to utilise mine as the primary framework for integrating the creative ideations proposed by other members.
Fig 1.13 Wireframe Discussion, Canva Board
//The red border highlighted the desired part for our final wireframe//
After the discussion, we proceeded to Figma to create our final wireframe design for the presentation. In the meantime, Pei Yun, Jia Hsuan, and I handled the wireframe transition, while Brigita and Carmen took charge of the presentation deck. Each of us was responsible for our respective design audit sections in the presentation too.
Fig 1.14 Wireframe Development, Figma
After the presentation, I realized that from an outsider's perspective (someone not involved in the design process), the wireframe flow might appear confusing and frustrating. Presentation interactions are crucial for effectively presenting our individual parts. Following the presentation, I made revisions to the wireframe flow to make it more understandable and clear.
Fig 1.16 Wireframe Interaction, Figma
//Adjustment after presentation as presentation need a different interaction//
Fig 1.17 GYPSY Wireframe Design for Proposal Presentation, Figma
//Presenter View Link : Figma Link//
Continuing after our proposal presentation, we entered our independent learning week. We collectively decided to take a bit of a break and focus on our individual exercises. Therefore, we resumed our journey in Week 10 by a meeting to finalise our prototype ideation and the potential survey questionnaire.
Fig 1.18 Discussed Potential Survey Question
Following our discussions about the survey questions and prototype ideation, we divided into two teams to organize and work on specific prototype sections. Brigita and Jia Hsuan took charge of the Home, Notification, Search, Bag, Discover your Size, and Check Out procedure sections. Meanwhile, PeiYun, Carmen, and I were responsible for the remaining portions. We scheduled a meeting to discuss and collaboratively work on the project to maintain consistency rather than assigning different sections individually :
Fig 1.19 Figma Development, Week 11
Continuing from there, we set a meeting time to further advance our development efforts. Meanwhile, each of us took on specific tasks to prepare content for the upcoming meeting. These tasks included creating the GYPSY sticker and developing augmented reality (AR) content for the AR features.
In our meeting in Week 12, we focused on the AR features, Community and Profile Page and concluded it into our final prototype. Except from our assigned part, we also need to help the another team to align and adjust all the alignment and elements to enhance consistency throughout the application.
Fig 1.21 Final Interaction Line, Figma
The most engaging part / proud of ❤️
#Product Info
Fig 1.22 Product Info
On the product info page of GYPSY, users can explore various image references through a carousel, featuring promotional images and pictures of models with diverse body types, alongside flat lay images of the clothing. By clicking "add to cart," users can select their preferred items. They can also change patterns or colors instantly by clicking the corresponding icons. Product details, care guidelines, and size measurements are provided. The measurement chart design is horizontal to facilitate easy readability on mobile devices when turned sideways. Users can share products with friends through the sharing button.
Each product info page includes a "perfect to come with" section suggesting complementary accessories or items. Additionally, a "write your review" section encourages users to share their feedback, contributing to social proof and building trust among potential customers.
GYPSY offers a "discover your size" feature to enhance user satisfaction. By answering various questions about their body measurements and fit preferences, users receive personalized size recommendations. These recommendations help users find the best fit and can be added directly to the cart for quick purchase.
#AR Virtual Try-On / AR Guide
Fig 1.23 AR Virtual Try-On
The AR (Augmented Reality) feature in GYPSY allows users to virtually try on clothing products. This feature provides users with an opportunity to experience the clothing virtually, helping them gauge the suitability of the product before making a purchase. By offering this AR experience, GYPSY aims to enhance user satisfaction, minimize potential disappointment, and ultimately improve user retention rates.
Upon entering the AR site, users can access an AR guide by clicking on the "question mark" icon. This guide offers step-by-step instructions on how to utilize the AR feature effectively. Once users complete the AR guide, a star rating system becomes available, enabling users to provide feedback by rating their experience with the feature.
#Community Club
Fig 1.24 Community Club
The community page on GYPSY serves as a hub for enthusiasts to connect, share experiences, and build trust in the brand. It operates as an interactive user review platform for potential buyers, leveraging Hick's laws to ensure familiarity within the app. Users can share their stories in the community, akin to Instagram's story-sharing feature. This includes the ability to add stickers, drawings, and text to their posts. Once satisfied, users can share the edited image to their personal story.
Similar to Instagram, users can express their liking for stories by clicking the heart icon. The community page also showcases friends' or popular posts, providing users with engaging content to explore. For posts featuring GYPSY clothing, a "view product" option is available for quick access to the worn product. Users can engage with posts through comments, likes, and browsing through the community's content.
Moreover, users have the capability to create posts within the community, enabling them to share their own experiences with GYPSY. By accessing the post panel section, users can write their thoughts and contribute posts to the community, fostering interaction and engagement.
#Profile
Fig 1.25 Profile Page
The profile page design was influenced by Xiaohongshu's layout, amalgamating elements from general settings, posts, and likes history with a toggle effect for seamless switching. The main page of the profile focuses on general settings, aligning with the e-commerce aspect of the application.
Within the profile page, users can navigate through three main sections: account, posts, and likes. The post section encompasses all user drafts for easy reference, while the likes section contains a collection of posts that users have previously liked. The account section serves as a hub for general settings, allowing users to manage various aspects such as order history, vouchers, reviews, settings, help, FAQs, and information about GYPSY.
Moreover, the scanner icon located in the top-navigation bar acts as a quick indicator for users to add friends via QR code methods. It provides easy access to the QR scanner for viewing user QR codes or scanning others' QR codes within the GYPSY application.
Fig 1.26 GYPSY Final Prototype, Figma
Continuing after the prototype completion, we moved into user experience surveys and data analysis. As the team only required 3 interviewees, Pei Yun and I had assigned to do the data analysis after the team had completed the interview and questionnaire. So, in short, we can have a short gateway from UX Design and focus to other assignment for the coming week.
Fig 1.27 Survey Questionnaire Responses, PDF
After wrapping up the user testing phase, Pei Yun and I delved into the data analysis stage, categorizing our approach into two distinctive methodologies: Qualitative (Interview) and Quantitative (Survey). Pei Yun took the reins on the survey section while I undertook the responsibility of conducting and analysing the interview section.
Fig 1.28 Data Analysis Compilation, PDF
Once all sections were completed, we moved towards preparing the final presentation. Unexpectedly, a challenge arose during the creation of our presentation slides. Despite having almost completed our slides, a last-minute addition emerged: the requirement for a video demonstration to be showcased during the presentation, confirmed at 23:00 the night before the presentation day. This was an overwhelming request as it necessitated deleting parts of our initial slides to accommodate the prototype explanation within the video. Additionally, we needed to add voice-over to the demonstration. Given the late hour and everyone occupied with their "task", I took the initiative and completed the voice-over work.
Fig 1.29 Voice Over
It was 6 a.m. when I finished recording the voice-over and handed over the edited version to Pei Yun to further work on background music and subtitles.
Fig 1.30 GYPSY Video Demonstration
YouTube Link : https://youtu.be/x2pZ3GfC3fU?si=pGqRNawaHRAaaATN
FEEDBACK
Week 7 / 11.10.2023 @ Proposal Presentation
Your presentation was excellent, but consider the presentation length in the future. The use of Figma for wireframe design is interesting. Well done!
Week 11 / 08.11.2023 @ Prototype Development
1. Develop two sets of survey question including questionnaires and interviews for the participants to facilitate comprehensive feedback.
2. Craft questions in the form of multiple-choice questions (MCQs), Likert scaling, or similar formats to avoid open-ended inquiries in questionnaires. For questions that necessitate open-ended responses, reserve them for the interview method.
3.Use the detailed plan you made and focus on a particular part, like user registration, to create situations for the three participants in order to compare their opinions.
4. Incorporate the main unique selling point of the augmented reality (AR) features into the application prototype. Emphasise and highlight this distinctive feature during the user testing phase to gauge its impact on user experience and perception.
Week 14 / 29.11.2023 @ Final Presentation
Great job! I expected you all to do this from the beginning of the semester, and yes, you've all achieved it.
REFLECTION
Throughout this module, our team, primarily specialised in UI/UX Design, found the UX Design module providing additional expertise. Although we expected it to be straightforward due to our shared background, working with five designers introduced various ideas. Even a seemingly simple decision like including an email field on the registration page led to lengthy discussions. However, these debates, although time-consuming, were essential to ensure our main objectives — enhancing the app's user experience and creating a seamless, user-friendly application.
Our main challenge centered around teamwork. Despite our shared specialization, each team member had their different "design concepts and methods". To ensure consistency across the application, it's crucial for us to adhere closely to the established art direction and criteria. This reminds me of advice from a past interviewee: "In a company, we can't randomly change design elements as it has its own 'blue plan'. Similarly, we need to follow our 'blue plan' to maintain consistency and improve the user experience across our applications."
Overall, the experience throughout the module has been insightful, especially the overall outcome was from my wireframe creation. It can be proved that collaboration among five designers led to diverse ideas and discussions, but aligning our design approaches for consistency proved challenging. To sum up, adhering closely to the established art direction is crucial for a cohesive and enhanced user experience across an application.
Comments
Post a Comment