Quest for
the Best
Type:
iOS Mobile Application
Duration:
Nov 2019 | 4 weeks
Role:
Sole UX/UI Designer
Tools Used:
Sketch, Figma, AdobeDraw

Product Brief description

Quest for the Best is a social gaming platform that encourages members of a community to seek out the best available experiences in their area. The underlying objective is to get community members to go outside and seek new experiences through “Quests”. Quest for the Best is seeking a mobile application that is simple and meets their MVP.

MVP overview

• Create the ability to chat with other quest members.

• Create a way for users to view past and current quests.

• Create a dashboard/home feed.
• Create a polls section
• Create a user profile

Research & Discovery

Methods overview

• Competitive Analysis

• Proto-Persona (2)

• User Journey Map (2)

important brief takeaways

The stakeholder sent over a long brief explaining the overall product, what vibe they were aiming for, and their target audience. The following were the main takeaways:

• The product is aiming for a way to bring people together and get outside more often. The users will be able to propose a challenge, and if that challenge is voted on highly by others, it becomes a quest.

• A quest is not limited to a service or good. An example of a “Quest” might be, "who makes the best cheese pizza in New York" or "what is the best park in San Francisco". Quests highlight things that are special and unique.

• Users can suggest a place they think is the best, or a user can go to a suggested location which they will rate afterward. The ratings will then deem which location was the best.

• The target user is an urban-center, professional individual in their early adult life (20 - 40 years).

• Quest for the Best has not established its brand but would like their native mobile application to follow closely to either Material Design or iOS Human Interface Guidelines. Ideally, they want the product to have a native dark mode to give it a gamification feel.

competitive analysis insights

To better understand the purpose and reasoning behind this project, I researched products that offer similar experiences. From my research I couldn't find an exact competitor, so I analyzed social media platforms. I did this because the in-app experience needed to function as a social media platform. The following were the key takeaways I gathered from social media platforms:

• Users interact with the product because they want to interact with their friends. This makes likes, comments, and viewability of what their friends are doing, very important.

• The product needs to be simple, with not too much cognitive overload for the user.

• All platforms followed similar positioning of important features that users access to ensure they easily know how to navigate the platform.

Proto-Persona

My next step moving forward was to create two proto-personas to get myself in the mind of the user. To create these, I researched professional, urban-center individuals in their early adult life. While doing this, I found two different types of users. The following are the two user types I found.

The first user type I found, was a professional, urban-center young adult who is outgoing and wants to do fun things with her friends. She ideally would use this product as a way to go out with her friends and be social.

The second user type I found, was a professional, urban-center young adult who loves going out and doing things, however, prefers doing it alone. This user type enjoys the social aspect online but prefers exploring by themselves. This is user type would mainly use this product to see outdoor scenery.

Journey Map

Now that I had created the proto-personas, the next step was to make customer journey maps for each. This was done to ensure I was getting insights into what our target audience might go through while interacting with the product. During this process, I outlined many insights on each that I found. The following are the two journey maps I created.

The first journey map I created was for the first user type based on Emily Harlow. Emily is more focused on the social gathering aspect with her friends, so I focused on that when creating this journey map. I found multiple insights from the journey map that helped shape the following design decisions.

The next journey map I created was for the second user type based on Derrick Hall. Derrick is mainly focused on the outdoor suggestions from his friends, so I focused on that when creating this journey map.

Ideate & Define

Overview

In this phase of the design process, I started to map out the structure of the product and create sketches for my designs going forward.

Site Map

The first step in the Ideation and Define phase was the create a site map. Doing this first gave me a clear understanding of what elements would be needed on each page I sketch. I decided on a bottom tab bar with five sections that all branch out with other options for the user to take. This was done to ensure users would have the simplest experience, instead of everything being in a hamburger menu.

Sketching

Now that I had a site map planned out, I started to dive into the sketches. I sketched out multiple different layouts and ideas, however, these were the final sketches I chose to move forward with for my designs.

Build & Refine

Overview

In this phase of the design process, I started to create the wireframes from my sketches in the previous phase. I then used those to do usability testing to get insights from potential users.

usability testing

The last step before moving into high fidelity design was to conduct a round of usability testing on the wireframe screens. I first created a screener survey that I then pulled target users from to do a usability test over Zoom. I conducted five different usability tests to ensure that I was able to find as many usability problems as possible. The following were the main pain points I observed:

• Users weren't able to see when a quest was new or not unless they tried to guess by looking at the end date. They wanted an easy way to differentiate new quests from ones they have already seen.

• Users wanted to be able to see what friends were participating in the quests without having to click into each one.

• Users felt the end date on a quest was a little confusing because they would need to know the current date off the top of their heads to figure out how many days until it ends.

High Fidelity Process

Overview

After multiple rounds of user interviews and the other forms of research I did in the 'Discovery' phase, I was ready to finalize the high fidelity designs. During this portion, I had to make some adjustments to the previous designs to reflect the insights I found in the usability testing.

TYPOGRAPHY

Keeping in mind the project brief that mentioned giving the platform some sort of gamification feel to it, I chose Bebas Neue for the page titles. This typeface gives off a bold yet warm feel. It has a tall x-height and is naturally upper-case which gives it a strong hierarchy on the page, but its clean lines and familiarity make it warm to a user. Since upper-case text can be harder for some users to read, I gave it a 6% spacing to ensure easier visibility.

For the body text, I chose Roboto to pair with Bebas Neue. Roboto is an easy to read sans-serif typeface, that is used prominently in multiple platforms. This gives off a familiar feel for users, but the most important reason it was chosen was that is very easy to read and clean.

color palette

After deciding on the typefaces, I moved onto chasing the color palette. I spent a lot of time researching standards for dark mode screens and the usability of the colors against one another. The following are the colors I chose and why.

For the primary color, I chose #3E55F2. This color is a purple-blue which conveys creativity, inspiration, and reduces stress. These were all important things for the user to feel while using the product because it would lead to going on the quests and interacting with others.

The secondary color I chose was #589ADC. This color is a less saturated blue that is easy on the eyes of the user and still sticks with the same message the primary color is conveying to a user. This secondary color was also an important addition because it passed WCAG guidelines against the background colors whereas the text in the primary color was harder to read for a user.

For the indication colors, I chose a low saturation green to show when a user is online and a low saturation yellow for the winning location award icon.

For the grayscale colors, I wanted to ensure that they would still meet WCAG guidelines with at least a AA standard but not be too bright on a user's eyes for dark mode. Sticking to the stakeholder's request of following closely to Material Design, I chose their recommended standards. For the primary page background, I went with their recommenced #121212. For the text they recommend high emphasis text to be white at 87% opacity. Low emphasis text should be white at 60% opacity, and disabled text at 30%.

All of these colors chosen pass WCAG guidelines against one another with a minimum of AA standards.

final iterations

After multiple rounds of iterations and small tweaks, I finally reached the end of this sprint. The following image shows a high-level view of all my final iterations.

Final High Fidelity Designs

Overview

The following are the final high fidelity screens and the key features on each page.

Polls section

The polls section gives users the ability to vote on whether they want a suggested quest to become a real quest. In this section, they can vote, create a new poll, search polls, and view open/closed polls. Below are some of the highlighted key features this section has.

Quests section

The quests section is the heart and soul of the whole platform. I focused on giving a user all necessary information on each card to get them engaged, without giving them cognitive overload. Below are some of the highlighted key features this section has.

Home newsfeed section

The home section is a newsfeed for users to interact with. This ensures that the users are connected with their friends and keep them engaged. It also notifies them of polls and reactions from visited locations. Users are also able to write a post to engage with their friends or check their notifications. Below are some of the highlighted key features this section has.

Messages section

The messages section was very important because the interaction between friends is the key to success for the app. Since these are such text-heavy pages, I focused on making the layout as simple as possible. Below are some of the highlighted features of this section.

Account section

The account section gives a user the ability to access their profile information, or their settings. To keep with the gamification of the app, I included completed and won stats along with badges. Below are some of the highlighted key features this section has.

Polls Section

The polls section gives users the ability to vote on whether they want a suggested quest to become a real quest. In this section, they can vote, create a new poll, search polls, and view open/closed polls. Below are some of the highlighted key features this section has.

• Users are able to toggle between open and closed polls gives users the easy ability to check current polls and end results of closed polls. The primary color bar also draws extra attention to which is selected.

• Users are able to create a new poll instead of having to toggle back to the home status bar to create one. This was chosen since it was more intuitive than a plus symbol.

• The search symbol when tapped will open up a search overlay action, that gives users the ability to search through open and closed polls. This will elimate wasted time for users.

• The quick details gives users the ability to see how many others have voted on the poll, and how much time is left before the poll ends.

• Users are able to quickly decipher wheter a poll is new or not, so that they don’t overlook any or waste time.

• Users are able to quickly send a poll to someone.

Quests section

The quests section is the heart and soul of the whole platform. I focused on giving a user all necessary information on each card to get them engaged, without giving them cognitive overload. Below are some of the highlighted key features this section has.

• The card details show a user how many days are left, the quest, the type of quest, location of quest, and which of your friends have participated.

• A user is able to easily navigate between quests that are still ongoing, and quests that have finished.

• On this page the search and filter options are prominent instead of a collapsed icon to ensure the easiest experience. This is important because these are used often on this section.

• A user is able to quickly tell which quests are newly posted so they aren’t seeing the same ones or missing any new quests.

• The completed tag shows a user which quests they have completed, so that they don’t have to click into each to see.

• Users are able to view the winning location of each quest to alleviate having to click into the quest to view it.

Home Newsfeed Section

The home section is a newsfeed for users to interact with. This ensures that the users are connected with their friends and keep them engaged. It also notifies them of polls and reactions from visited locations. Users are also able to write a post to engage with their friends or check their notifications. Below are some of the highlighted key features this section has.

• Users have the ability to write a post to their friends. This could be either a poll, general post, check-in, or a quest suggestion.

• The search feature gives users the ability to search any posts that were made or pull up a user’s profile.

• Notifications feature gives users updates to when quests that have ended, friend requests, location ratings, and any other alert they would need to be notified of.

• Users are able to see who has liked a post and the comments that were posted in response to the post.

• Users are able to quickly send a post to another person.

• The three dots on each individual post opens more actions the user can take with this post such as save post, bookmark, hide, etc.

Messages Section

The messages section was very important because the interaction between friends is the key to success for the app. Since these are such text-heavy pages, I focused on making the layout as simple as possible. Below are some of the highlighted features of this section.

• Users are able to quickly open up the messages of users on their favorites. This alleviates either creating a new message or searching for the contact.

• A user is able to see which of their contacts are online with the green circle next to their contact photo.

• The three dots in the top right corner on the individual message page, opens more actions a user can take within the message. This includes blocking, muting, view user profile, view media, etc.

• A user is quickly able to tell which of their recent messages is unread by the blue dot next to the name.

• The floating action button gives users the ability to create a new messge. This location alleviates strain on the thumb for a user, instead of it being at the top right.

• Messages sent from the user are a different color for easy indication of sender.

account Section

The account section gives a user the ability to access their profile information, or their settings. To keep with the gamification of the app, I included completed and won stats along with badges. Below are some of the highlighted key features this section has.

• Users are able to get a quick view of their personal stats.

• User are able to access their settings such as notifications, profile information, etc. in the top right corner of the screen.

• To gamify the platform and keep retention, we have a badges section. This is where they will find all their badges from accomplishments they have made.

• Users are able to see what place they suggested for a quest they have completed.

• Users are able to see that they suggested the winning location for that quest.

• The three dots in the top right corner of each individual card will pop open more actions the user can take with this quest.

Problems I Encountered

MEETING WCAG GUIDELINES

Initially, I only had the primary color and no secondary brand color, but I encountered an issue when I put the primary color against the background colors. It barely passed AA standards, so to think of all user types, I introduced the secondary color which passed AAA standards at the text size I used it in.

AVoiding cognitive overload

Multiple pages in the app had a lot of information on them. I wanted to ensure that I wasn't giving any user cognitive overload, especially on the quests page. However, in usability testing, I found users wanted me to add more key information rather than less. This justified adding the extra information which I was able to do without overloading them.

Conclusion
In reflection

Looking back, this project helped me grow a lot. This process pushed me to learn a lot about WCAG guidelines with colors in dark mode, and how to organize a lot of information on a page. I also learned a lot about Material Design guidelines and iOS Human Interface Guidelines while researching what I was aiming for in high fidelity.
Although this was a student project while I was enrolled at Lambda School, being given a project brief with set expectations helped prepare me for real-world expectations.