We are an international group of 3 UX designers formed as a team for the UX Design Challenge 2023, hosted by Iterate UX.
We had 4 weeks to design an app that provides seamless shipping experience by integrating multiple e-commerce platforms into one interface. Users can search for products, compare prices and make purchases without switching between different apps or websites.
We were required to follow the design process and come up with a design for a digital tool that solves problems for our users and makes their lives better.
Based on our research, we realized there is a need for a trustworthy service that simplifies online grocery shopping. That is how Urban Basket was born.
Urban Basket is an app that lets users combine their grocery shopping from a variety of local supermarkets, pay once and receive their items in one convenient delivery.
While researching the online groceries shopping segment, we gathered a lot of data on the market and the habits of customers. Our research concludes there’s been a rise in demand for online groceries shopping with new habits developing since the pandemic. Also, customers shop in multiple stores online because they can find better bargains, get access to bigger inventory and ensure they receive fresh food.
To gather more data, we conducted a survey with 34 participants aged 18-54 from all over the world. Our survey shows there’s a high demand for online grocery shopping among the selected age group as well as demand for a centralized platform that allows customers to shop at more than one store at once.
Participants prefer as few deliveries as possible and showed some concern for how excessive packaging and carbon footprint affect the environment.
Participants prefer the variety of online stores and the discounts that come with this market.
Participants enjoy being able to shop from the convenience of their home, avoid rush hours or take unnecessary health risks.
The convenience of price comparison platforms allows participants to save time and money
To help us define our problem statement, we used affinity mapping to analyze all the data we gathered through interviews and surveys. We realized users are concerned most with price, delivery and sustainability.
I mainly shop online once every 2 weeks.
I maybe visit a physical store once or twice a month.
I shop from multiple supermarkets because of my busy schedule balancing work and taking care of my kids.
I go in-store if I want specific items immediately or want to pick out fresh produce myself.
It's more convenient to buy online given my busy schedule.
Once a week online shopping for biohopper groceries.
Mainly in-store, twice a week
seldom shopping online, around once in two months
Twice a week physical shopping
I buy groceries online once per week, or every two weeks
To the stores I go one per week, maybe twice for fresh produce
Online for special occassions online, bday for eg.
I prefer buying household supplies, and some packaged goods online.
Fresh produce, meat, and bakery items I often prefer in-store.
Pandamart: buying party food like snacks, alcohols and drinks
Biohopper, shopping for fresh produce. Excecption!
I buy online stuff I cannot find in the shops
Online for canned, packed goods
Online for canned, packed goods
Online shopping for non perishable food.
In person I buy fresh produce as online you cannot see it.
I buy things online that I cannot easily find at the physical store.
Different platforms offer different deals, and some have products that others don't.
I think an app that consolidates multiple grocery platforms into one interface would help me save so much time.
It would be nice to compare prices in one single place to ensure I’m getting the best deal.
My online shopping experience has been generally good.
I buy things online that I cannot easily find at the physical store.
Weather could be a factor.
I just go for the platform which has promotions or the cheapest option
Quality over price.
Prioritises price and inventory.
Weather plays a role, rain in Ireland, so reason to order.
Has had health issues, so online shopping has increased and helped her lately.
Online shopping at Biohopper does not take too long, I am used to the platform.
Strives for balance between quality and price.
I’ve had issues in the pasy online shopping by receiving incorrect items or damaged goods.
Having two kids makes in-store shopping more challenging.
the range of products
Prioritises the environment, less shipping, less packaging
Concerned about excess of packaging
You cannot smell or see the product
I prefer using the iPad because the size of the screen allows me to see more products at once.
mobile for light orders (not convenient for long list of items and limited space displaying items); desktop for heavy orders.
I always shop on my phone, on the website.
I would not use an app, but a website
Prefers laptop for bigger screen
Likes the comment section.
detailed tracking feature.
group buying feature.
Does not like the feature to receive a replacement product.
expect I can choose the cheapest option for a product from multiple platforms.
Prioritizes ease of use.
Prioritises nutritional scores and origin of the food.
Does not like click and collect, would not use it.
To better understand the users’ pain points and how we can create a product with better experience, we plotted a journey map, based on a persona profile we created.
To summarize our research and help us focus on the next steps in the design process, we utilized all previous stages to come up with a problem statement and How Might We questions, that will help us establish clear goals for prototyping.
Now that we have a good understanding of the business goals and the users' needs, it's time to draft a few concepts for screens and layouts.
After brainstorming with concepts, we started creating wireframe layouts in Figma. These enabled us to test our ideas without spending too much time on them. We tried to design layouts and flows that adhere to the app's requirements based on our research.
In addition to prototypes, we also developed the logo, brand colors and considered fonts. Our main goal was to convey a comfortable and cheerful experience, yet foster trust in our users.
Once we had our brand, colors and typography ready, we started developing the final design based on our prototypes and wireframes. Our goal was to create a smooth, streamlined experience that appeals to a wide range of audience. We wanted to cater to newcomers and make them feel at home, as well as appeal to tech-savvy users.
Playful bright images are a key element throughout the design. In addition to being visually pleasing, they help gain an emotional connection with the app and provide a unique experience users will not forget soon.
The ZIP code button lets users update their location, which gives them access to the stores in that area.
A large search bar invites users to search for items.
Curated lists show items based on offers by stores in the area and the user’s preferences.
The bottom nav bar provides quick access to the most common sections of the app.
Vibrant and memorable images make it easier for customers to browse quickly and find the items they’re looking for.
For subcategories, a more compact look is used, as there are usually more items to show.
Big search field with minimal interactions.
Last search queries appear below, allowing users to quickly repeat favorite searches. The X buttons conveniently let users remove irrelevant queries.
To further inspire our users, we implemented a list of common search queries, based on overall user behavior. Clicking on these will quickly load the results screen for the corresponding item.
Clear title with the user’s search query.
Filters allow users to quickly eliminate unwanted results, with sorting to show the most relevant results on top.
The search results page employs a minimalistic design approach, ensuring that users are presented with only the most relevant and essential information, enhancing clarity and reducing cognitive overload.
Transition animations facilitate a streamlined user experience by providing visual cues and feedback, guiding users with fluidity and clarity.
The splash screen has a clean, yet energetic design. It displays a short logo reveal animation and a colorful gradient in the background.