Designing a local shopping discovery app — a UX case study
The Task
Design an experience for improving local shopping discovery for travelers. The primary purpose of this solution should be to assist travelers in finding popular places to shop and buying gifts.
Time Limit: 3 Days
Research
Assumptions
Being an avid traveler myself, I could relate to the problem statement. This helped me think about some of my needs and frustrations when it comes to local shopping discovery while traveling.
Validating Assumptions
To further understand the problem, I floated a survey to a group of friends of various ages. Approximately 30 people filled it, and this gave me some additional clarity.
Here are some key insights:
- Age Range: 17–29, Median: 21
- Most travel once every 3–6 months
- 89.7% indulge in local shopping
- People shop for themselves, their family, and then their friends (in that order)
- People buy items like chocolates/local delicacies, clothing, keychains/magnets, figures (in that order)
- People primarily discover local shopping places using word of mouth, trip planning apps (Lonely Planet, Google Trips etc), listicles (“Top 10 Places to Visit in Bali”)
- But one of the most important inferences from the survey was that more than 41% of the sample size said they don’t consider shopping for souvenirs important at all.
This meant that the proposed solution must facilitate an easier local shopping discovery experience, which makes users realize how easy it is to buy something for your loved ones with the right sort of help.
Further, I conducted some telephonic interviews to get additional insight into issues people face during local discovery at unfamiliar places.
After talking to a mix of college students and working professionals, I was able to find patterns in their needs and frustrations, as well as understand some newer issues which hadn’t come out from the survey.
User Personas
Validating the assumptions helped me come up with two main types of user groups which could benefit from such an app.
Adwait is a 21-year-old college graduate who has just started working in a technology firm. This allows him to be able to travel once every 3–6 months on short trips through his new found income. Being well versed with the latest apps, he relies on utilities such as Lonely Planet, Google Trips, Citymapper to help him in exploring new & unfamiliar cities.
His characteristics & needs include:
- Budget Shopper
- Shopping isn’t a priority, his trips are more about the experience
- But he is adaptable and can change his outlook on trips provided the right app helps him shop faster
- Goes on short trips, hence time is of the essence
Kriti is a 28-year-old who recently got married and handles her e-commerce business from home while being a homemaker. She usually travels once a year in her new lifestyle.
Her characteristics & needs include:
- Living in a bungalow with a joint family means she’s always on the lookout for things to take back home for a wide range of people, such as uncles, aunties, nieces, etc.
- Would love an itinerary planning app which helps her shop quickly with intelligent recommendations and pro-tips.
The Solution
The Platform
The proposed solution needs to act as a companion to a user who wants to explore an unfamiliar location. To facilitate this, it’s important that it works while they’re on the go. Hence, I believe it’s smarter to choose mobile as the primary platform for this solution.
Finalizing the Feature Set
- Location Based Recommendations: Real-time search results to ensure the correct information is visible to the user at the right time.
- Shortlist: Ability to shortlist places in advance to aid with better planning & provide a seamless experience.
- Social Validation: Trustworthy reviews & ratings of every location–including what they’re famous for and how much people usually spend there. This will help keep the information up-to-date and add a social element to the app.
- Smart Search using Filters: Using filters to enable power-users to easily sort through a plethora of options and find the right shopping experience for them.
- Third party integrations: Works seamlessly with apps users know and love, such as Google Maps for directions and Uber for commuting.
Information Architecture
The app will consist of three main tabs–Near Me, Shortlist, and Profile. They represent the primary functionalities of the experience.
The Near Me experience can be further nested such as:
Nearby Location Search Results > Filters to refine these results > Particular Shopping Area > Ratings & Reviews, Photos, Specialities, Average spend/Price Range.
Sketches
I moved on to sketching a few basic wireframes to explore some top-level design decisions and user flows. I was pretty much set on using the bottom 3-tabbed navigation because of its reachability and familiarity with users. I ruled out the top tabbed navigation as it’s a better use case when dealing with related & nested views.
Low Fidelity Mockups
With some more clarity, I moved on to designing the low-fidelity mockups in Sketch.
This was one of the most important stages in my exercise, as I took a bunch of design decisions.
Top-Level Views
The home screen is without a doubt the most important view inside the app. In my sketches, having a separate “Search Button” on the navigation seemed like an obvious choice. But as I was exploring options, I realized that the user scenarios point out that this app will be mostly used on-the-go while users are already in the city. Hence, I shifted the location selection flow to the top of the screen and replaced its location on the bottom navigation with “Shortlists”, something that would’ve been hidden inside the Profile tab otherwise.
Filters — FAB vs Tags
This was a tricky decision. The FAB (Floating Action Button) was definitely much easier to reach, but the obviousness of the tag-based approach was hard to pass on. After researching a bit more on the usage of FABs, I realized that they’re better to use for singular & top-level actions–such as composing an email, as compared to filtering. Plus, hiding such an important feature behind a button was bound to impact its interaction rates.
Search Modal
At first, I was drawn towards the left screen. The inclusion of flags, bigger text, and ample spacing seemed like a good solution. But as I spent more time thinking about the possible user journeys when they open the search modal, I realized that I could do better.
Instead of just showing a city, I decided to incorporate recent searches and trending areas around them as well. This would reduce decision fatigue and help reduce friction on this screen.
Detailed Shopping Area Page
One of the main challenges while designing this screen was the “Getting There” block and how much space it should take. Since this screen is pretty happening & long as it is, having a full-width map was just hiding the more helpful blocks such as “What People Buy Here”. One might argue that the user could just scroll a bit to find out more about those sections, but I believe it’s smarter to have the main functionalities of the app right at the top of the screen. This is why I eventually settled on a two-column layout for the “Getting There” block.
All Low-Fi Screens
Flow Diagram
Visual Design
The app uses various weights of Rubik as the font and a color palette focused on one primary color.
High Fidelity Screens
The app uses whites on the surface, with two main shades #FFF and #F8F8F8 being used for backgrounds and action bars. Borders of two greys help these whites better exist as individual entities.
Moving on to one of the most important screens in the app, the detailed shopping area view enables users to really understand what’s going on in a particular locality.
The screen begins with the option to go back to the search results, share this particular area, or shortlist it for later. Users can also swipe to view photos or click the image to be taken into a gallery view.
The next component on screen is the title block, which includes the name of the shopping street, the type of shopping (mall/street/etc), the average rating, serviceable hours, its specialties, and the average amount people spend on shopping in that area.
In comparison to the low fidelity mocks, I moved the location of the “Getting There” block to the bottom and employed the use of a FAB to denote one of the primary actions of the page–reaching the shopping area if you’re nearby.
The screen also includes popular items that people usually buy at a location, along with pictures & some pro-tips. This is followed by the actual “Getting There” block, a few reviews with an option to see more, and ending with a “Similar Locations” block to promote engagement.
The social aspects of the app are in many ways–the backbone of the app. To ensure pro-tips and curation stay relevant, it’s necessary that users are incentivized to share their knowledge with travelers just like them.
Some possible ideas to enable this is by adding a concept of a social ladder and gamifying the experience. Just like Zomato & Google Maps Local Guides, levels of travelers could be introduced. Thus, as you go up the ladder and improve your standing in the community, you become more noticeable to brands and businesses.
For example, a popular user with more than 50 published reviews could be invited for a launch of a new shopping mall in Singapore while he’s there on a trip to blog about his experience.
Intelligent Rich Notifications
Taking a trick of out FourSquare’s playbook, the proposed solution will also include intelligent notifications which are location-based in nature. This would help travelers in finding shopping areas they might’ve otherwise missed due to lack of knowledge.
Project Planning & First Launch
The task also mentioned a timeline of three months under which the app needs to be released live on the market.
While working under such a timeline, it’s important to realize that the level of curation in the proposed solution isn’t possible if the data is directly taken on existing sources such as reviews from TripAdvisor. To ensure that this app truly does serves its purpose, it needs to start small and employ the concept of quality over quantity.
Taking inspiration from Citymapper–I decided to go with the principle of launching in a select few popular travel destinations but doing them really well.
This Solution vs Others in the market
- Focuses on doing fewer places but is better in quality of curation, recommendations etc
- Unique data points such as Average Spend
- Smart Filters which let you select who you’re shopping for, budget range, and more
- Reducing friction by integrating with apps such as Google Maps and Uber
Scope of Improvement
Owing to the concept of Intelligent Notifications as mentioned above, there is an edge case which I haven’t taken care of in this solution.
Often times, we are under time constraints while roaming around an unfamiliar city. In such cases, a metric such as “Average Time Spend” can help travelers decide if exploring a particular shopping area is feasible in their preferred time span. [This was inspired by Medium’s “X min read” feature.]
If you enjoyed reading this article, consider 👏. Follow me on Twitter, check out my portfolio, or get in touch.
