View Prototype
End-to-End App:
Ai.telier
A case study on a mobile first End-to-End App with with an MVP focused on AI and Online shopping.
Role
Project
Year
Product Designer
End-to-End: MVP App - Ai.telier
May-June 2023
05
01
02
03
04
05
Research
Synthesis
Analyze
Design
Test
My Design Process
03
User Personas
To create the user personas of Peter and Ava, I conducted extensive research and gathered data from user interviews and surveys. Through this process, I discovered common characteristics and behaviors shared by multiple participants, allowing me to identify distinct user profiles.This helped me to ensure that my design decisions were grounded on real user needs, goals and expectations.
Synthesis
I created an affinity map to synthesize my qualitative data. Affinity mapping helped me to group my observations made during user interviews and notice themes that I could then use to develop insights.
I discovered common pain points experienced by users, such as difficulty in locating the AI search feature and confusion around the prompts provided. Users expressed a desire for a more prominent and easily accessible AI search functionality.
Users showed a preference for AI recommendations that consider their budget and provide options within their desired price range. They also emphasized the importance of diverse and relevant product suggestions, taking into account their personal style and preferences.
Participants expressed the need for enhanced customization options within the AI-powered shopping experience. They desired more control over the prompts given to the AI system, allowing them to fine-tune and specify their requirements, ensuring more accurate and tailored recommendations.
Affinity Mapping
View Mapping
02
Analyze
I recruited 4 people for my initial user interviews, and 21 for a Google Poll, all of which are in my peer group. I had some hypotheses and preconceptions going into the interviews, but I also learned new information that influenced my designs.
User interviews and surveys revealed that users appreciate the convenience and time-saving benefits of AI-powered recommendations in the online shopping app. They expressed satisfaction with the personalized product suggestions that align with their preferences and style.
Participants highlighted the importance of clear and intuitive navigation within the app. They emphasized the need for easy access to AI search features and seamless integration of AI recommendations throughout the browsing and selection process.
Feedback from users also highlighted the significance of trust and accuracy in AI recommendations. Participants expressed the desire for transparent and reliable algorithms that understand their preferences accurately, as well as the ability to provide feedback and improve the accuracy of future recommendations.
Interview & Survey Analysis
70%
55%
have never used AI in on online shopping experience, (or are not sure)
have encountered personalized recommendations and chatbot assistance when shopping online
expressed that hey have used AI before
90%
65%
expressed they are likely to use AI when an option in online shopping
Figma
Google Forms
Vowel
Maze
My Role
Timeline
May 2023 - June 2023 (80 Hours)
Tools Used
Shopping online is still flawed. Consumers are overwhelmed with product selection, inaccurate search results, fit and sizing issues, lack of personalization, and limited visual understanding. By solving these problems, retailers can enhance the overall shopping experience, increase customer satisfaction, and foster stronger relationships with their consumers.
We want to understand user needs and pain points in their online shopping experience and then create an end-to-end AI shopping experience for the apparel retail industry.
The Problem
Project Goals
01
Research
Background
Artificial Intelligence is set to revolutionize the retail industry, offering consumers a highly immersive and personalized shopping experience. By leveraging AI technologies, retailers can answer detailed prompts with products that enable consumers to find clothing items that match their specific preferences.
AI-powered search engines will enable consumers to provide detailed prompts when searching for clothing items. Rather than relying on broad keywords, consumers can input specific attributes such as body type, occasion, weather, and personal style in addition to color, fabric, pattern, neckline, sleeve length, and more. AI algorithms will analyze these prompts and deliver accurate search results, presenting consumers with a refined selection of clothing items that align with their desired specifications.
Research Goals
Client:
Increase Conversion Rates: Improve conversion rates by providing a personalized and immersive shopping experience, resulting in higher sales and revenue.
Enhance Customer Engagement: Boost customer engagement by supporting detailed prompts that cater to individual preferences, increasing the time spent on their platform and fostering a sense of loyalty.
User:
Find Relevant Clothing Items: Users want to discover clothing items that align with their specific preferences, allowing them to express their individual style and themselves.
Make Informed Purchasing Decisions: Users aim to have access to accurate, detailed information, and recommendations based on their prompts.
Methodologies
Competitive Analysis: A competitive analysis will be conducted to identify best practices for customization features in video conferencing platforms and inform the design of the customization menu.
User Interviews and Surveys: Interviews and Surveys will be conducted to gather insights into the specific tools users need most frequently during video calls and how they would like to customize their toolbar.
I researched the top (5) competitors in the marketplace for similar travel/visa services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis)
Interview Debrief
In order to better empathize with users, I conducted user interviews to learn their perspective and get a better understanding of thier motivations and pain points around shopping online and using AI
User Interviews
Method
Particpants
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recored interviews for 4 participants
Organized notes to generate an actionable interview debrief
4 participants
Age: 27-43
2 Females & 2 Males
Various degrees of desire and experiences shopping online
Emily and Ava are familiar with AI shopping experiences, while Carlos and Peter have limited experience or knowledge about AI in the context of apparel shopping. Both Emily and Ava express overall satisfaction with AI shopping, highlighting the value of personalized recommendations and features like virtual try-on. However, Carlos and Peter's perspectives on satisfaction and engagement are not explored in detail. Emily and Carlos demonstrate trust in the accuracy of AI recommendations, while Peter's trust in AI suggestions is uncertain.Emily's decision-making factors and considerations are not explored, but Ava likely prioritizes fashion trends and industry knowledge as a fashion buyer. Carlos and Peter's motivations for selecting clothing items are not discussed. Emily mentions occasional mismatches in AI recommendations, but no specific challenges or reservations are mentioned by Carlos, Ava, or Peter.
Key Finding
User & Task Flows
View User + Task Flow
To create the user flows and task flows for the AI online shopping app feature, I analyzed the user journey from start to finish. Through extensive research, usability testing, and feedback collection, I gained insights into user preferences and pain points, which guided the development of intuitive and efficient flows.
The user flows were crafted to ensure a seamless browsing and product selection experience. By mapping out the steps involved in searching for specific items, exploring AI-powered recommendations, and adding products to the cart, users can easily navigate the app and find what they're looking for.
Task flows were designed to streamline specific actions and interactions within the app. By breaking down complex processes such as browsing, selecting products, receiving AI recommendations, and seeking chatbot support into step-by-step tasks, users can complete their goals with clarity and minimal confusion. The flows were iteratively refined based on user feedback to optimize the user experience.
Lo-Fi Wireframes
To shape the low-fidelity wireframes for the AI online shopping app feature, I began by sketching out the basic layout and structure of the app. This allowed me to quickly iterate and explore different design ideas, ensuring a solid foundation for the wireframe creation process.
Next, I translated the sketches into digital wireframes using design tools. These low-fidelity wireframes focused on representing the essential elements and functionality of the app, without getting into intricate visual details. This allowed me to prioritize the overall user flow, information hierarchy, and key interactions.
View Lo-Fi
Mid-Fi Wireframes
Building upon the foundation of the low-fidelity wireframes, I progressed to the development of mid-fidelity wireframes for the AI online shopping app feature. These wireframes aimed to strike a balance between visual aesthetics and functional representation, providing a clearer and more detailed depiction of the app's user interface.
View Mid-Fi
.To create the mid-fidelity wireframes, I focused on refining the visual elements, typography, and color scheme. This helped to establish a cohesive and visually appealing design language that aligned with the app's brand identity. I also incorporated more specific content and information, showcasing the various AI-powered features and interactions within the app.
Throughout the creation of the mid-fidelity wireframes, I continued to gather feedback from user testing sessions and design reviews. This iterative process allowed me to address any usability issues or areas of confusion, ensuring that the wireframes provided an intuitive and seamless user experience. By incorporating user feedback and iterating on the mid-fidelity wireframes, I was able to refine the design and prepare it for the next stage of development.
Hi-Fi Wireframes
View Hi-Fi
To bring the AI online shopping app feature to life, I focused on creating high-fidelity wireframes that captured the intricate details and visual aesthetics of the final product. Through a steady design process, I transformed the low-fidelity wireframes into polished, pixel-perfect representations of the app's user interface.
The creation of high-fidelity wireframes involved refining the visual elements, such as colors, typography, and imagery, to align with the app's branding and create a visually engaging experience. I paid careful attention to the placement and alignment of UI components, ensuring a seamless and intuitive flow for users as they interacted with the app.
I considered various device sizes and resolutions to ensure responsiveness and adaptability across different platforms. The high-fidelity wireframes served as a blueprint for the development team, guiding them in bringing the envisioned AI online shopping app feature to reality. These high-fidelity wireframes served as a bridge between the design and development phases, laying the foundation for the final implementation of the AI online shopping app feature.
Prototypes
Task Flows:
Mobile Flow - Navigate to the AI Search and add the Black Basic Stüssy Tee to your bag, and proceed to check out
View Prototype
With a clear vision in mind, I began transforming the high-fidelity wireframes into an interactive prototype for the AI online shopping app feature.I crafted each screen, ensuring that the app's functionality and user experience were accurately represented.
Iterating through multiple design iterations, I fine-tuned the prototype, refining the user flows and interactions to create a seamless and intuitive experience. I simulated the AI-powered features, allowing users to engage with personalized recommendations and explore the app's advanced capabilities firsthand.
Collaborating closely with stakeholders, I conducted rigorous testing and gathered valuable feedback from users to refine the prototype further. This iterative process allowed me to identify and address any usability issues, ensuring that the final prototype was optimized for a delightful user experience.
Usability Testing
05
Test
Task Flows:
Mobile Flow - Navigate to the AI Search and add the Black Basic Stüssy Tee to your bag, and proceed to check outTask 2 - Please change your Toolbar from a video call
To determine the success of my design, I recruited 15 participants and conducted usability tests through Maze. Each participant went through the MVP flow and were tested on their ability to complete them.
The success of each task given was based on 3 metrics:
Difficulty
Likelihood of use
Results:
Mobile Flow:
0% - Direct success
11.1% - Mission unfinished
56.5% - Misclick rate
102.8s - Avg Duration
Heat map of Flow 1 - Clear User Flow to Toolbar
Revisions:
Consider removing elements that may cause confusion, such as arrows or buttons that imply navigation to another page.
Provide a brief overview or tutorial at the beginning to help users understand how to navigate and interact with the prototype effectively.
Consider adding tooltips or brief explanations to guide users on how to use the AI chat feature effectively.
Next Steps:
Enhance the clarity of actions and interactions within the prototype to improve user understanding and reduce confusion.
Address technical issues such as the keyboard not appearing correctly for text input.
Consider providing additional instructions or limitations for the prototype to guide users and set clear expectations.
Key Findings:
Participants generally found the prototype easy to navigate, with a mix of ratings ranging from 3 to 5.
While most participants were able to complete tasks with minor confusion or difficulty, some encountered issues and expressed the need for clearer actions and interactions.
The overall usability of the prototype received positive ratings, with the majority giving it 4 or 5 stars.
Final Design
Mobile Flow - MVP
Key Takeaways
Participants appreciated the concept of AI-powered suggestions and found the design and interactive components visually appealing.
The distinction between different prompts and actions could be clearer, and participants expressed the need for better differentiation.
Some participants suggested having search prompts and results displayed on the same screen, and improvements to the AI chat feature's discoverability.
Glitches and technical issues impacted the user experience, emphasizing the need for refinement and testing.
Overall, the usability test revealed valuable insights into areas that require improvement in terms of clarity, functionality, and user guidance. Incorporating the feedback and addressing the identified issues will enhance the app's usability and ensure a more seamless and intuitive shopping experience for users.
Survey Debrief
In order to better empathize with users, I conducted user interviews to learn their perspective and get a better understanding of thier motivations and pain points around traveling and obtaining a visa.
User Survey
Method
Particpants
Created a Google form to ask 19 multiple choice/open ended questions
Organized notes to generate an actionable interview debrief and guide wireframes
21 participants
Various degrees of desire and experiences shopping online
Personalized recommendations and chatbot assistance are the most commonly encountered AI features while shopping for apparel online.
Respondents have mixed opinions regarding the effectiveness of AI recommendations in understanding their preferences and style.
AI recommendations have influenced the purchase decisions of a significant portion of respondents.
There is a range of satisfaction levels regarding the impact of AI features on user engagement with the shopping experience.
Overall, respondents have a neutral satisfaction level with the impact of AI on their apparel shopping experience.
Key Finding
04
Design
Competitive Analysis
I researched the top (5) competitors in the marketplace for similar online shopping experiences that leverage AI in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis). This helped me identify any missing features that I could add to my MVP app and can address any potential design patterns to adopt or avoid.
View SWOT Analysis
I conducted an extensive comparative analysis of various AI-powered online shopping apps, examining their features, functionalities, and user experiences. This exploration provided valuable insights that shaped the development of my own app.
I focused on analyzing how different platforms utilized AI-driven recommendations. By assessing their accuracy, relevance, and adaptability to individual preferences, I gained a deep understanding of what makes a recommendation engine effective and engaging for users.
Another area of investigation was customer support features. I evaluated the responsiveness and effectiveness of AI chatbots as well as human-assisted interactions, aiming to create a seamless and supportive shopping experience that combines the efficiency of AI with the personal touch of human assistance.
UI Library
As I continued further into the design process for the AI online shopping app feature, I recognized the need for a robust and consistent UI library to maintain a cohesive visual identity across the app. To achieve this, I embarked on creating a comprehensive UI library that encompassed all the necessary design elements and components.
The process of developing the UI library involved crafting reusable UI components such as buttons, forms, cards, navigation elements, and typography styles. I focused on ensuring consistency in color schemes, typography, spacing, and visual hierarchy to create a visually pleasing and intuitive user interface.
To expedite the design and development process, I utilized design tools like Material Designs that enabled me to create and maintain a centralized UI library. This approach allowed for efficient collaboration ensuring seamless implementation of the design and maintaining consistency throughout the app.
By investing time and effort in developing a comprehensive UI library, I was able to streamline the design process, maintain visual consistency, and provide a solid foundation for the UI elements used throughout the AI online shopping app feature.
The AI online shopping app, Ai.telier, revolutionizes the way users discover and purchase apparel by leveraging the power of artificial intelligence. With advanced algorithms and machine learning, the app analyzes user preferences, style, and past purchases to provide highly personalized and accurate product recommendations.
Seamlessly integrated into the shopping experience, the AI feature assists users in making informed decisions by suggesting complementary items, alternative styles, and even complete outfits based on their individual tastes. It takes the guesswork out of online shopping, saving users time and effort while enhancing their overall satisfaction.
Through intelligent chatbot interactions, the AI feature offers personalized assistance and guidance throughout the shopping journey. Users can engage in natural language conversations, ask for recommendations, inquire about product details, and receive real-time support, creating a more interactive and tailored experience. With this AI-powered app feature, users can enjoy a more personalized, efficient, and enjoyable online shopping experience.
Key Screens
Let's work
together.