Quest for the Best: A Native iOS Application

The Challenge

As a Lambda School Project, design an iOS Native Application using friendly-competition to find the best of a category in your city. Essentially, get people to explore their city, experience new things, and share it with their friends.

Discovery

Stakeholder Interview

I started the week with viewing a pre-recorded video of a stakeholder interview. I was able to develop a deeper understanding of his idea. He also shared the origins of his idea and his inspiration of slack meets yelp. The stakeholder stated that he was not concerned about monetary gain at this point. He had determined that Quest for the Best, or Q4B, was less about winning and more about exploration and sharing with friends.

Competitive Analysis

I cast a wide net to understand how competitors handled the MVP of chat. I looked at Facebook, SnapChat, iMessage, and WhatsApp. I didn’t want to reinvent the chat wheel and overall, I believe that if a user is familiar with a concept or process, we should meet their expectations.

Proto-Persona

In order to develop a proto-persona, I researched the most common professional career in Seattle. Not surprisingly, software engineer was the most common with an average salary of $103k and age of 32-years-old. With that information, I developed Camella Williams, my proto-persona. She is new to Seattle and works at Amazon. She wants to get to know Seattle as a local and not as a tourist. She’s a creature-of-habit, but wants to get out more. She’s the perfect user for Q4B. Referencing Camella throughout the process was essential to making sure I was designing a product she would love and that would be fun. Knowing that users like Camella wanted to find the best, I believed that they would want to take pictures of their own experience, much like instagram and other social media sites.

Definition

Customer Journey Map

Once I had an understanding of the typical user, Camella, I developed a customer journey map. I started out with her receiving an email invitation, signing up (with options for Facebook or Google), and proceeding to her dashboard. The journey was fairly straight forward with her engaging in polls and quests and eventually proposing her own quests. The customer journey map helped me to understand how Camella would interact with the product and influenced design decisions, such as having user-generated images for the categories versus illustrations.

Information Architecture and Site Map

With every new app or website, I want to ensure that the way I am organizing information makes sense to the user. I determined that I would do a closed card sort and received 7 results. I used that information to organize the site map.

User Flows

Once I had the customer journey map, IA, and sitemap complete, I thought about Camella’s interaction with the app. I wanted her flow through Q4B to be intuitive and direct. I didn’t want to hide any information from her. I thought about nearly ever user flow she would need to accomplish and mapped them out. The most complicated was adding a new quest and poll.

Ideation

Sketches

I decided to use the Crazy 8s exercise to sketch ideas for the MVP. First, I thought about the basic chat format of Facebook, iMessage, WhatsApp, etc. I knew that I wanted to use a familiar format for users. I also knew that I wanted to have Quest specific chats and an option to go to specific chats from Quests. It seemed important to make sure the two were linked.

I also sketched bottom navigation bar ideas. I thought about right-handed thumb placement, as well as the site map and information architecture card sort.

Finally, I sketched some ideas for the dashboard. Part of the MVP was to have an inventory of past quests, but I also thought about what the user, Camella, would want to see. For that reason I included active quests, her crew members, and polls.

Wireframes

Using the sketches as a jumping off point, I started wireframing the dashboard. I wanted to make sure all the important user-specific content was front and center, especially given the IA card sort results. As I mentioned, I also wanted to make sure the chats were linked to the quest and the quests were linked to the chats.

Usability Testing

I conducted a basic Maze test of the two MVPs. The first was navigating to your completed Quests. It appeared as though 4 of the users did not understand where to click initially. The heatmap on Maze had people clicking on the large circle “image” and other random areas. Others, however, had a direct path to completion without issue. I am not sure if users were confused or if some of them just started clicking randomly to see what happened. Whatever the cause, I knew that I needed to iterate my dashboard for clarity. When it came to the chat MVP, using a familiar format lead to 100% success for those that completed the Maze.

Iterations and High-Fidelity

With the usability test done, I started thinking about how I could improve my designs. I reached out for a design critique from my colleagues and was given actionable critique that I implemented. The biggest piece of feedback was in regards to the dashboard user image, or circle in the wireframes. One colleague stated that it was hard to know where to start and that her eyes were drawn to the user’s image and not the Quests below. I wondered if that could be why users were clicking randomly on the Maze dashboard wireframe test. I decided to decrease the size of the image and remove some information at the top of the dashboard. I hoped that by doing this the user would have less distractions from their goals. Given more time, I would like to test this iteration and see if users understood how to complete the tasks.

Upon further consideration, the dashboard seemed too busy and full of information. The visual hierarchy made it difficult to parse what was going on and the cards were very close. Overall, it led to an overwhelming feeling. Finally, the bottom navigation bar icons were simply too big. I completed some basic redesign and the newest iterations are seen below.

Next Steps

If I had more time to complete the iOS Native App design, I would have wanted to conduct another usability test on the updated dashboard and other user flows. Some more work needs to be conducted on the poll voting functioning. I also think some more work could be done with the Chat hierarchy as there is a lot of information packed into the top of each chat. I was able to use my usability tests, along with colleagues’ feedback to iterate to a simpler, cleaner design that still met the MVP and had Camella in mind.