iOS & Android Native App
Project Brief
I led design and research initiatives for an e-commerce food app, including experience strategy, prototyping, and visual designs. This helped the company achieve 85% higher CVR than the web platform and reach 21% revenue from the app in the first year of launch.
Responsibilities
Experience Strategy, User Research, UI Design, Wireframe, Ideation, Journey Mapping
Tools
Figma, Adobe XD, Illustrator, JIRA, Mural, Sketching
It was still early days for the launch, but the results definitely exceeded expectations. Within the first year of launch, the app was generating 21% of the total revenue. At the beginning of 2023, the app had 900+ reviews with 4.9 average ratings on the Apple Store.
Higher Conversion
Rate than Web
Platform
Increase in Repeat
Customer Buying
Frequency
Introduction
Yummy Bazaar is a food e-commerce startup that aims to provide gourmet and nostalgic food from all over the world. In 2019, Yummy Bazaar introduced its free native iOS and Android app for customers across the US. Before the launch, the company was facing customer retention and discovery issues due to the limitations of the web browser capabilities. This is the story of how I delivered the iOS and Android app to make the customers' shopping experience intuitive and fun.
My Role
As the founding user experience designer on the project, I was responsible for the experience strategy and app design. I led the whole UX journey from discovery to final design deliverables delivering the minimum viable product for iOS and Android. I led the charge in improving the service by integrating crucial functionalities and addressing customer concerns through user research and gathering data. I worked alongside a senior technical product manager, CTO, and company co-founders to define and deliver the app.
The Challenge
— LAUNCH MVP IN 3 MONTHS
We approached the app design with two main objectives — to launch a functional app before Q4 2019 before any of the competitors could launch it and to improve customer engagement and retention rates.
Due to significant time constraints, the team faced immense pressure to work swiftly. Our objective was to submit the first functional version to the App Store before Q4 2019. The combination of an aggressive deadline, usability testing, and performance testing meant we needed to prioritize and execute the experience and interaction design as early as possible to leave ample time to implement and iterate the product.
Frustrated Shoppers
Based on the data at hand, we discovered that mobile devices account for a significant 70% of the total YB traffic. However, the conversion rate on mobile falls significantly short of that on the web, not even reaching half of it. Additionally, the bounce rate on mobile devices is three times higher compared to desktops.
The Approach
— FAST, CHEAP, & USABLE
As a startup with limited resources, we were tasked to design and build Yummy Bazaar's shopping app within the existing website architecture which came in handy to deliver faster and cheaper. From the start, our focus was on a functional and reliable app to gain the trust of new and existing customers.
In order to stand out in a saturated and highly competitive market, it was crucial for us to establish a distinct and appealing purpose for the app, one that would effectively address the needs of the target audience. The prospect of crafting something of greater significance filled us with excitement and anticipation.
Based on the data at hand, we discovered that mobile devices account for a significant 70% of the total YB traffic. However, the conversion rate on mobile falls significantly short of that on the web, not even reaching half of it. Additionally, the bounce rate on mobile devices is three times higher compared to desktops.
Collaborate with Lean UX
With the tight deadline, the team decided to approach the Lean UX approach that included rapid wireframes, prototyping, and visual designs. This created early team collaboration, and a sense of ownership from team leads, and generated great ideas from everyone involved.
Leverage existing Infrastructure
To make things move fast, we leveraged our existing web information architecture and built upon that. This gave us a skeleton to build our app and helped us cruise the ideation and brainstorming phase with greater buy-in from the team and stakeholders.
Shooting for transparency inside out
Working with the stakeholders and team closely in a small team gave us the opportunity to share our vision for the app. Early buy-in from everyone and shared progress created transparency within the team and the goal for us was to radiate transparency to our customers as well with a functional and unique product.
The Discovery
— UNDERSTANDING OUR CUSTOMERS
The initial discovery phase proved to be a rapid and intense endeavor, enabling us to establish project milestones, conduct an audit of existing work, analyze the competitive landscape, comprehend our vision, and initiate research into user needs, behaviors, and pain points. In parallel, we initiated a technical discovery phase to evaluate the feasibility and identify potential technical limitations.
Through our research, we uncovered that shopping for food from around the world has varying meanings for users. Their motivations for shopping and exploring the platform differed, indicating distinct requirements.
By identifying and aligning persona types with our strategy, we successfully determined the primary focus during the early stages. In Phase 1, our app was designed to cater to the goals of Christel, our primary persona. Later phases were planned to accommodate the needs of Jenny, Masako & Vincent.
Throughout the project, personas served as constant guides for our design decisions, and priorities, fostering empathy among the team. Our persona hypothesis consisted of 4 different types of users which we used to drive discussions regarding the needs, desires, and context of use among our users. By conducting a thorough analysis of our research findings, we successfully identified significant behavioral variables that allowed us to segment our user audience effectively. These variables encompassed various aspects, including shopping frequency, shopping confidence levels, and motivations behind food shopping online. Collaboratively, the team discussed these personas in detail to establish a clear vision of the target audience for the app's design in Phase 1 and later releases.
User Empathy
With the time crunch, we had limited time to conduct our research and collect qualitative and quantitative data. Thanks to our online customer base and in-house stakeholder and co-team members, we conducted a range of interviews to understand the pain points and environment workflows.
We also tried to find shoppers' behavior in the food aisle of the brick-and-mortar grocery shops. Replicating product discovery from the physical world helped us gain perspective on the broader customer journey.
Customer Journey Touchpoint
We used experience journey mapping with multiple user personas to visualize customers' end-to-end journeys across various touchpoints. This led us to focus on users' pain points and emotional journeys to design an aspirational emotional journey for our customers.
The Vision
Our vision for Yummy was to provide the best-in-class service and high value-added gourmet food marketplace for customers looking for affordable and authentic food from around the world.
With currently over 10,000 products from 18 different regions, we wanted to carry a broader category of food from all parts of the world accessible to anyone living in the US. We focused on helping customers discover food products they love without having to travel to another country.
Our customers trust us to help them find inaccessible food with the best value. We envisioned the future of food shopping to be highly personalized to the customer's taste preferences.
Our Teams Values
Design for the customer
at all stages
Always take into account the entire customer lifecycle. Unaware, seasoned, first-time, curious, and loyal, and evolve with their preferences and experiences.
Pixel perfect details matters, go the extra mile.
Delightful details, clear messaging, and micro-interactions build trust with the customers. By prioritizing the product experience, we have the opportunity to become the best in our industry.
Do all the heavy lifting for
the customer.
Provide intuitable defaults and make sensible decisions that respect customers' time, data, and attention. Design for what's most important, not all interactions are created equal
Build for performance
Performance is the key customer experience killer. A product is not worth the time and energy if it takes too much time to load. A flawless experience won't matter if a customer's screen is loading for 10 seconds.
Build, learn & iterate
Start small, and test different ways of doing things. Make prototypes to improve your understanding and understand customer pain points. Test and refine.
Be transparent in your
design decisions
Have confidence in your solutions, and be vocal about the decisions you have made. Share your work, it gives opportunities to communicate your ideas and take others' ideas too.
The Requirements
— DESIGNING FOR WHAT USERS WANT
Thinking about the emotional journey early on gave us a better understanding of the importance of user requirements and aesthetics. We knew this could be the difference between delivering a good vs a great experience.
We based our requirements on the findings we have from early research, journey mapping, and triangulating different gathered data to form decisions on what users really want and prioritize that on the first version of the app. Below are some of the vital requirements our customers care about.
Product Selection
One advantage Yummy has over others in the food industry is the product selection, the primary customer segment does cross-shop a lot.
Build Cart Overtime
Customers build their shopping carts over time using multiple devices at different times of the day, so maintaining the cart was important.
Rewards to Shop
Loyal customer segments were utilizing reward benefits, new and most repeating customers were not aware of the rewards program at all.
Regional Shoppers
With 1000+ products added every quarter, product discovery was getting more complex for customers looking for specific products.
Order History & Favs
90% of customers who have 10+ items in their order, come back to buy the same product later and were looking for easier ways to do it.
Perishable Spoilage
As a food e-commerce, Yummy very often gets customer complaints and returns as products sit on their porch for hours under the sun, a robust tracing would be very helpful.
The Framework
— DESIGN DIRECTION
The size of this project and the resource constraints with the agile workflow meant I had to be a few steps ahead of the project to make sure I had enough time to figure out the issues when they arose. Many cross-functional teams involved in the project means documents need to be well organized and everyone has access to review and questions.
For each feature phase, I went through cycles of requirements, approvals, detailed specs, and handoffs. My process involved sketching and whiteboarding concepts and flows with my CEO, CFO, and other team members and then translating them into low-fidelity designs. Since this was the first real design project, wireframing, and low-fidelity mockups gave us the flexibility to make changes very early in the design phase and move forward quickly with high confidence.
Building on the existing information framework
To expedite the design process and facilitate stakeholder buy-in, we initially leveraged our existing web framework as the foundation for our app design. By following the established information structure, we aimed to streamline the development process and align with familiar patterns. This approach allowed us to quickly iterate on the design and gather feedback from stakeholders, ensuring their involvement and support throughout the app's development.
Experience framework
I proceeded to outline the primary pathways that our personas would navigate within the app. Creating multiple user journeys for each persona proved invaluable in conceptualizing the intended content and functionality. I also took into consideration specific usage contexts and explored how interface elements could effectively support the user in those contexts.
To facilitate the design process and communicate intricate interactions and flows, I utilized customer storyboarding techniques. Storyboarding served as an effective tool for visualizing and conveying the design concepts, ensuring clarity and alignment in the overall design direction.
Design framework
By employing information architecture frameworks and utilizing storyboarding techniques, we successfully maintained focus on the research findings and effectively addressed the identified issues. This allowed us to progress into the design phase, where we began creating UI sketches, defining functional elements, and outlining interactive behaviors. The rapid sketching and prototyping approach proved immensely beneficial, enabling us to save valuable time and proceed with confidence. Moreover, it ensured that all stakeholders were actively involved and aligned with the design direction, fostering a collaborative and cohesive design process.
Prototyping was the most effective way to gain buying and getting feedback from the team including the stakeholders and customers. I used Adobe XD to wireframe and prototype during the early sessions.
Interaction Framework
I used Adobe XD to build interactions and prototypes to communicate the final designs to the stakeholders and development team. The tool came with pros and cons at that time, the prototypes were highly interactive and customizable but we also needed heavy documentation to explain bits and pieces of the puzzle. Feature logistics and micro-interactions were categorized into different buckets to make the development easier and we used Adobes XD collaboration tools to coordinate cosmetic interactions.
Adobe XD enables designers to quickly create interactive prototypes with its robust set of features. The ability to link artboards, define interactions, and create transitions facilitates the rapid exploration and validation of design concepts.
Adobe XD provided various options for testing and sharing prototypes. We previewed and tested prototypes on desktop, mobile devices, or even via a web browser which made it easier to get everyone's buy-in on designs and fix issues early in the design and testing phase.
Detailed Design
— BRINGING IT ALL TO LIFE
On September 21st, 2019, we began rolling out the Yummy Bazaar app on iOS and Android devices. The launch went off smoothly—an incredible achievement considering the scale and complexity of the deployment.
While we were relieved with the launch, the team kept a close eye on analytics and system crashes. There were some small issues with some dated phones that created some crashes on the go. As they were minor and only affected 1% of the audience we focused on user complaints and reviews as well.
Easier Order Tracking
Order tracking enabled the app to send automated notifications or alerts to users at key stages of the delivery process, such as order confirmation, shipment tracking number, estimated delivery date, and delivery completion. This proactive communication keeps users informed and engaged. We partnered with our shipping partners to give robust delivery details to our customers.
Easy Rewards Usage
In our later stage, we implemented a whole new points-based system where customers earn points for every purchase they make. Accumulated points can then be redeemed for discounts, freebies, exclusive products, or other rewards. Make it easy for customers to track their points within the app.
These helped us market the app through our loyal customers who leveraged our referral program to earn more points and benefits.
Combining Search & Navigation
We tried to combine Search and Navigation in the best way possible with the time constraint. From initial research and available data, we knew users use search and navigation equally to discover products. We added additional functionalities to make browsing easier.
The Refinement
— TESTING OUR ASSUMPTIONS
Once the team had the MVP ready for use, we knew we needed to put it in the hands of our customers.
1 month before the hard launch we doubled down on validating our design decisions. The top risks in the product were:
Better search experience
Confusing "Free Shipping" bar on the Cart page
Hard time adding Freebies to the Cart
Some of the issues we found during this testing phase were also the issues we had with the stakeholder's testing.
We knew we didn't have time to perfect all the issues before the launch, for example- the search needed a whole different infrastructure that we addressed after the launch. We were able to address all the other issues that we found during this testing period.
The team also focused on performance during the testing phase and optimized several key elements. As a team, we set up several benchmarks for several key pages with the most traffic and optimized the page size and structure.
Better Search Experience
We adapted the search we had in our existing web infrastructure. As mobile real estate is much limited, the additional filter features were not very clear. We tried to address these by implementing a better filter entry point but that did not address 100% of the issue.
We needed a better search integration, so the team quickly turned to address the tags and discovery issues within the existing infrastructure for the launch but also started planning for a next phase launch with a better scalable search integration for all platforms including the web.
“the search is buggy and doesnt find everything.”
—Anonymous Early Tester
Confusing Free Shipping bar on Cart page
The free shipping calculation bar was not accurate with the subtotal in the cart and had some testers confused with the remaining $dollar value it was showing. This gave us the opportunity to address this in a better way, where not only did we fix the issue with the calculation and confusing value, but we also added this to our internal system for a flexible free shipping value that can be easily updated with the business needs.
Hard time adding Freebies to Cart
Freebies are a key factor for repeat customers when they want to checkout and place their orders. We had a place on the homepage where customers could go and see the available freebies. It was not very obvious as customers are usually on the cart page when they decide to place their order and adding extra steps to adding freebies was not worth the time.
To address this problem, we added a freebie section directly on the homepage and our internal team can adjust the number of freebies available. As the freebies were free, there was no heavy backend support needed to make the improvements.
The Imapct
It was still early days for the launch, but the results definitely exceeded expectations. Within the first year of launch, the app was generating 21% of the total revenue. At the beginning of 2023, the app had 900+ reviews with 4.9 average ratings on the Apple Store.
Testimonials
iPhone App User ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
Finally I can save my favorites so I don’t drive myself crazy when I find something and cannot save (site not set up for that). The insanity lies in the user friendly ease. Honestly, there are apps that are not this easy to follow or flow with such efficiency. 6 stars as far as I am concerned. Thank you Yummy...you Rock!
Android App User
I love this app! I love all the international foods, especially some that are hard to get in the US; shipping & packing are always great. And whenever possible I take advantage of the free gifts which are offered via email: these are not small samples but full size items to try. Hopefully YB will continue to add new foods and hard to find items. 🙂
Android App User
Yummy is well stocked with international foods and they delivered as promised. Exceptional packing with effort made on glass items. Easy to nav. APP. It's a keeper.
iPhone App User
WHY ISNT THIS APP EDITORS CHOICE?
This app is my go-to when I crave international foods, and they ship UNBELIEVABLY fast. The only downside I’ve encountered with this app is not all their snacks are sold before their sell by date, meaning a few are days or even months expired— but their customer service team is splendid and always helps out with my complaints.
LOVE THIS APP.
iPhone App User
The app is easy to use and the food is wonderful. Have not found another that is better. Fun to give gifts from around the world
Android App User
I love this app and I love Yümmy Bazaar ❤️ They have an awesome selection and everything from ordering to the delivery works flawless. And also an amazing customer service. Couldn't be happier.
Android App User
This app is so easy and responsive its just awesome! I usually built my cart when I have to replenish my pantry or whenever I crave for quality snacks, the fact that I can just pickup my phone and search for a products and add it to my favorites make it even more useful. Kudos to the YB team thinking about their customer needs!
Android App User
I highly recommend having this app in order to buy your favorite Foreign Foods at Yummy Bazaar. 😊 😊 The app really does make the payment process really fast compared to the website. 😊 The website is good too, but this app is quicker for me on my LG V20. 😊 😊
iPhone App User
Its my first time buying in this app and im so happy i got my food fast and super secured inside the box... Thank You... Ill keep getting food from here...
Reflections
Communicating Design to Non-Tech Stakeholders
Effective communication is critical when it comes to conveying design ideas to non-technical stakeholders. It is essential to have a clear understanding of the audience and adjust the communication strategy accordingly. Using plain language, visual aids, and analogies can help explain design concepts in a way that non-technical people can understand. It is also important to focus on the benefits and outcomes of the design rather than getting bogged down in technical details. When designers can effectively communicate with non-technical stakeholders, it can lead to better collaboration, buy-in, and ultimately better outcomes.
Documentation for Trust in Design Projects
Documentation is an essential aspect of design projects, regardless of how fast-paced they are. Documentation provides a clear record of decisions, changes, and project progress. It also enables teams to build trust with each other and establish a shared understanding of the project. When documentation is organized and up-to-date, it can save time and reduce confusion when making decisions or addressing questions. Whether the project is agile or more traditional, documentation is crucial to keep everyone on the same page.
Design Library for Productivity
Building a design library is crucial for productivity, particularly for teams working on multiple projects. A design library serves as a centralized repository for design assets, guidelines, and best practices. It provides designers with quick access to commonly used design elements, reducing the need to recreate assets from scratch. It also ensures consistency in design across projects, which helps to build a brand identity. With a design library in place, teams can focus on designing rather than searching for assets, resulting in faster project completion and increased productivity.