Project Overview
While other apps rely on user reviews to provide recommendations, Recs Tonight relies on sources users trust, and provides users with the ability to plan with friends.
Hypothesis
While competitor location-based recommendation apps rely on user reviews to provide recommedation information, I’m looking to prove that users 20-40 years old do not rely on user reviews and photos as much as recommendations from other sources (magazines, articles, shows, social media).
I’m looking to prove that users are highly influenced by what they watch and read from resources they trust more user reviews, and are looking for an app where they can find and save recommendations from all these sources in one place.
Competitor Analysis
By researching the strengths, weaknesses, opportunities, and threats (SWOT) of competitor location-based recommendation applications, such as Google Maps and Foursquare, I was able to learn the goals and frustrations of users with similar applications. This informed me with creating a design solution that is relative, and gives me a competitive advantage to what’s on the market.
User Research
I conducted user research within my target user age range of 20-40 year olds. I created a set of open-ended questions to learn their frustrations with competitor location-based recommendation apps, as well as what they wished they could find in an app.
Their feedback was vital in validating and invalidating my initial design solutions, so I could adjust my design to a product the target age user needed.
My initial design solution was to not include User Reviews at all, and although users validated that they sought recommendations outside of User Reviews on such competitor location-based apps such as Google Maps, they said that they liked to still refer to User Reviews, so User Reviews was a feature I included in the design.
At this point, based on User Research, there was a need from users for a recommendation app that included a trip planning feature, my design pivoted to include this as a key feature. I knew this was a feature offered in Google Maps, but it was hard enough to find, that users weren’t using it.
I would highlight and guide users to this feature, but using higher color and typography hierarchy in the UI Design.
User Personas
From my user research, I created three user personas to encompass the range of users with their frustrations and goals. This gave me the ability to better empathize with my target user audience to design a product that they are looking for.
MVP: Jobs to be done and features
When looking for travel recommendations, I want to be able to save my all my recommendations in one place, so I can refer to them on my trip. Feature: save
When I’m planning a trip, I want to be able to share my saved recommendations with friends I’ll be traveling with so they can add to the itinerary. Features: share, edit, synced city guides
When I find a recommendation in a magazine that I want to save for my trip, I want to be able to find and save it in the app. Features: search, save
High Fidelity Wireframes: Mobile
The final design is completely user-centered based on User Research and User Personas.
The Home screen features a For You section, and suggested recommendations based on a user’s Search History and Preferences to help users accomplish their goals quickly and without frustration.
A Map View option is available on the Search screen and saved City Guides, so users can visually see which results are nearest to them. A Map is featured on the design for a Specific Recommendation screen, so users can navigate to the place on the app from their mobile device.
On their profile, users can view their City Guides, and plan with their friends by viewing their Synced Guides, or clicking Share Guide to invite their friends to plan with them.
The High Fidelity Wireframes for the final UI Design incorporate UI Best Practices from Nielsen - Molich's Ten Usability Heuristics for User Interface Design, such as:
User control and freedom by allowing users to create and sync City Guides with their friends.
Aesthetic and minimal design by not cluttering the design with anything that would compete with the user’s attention from completing their goals.
High Fidelity Wireframe: Desktop
The design was then made responsive. The large breakpoint examples how the adjustments made customized the design perfectly to this breakpoint.
Responsive Design
Each breakpoint is specifically designed for its size: here the desktop and mobile designs for the Search screen are exampled.
Retrospective
What Went Well:
My design concept for this app is one that I would really find helpful from my frustrations with location-based recommendation apps, and through user testing, I’m confident users would too.
User testing helped validate my design hypothesis, as well as invalidate certain aspects like keeping user reviews, this as well as understanding user goals and frustrations, helped me pivot for a better UX design to give the user an app they are looking for. User testing was key to my final design.
My goal was to provide a modern app my target audience is looking for, and I’m confident that my design offers this solution.
What Can Be Improved:
While designing for smaller breakpoints comes naturally to me, the redesign for the larger breakpoints usually comes with a bit more challenge. I intend to practice designing for larger breakpoints, as well as being intentional to find larger breakpoint designs I like and save for future inspiration.
I was also challenged with finding a color palette that fit the modern style of this brand, as I wanted to be intentional with my target audience in mind. I found inspiration for the color palette from a design I saw one day, so for the future, I intend to look through and look out for inspiration in my daily life, and save these to boards for future designs.