Scout Mobile Application
Scout is a comprehensive guide & review-based mobile application designed to point Users to dog-friendly establishments either in their home area or on their travels.
ROLE
SOLE UX/UI DESIGNER OF THE CONCEPT CASE STUDY
PROCESS
RESEARCH, COMPETITIVE ANALYSIS, AFFINITY MAPPING, INTERVIEWS, PROTOTYPING, USABILITY TESTING, PREFERENCE TESTING, AND EVALUATION
TIMEFRAME
3 MONTHS, December 2018 -March 2019
TOOLS
SKETCH, INVISIOn, Marvel & PAPER/PENCIL
Project Overview
The Challenge
For the final project of the General Assembly UX Design course, our instructor tasked us with solving a problem. He asked us to consider what in our daily lives we like to make simpler. Immediately, my thoughts centered on my dog. I had just rescued Ziggy from a local organization in Seattle and he had settled into apartment life with ease, but I wanted to venture out to take him places with friends or even on our own adventures. All the products I’d used either viewed dog-friendly as low priority or didn’t note the option on the platforms at all.
Were other dog owners having the same problem? I had to validate.
So with a pretty specific target group, I went to the most saturated area of dog parents I could find; a dog park.
The Process
Although the project contained many iterations and was not linear, here are the methods I executed during the process:
Discover:
The first step in my process before I even started designing was to gain a better understanding of the problem, the competition, and the User.
I began by crafting a problem statement:
Understanding the Competition
Next, I needed to see what was currently on the market. What applications, products, and services were already filling this need? What were they doing well? What could be improved?
The three, main competitors in the market were Bring Fido, Petlas, and Yelp. Among the three the two dog-specific products fell short whereas Yelp is a solid competitor with a huge following and brand equity in the market as well as a kind of one-stop-shop in terms of ease of use for the User.
Understanding the User
After having an understanding of the problem and market next, I focused on understanding the User. I conducted a series of interviews both formally in homes or offices and informally in local dog parks. I conducted ten interviews total then created an affinity map to track commonalities, trends, outliers, and quotes.
Top User Interview Insights:
Empathize
User Personas
After I gathered insights and information about the Users, I was able to place myself in their shoes and have a better viewpoint of the product from their perspective.
I created two User Personas to ensure that this perspective was kept at the forefront of the design process, aligned with the stakeholder’s product strategy, and reminded all involved who we were designing for and why.
Visualize the User’s Journey
The next step to further empathize and connect the User Personas to the product, I created a visual of what my Users’ process could be exploring the app. I created User journeys for each persona with the goal of creating a realistic experience to refer to during the design phase.
Ideate
Enhance Usability
During the Ideation phase of the process, I wanted to set as much of a foundation for the first design as possible. I created a User Flow based on the tasks and actions from the User Journeys. This blueprint was ideal for understanding the interactions between my User and Scout when they flow through the tasks in the core features. Setting this User Flow before the design phase will help save me some time from unnecessary errors and eliminate obvious pain points before conducting the usability testing.
Then I created a Site Map to start zeroing in on the content, verbiage, and naming conventions of the screens, using the User Flow as a guide.
Lastly, I conducted a Card Sort Analysis where I added all the Site Map content to validate if these titles and groupings made sense to the User. The results were similar to the majority of the intended groupings. The only. update from the tester feedback was some search aspects that were initially divided between two different categories but made more sense to the Users to be grouped together.
Design
Low Fidelity Wire Frames
The first round of low-fidelity wireframes were sketched with pencil and paper. This helps immensely when designing the first screens for Scout as it’s a very forgiving medium.
For a quick usability testing to catch any major issues in this state I utilized the application Marvel, uploaded the paper wireframe images, and created a quick prototype to test. Three participants swiped through noting feedback digitally. I documented the feedback and updated the paper wire frames.
Mid Fidelity Wire Frames
After gathering feedback on the Low Fidelity prototype and analyzing those friction points, I designed the core functional screens in Sketch. I identified a few missing functions and updated the User Flow to match the current iteration through this process.
User Interface
Before starting on the High Fidelity wireframes I began working on the mood board, style guide, and visual design of the product. Utilizing some of the descriptive words the Users noted in the usability tests.
Simplistic
Clean
Structured
Playful
Testing
Usability Testing
For the Mid Fidelity wireframes, I conducted usability testing with 10 participants. The test was moderated in person and via Skype if the participant found that more convenient. I started with two prompts and two tasks for the Users to complete. From this round of usability testing, I found four common themes across the majority of Users:
Next Steps
Refine the screens + buildout remaining functions
Finish out a majority of the screens to give a better User Experience with the next rounds of testing.
Refine the UI
Analyze the screens with a design eye and create a brand book for the design elements, font, and color swatches.
High Fidelity Testing
Get another round of testing in with the additional screens and refined UI to give the tester a better sense of the finished app.