My Role: UX Research & Design
Timeframe: 4 Weeks
Tools Used: Figma, Miro, Photoshop, and Illustrator.
UX Methods: Literature Analysis, Interviews, Online Surveys, Optimal Workshop, Persona Generation, Journey Maps, Usability Testing
To create an intuitive and user-friendly mobile application that enhances the Asian grocery shopping experience by providing robust image recognition features, detailed ingredient information, in-store navigation tools, and community support.
This app aims to help users easily identify and learn about new ingredients, overcome language barriers, and connect with others to share and discover new culinary experiences, ultimately making ethnic grocery shopping more accessible and enjoyable for everyone.
The Asian Grocery App aims to ease access to Asian cuisines and ingredients, making the experience of shopping at Asian supermarkets more inclusive, educational, and enjoyable for users of all backgrounds. By combining smart image-capture technology with a supportive community platform, the app will empower users to explore and embrace the rich diversity of Asian culinary traditions with confidence and enthusiasm.
When I embarked on this project, I realized the importance of educating people about ethnic food ingredients, as many individuals I knew were unfamiliar with them. Through thorough research, I discovered that numerous people faced deeper pain points, including difficulty in identifying and locating specific ingredients, language barriers, and the need for guidance and support during the shopping process.
My research highlighted a preference for apps that facilitate organization and the splitting of payments, aiming to bridge the communication gap between sharing partners. To delve deeper into this gap, I engaged my target audience. Initially, I collected survey data from 20 participants to shape the focus of my subsequent qualitative interviews.
Based on the trends in my affinity map, I noticed that people sought organization and communication when they needed to accomplish a goal (i.e., to pay down expenses).
There needed to be a way to Enable users to scan and identify ingredients through image recognition features to fostering exploration. I identified this area as an area to explore in design.
Connecting to a communit was an important thing for users so an opportunity to create hubs for users to share their culinary experiences and tips, and recipes, would be helpful to help fostern collaboration among users.
I analyzed the collective needs of users and identified that navigating and language barriers while in the store was a common pain point. I sought to implement UI tools aimed at improving navigation, communication, and overall in-store shopping experiences.
I created a persona from my research data to ensure I was human-focused. This helped me focus on answering my users’ needs over features. I focused on addressing Charlotte’s key tasks while keeping her goals in mind.
As an adventurous food enthusiast, I want to explore and gather information about new and exotic ingredients, allowing me to embark on an exciting journey of culinary discovery and experimentation.
As a community-minded individual passionate about ethnic cuisines, I seek to engage with like-minded individuals to share knowledge, experiences, and recipes, fostering a vibrant community of food enthusiasts and expanding my culinary horizons.
As a discerning shopper, I aim navigate through diverse cultural offerings at Asian supermarkets. With language, location, and organization tools, I aspire to enhance my shopping experience to make my culinary adventures more fulfilling and enjoyable.
I focused on Maria’s need for discover and exploration. The first screens were dedicated to setting up the ideal search so that Simpo would instantly provide results from an ingredient scan or search, along with recommended items.
From there, I designed the screens for flows for discovering, which allow users to discover new foods and cuisines, cultural background of food, and community engagement. Flow three allowed user to access tools to and 3, allowing my persona to quickly interact with others through shared content or posts, and in-store tools to help navigate and locate ingredients, and save lists.
I focused on Maria’s need for discovery and learning. The first screens were dedicated to setting up the ideal search so that Simpo would instantly curate results to fit the bill. From there, I designed the screens for flows 2 and 3, allowing my persona to get community insights, discover shared content, and use tools to save lists and navigate through stores.
I conducted two rounds of usability testing with five participants, one in the mid-fidelity stage and one with the visual design in place. Speaking directly with my participants allowed me to test & refine the designs birthed from my research. There were many minor improvements, but I came away with three key iteration focuses.
Testing revealed that the image capturing process needed some work.
1. Ingredient information should not instantly appear across screens to ensure the user can take multiple images.
2. Viewing recently scanned ingredients – to scroll sideways to see all previous ingredients is inefficient and bad UX. I decided to display previous ingredients as a vertical scroll for easy visibility.
Initially, I wanted to have users use tabs to reveal more ingredient information. However, testing showed this to not be as intuitive a design pattern as I had assumed. I did A/B testing with scrolling vs tabs, and testing confirmed that simply scrolling through information was significantly more natural to users. The information fed into a users discovery, with thought given to the hierarchy & order of information displayed.
My participants largely agreed that the map display and the “heart” to favorite ingredients were unclear.
With this feedback, I opted to better match my users’ mental models using popular design patterns.
Once I finished my usability revisions to my prototype and began implementing UI, I reviewed the accessibility standards set by the Web Content Accessibility Guidelines.
Peer Reviews
Conducting peer reviews proved invaluable. During these sessions, participants explained that I was likely not in compliance with WCAG.
Color Contrast
AdjustmentsIt was challenging to keep the UI’s original tone as I focused on meeting an AA rating.
Other Revisions Not Shown
Additionally, I constructed error states for text fields and planned for error correction. I adapted text fields to display their labels as the user completed them.
Due to the project’s time constraints, I had to plan and be mindful of how much time was allocated to each task. I learned the importance of padding extra time between deadlines for wiggle room. Having the flexibility to take more time to drill into usability testing and iterations was key to ensuring a solid MVP.
I organized all of my design elements from the beginning of this project. This was crucial to ensure I could meet quick deadlines and communicate my work to stakeholders in each phase. Additionally, this organization will make for a smooth handoff when I need to pass on my work to other team members.
The search function seemed like a natural tool in a food discovery app. However, the complexity of the diverse range of Asian and ethnic foods made it a challenging feature to implement effectively. Through research and observation, poking around through things was more engaging to the discover aspect. As a result, I prioritized enhancing features that supported this experience. However, if I were to revisit this project, I would dedicate more time to refining the search function as it is also still a vital function for some users.
