Ryan Russell
UX Designer

Anywhere

Seek Adventure and Recapture the Wonder of Discovery

UX/UI Research & Design Concept Project

Role: Lead UX Designer

  • Responsibilities included:

    • User Research & Results

    • Site Mapping & User Flows

    • Interface Design & Wireframing

    • High Fidelity Mockups

    • Prototyping & Usability Testing

Tools: Figma, InVision, Miro

Date: May-July, 2021

Challenge: Make it easier for people who want to step away from the noise and chaos of society to find places to explore and have the opportunity to be alone.

Solution: Anywhere is an app focused on providing an accurate wealth of locations which can be accessed and explored. Providing the ability for users to identify, explore and review destinations which match their desired experience.

After a year in quarantine, we found ourselves looking towards a summer where everyone wanted to be outside.

"A shortage of campgrounds", "national parks swarmed", a "shortage of RV's in the United States". These were articles and headlines I encountered that stipulated the idea that: sharing the ability to explore new places without encountering throngs of crowds, was a great idea for a UX/UI project.

This conceptual product would be designed to promote mental health via access to the wilderness. The challenge which I set out to solve was: How might we make it easier for those who want to step away from society and into the embrace of nature to find quiet places where they have the opportunity to be alone?

Research

I conducted secondary research on the topics of availability of traditional outdoors access, mental health outcomes from noise pollution and exposure to nature. After ensuring that there was a strong basis for going forward, I moved on to primary research.

Next we needed to find out if, and who would be interested in this product. After completing my secondary research to establish and ensure a basis for going forward with solving this challenge, I put together a research plan to conduct my primary research. This would be done via user interviews, with participants recruited via social media, screened for those who would be in our perspective demographic group:

  • Adults 18+

  • Access to a vehicle

  • Actively sought time outdoors on in the past year

  • Awareness or consideration of their mental health or that of their family.

"The first step to solving a problem is to understand the challenge."

Research Results

The interviews focused on how people interacted with the outdoors in their current life. How they utilized mobile or online applications, how they found places to spend time at and the assets which helped them make those choices.

Interviews with interested parties became transcriptions, then collated notes and finally affinity maps. These helped us to develop a better understanding of the end users and form the user Personas; which would be our lenses into how users would interact with our product.

From these topic groupings I then formulated some loose ideas about users who would fit these groupings. Disseminating the color coded interview stickies, I formed three empathy maps, which would go on to be the basis for formulation of three personas.

From these topic groupings I then formulated some loose ideas about users who would fit these groupings.

Disseminating the color coded interview stickies, I formed three empathy maps, which would go on to be the basis for formulation of three personas.

Having personas allows for easier communication, referencing populations of the end users and having them clearly understood by all involved parties.

Having personas allows for easier communication, referencing populations of the end users and having them clearly understood by all involved parties.

Personas

The personas were formulated from a process of results review, idea, empathy & affinity mapping. They formed the foundation for how we would go about generating ideas, evaluating design decisions and a view through which we'd conduct spot functionality testing of our designs.

User Flows

Utilizing those Personas I defined user stories and subsequently identified the top 3 user flows. Focusing on these, I'd refine the designs to help users accomplish typical functions of the product with the least resistance.

This iteration of a User Flow showcases how frequented pages can be accessed through different points in the application.

This iteration of a User Flow showcases how frequented pages can be accessed through different points in the application.

Keeping notes at the bottom of sketch screen is great to communicate ideas to a team!

Keeping notes at the bottom of sketch screen is great to communicate ideas to a team!

Sketches

Throughout the sketching process, I constantly referenced the user stories and red routes. Incorporating quality of life elements and building expected interactions into the prospective product; I drew examples from other apps in the ‘exploration/adventure’ category and other designs with similar features.

Wireframes

"The turning point in moving from sketching to wireframes was the realization of needing more detail to flesh out my designs now that I had a general idea of what it should look like."

Creating components which can be easily replicated across screens & used by other designers & developers to help keep our ideas and designs consistent was a big motivation for moving to wireframes.

I understood that the designs needed focus & clarity before working on the visual appeal, I settled on producing low-fidelity wireframes before moving forward.

After the second iteration of wireframes, as the design began to approach high fidelity wireframes and settled into the main design choices implemented, it became clear that moving to pixel perfect high fidelity mock ups were the best way forward in navigating the final look and feel of the product.

Anywhere

Style Guide

Consistency is more important than ever moving into High Fidelity mock-ups. Disjointed colors, container sizes or icons could all make or break the ability for your app to be understood as a potential user or shareholder reviews the designs.

Luckily along with 'design', 'style' can also change as your designs are refined. This is the second 'published' iteration of the style guide for this product.

High Fidelity & Prototyping

I created high fidelity screens. After all of the sourcing in order to accomplish the look and feel, incorporate elements which were desired in the design and iteration upon iteration it was time to go through a similar process generating some pixel perfect deliverables.

Throughout the mock up process, I continued to evaluate individual elements for their functionality towards achieving the goals of users on that page. When I identify elements, such as: a concept for a side scrolling ‘review tiles’ field, that don’t align with what a user is trying to accomplish on that page, they were adjusted or removed.

The second iteration (seen below) was utilized to create the original prototype for the Anywhere app.

User Testing

"After building out a prototype to test the fledgling system, finding people to test it was the best path forward."

Identifying participants for the usability test was simple and randomized. In hindsight the preparation on exact verbiage utilized to describe tasks, and the data populated into the application proved to be a big mediating factor. One which I can control for in the future.

I conducted the standard 5 participant tests via remote moderated testing; collecting their experiences via notes and recordings. I then synthesized those experiences into a page of bulleted points before preparing a full report. In my "short", but detailed usability test report, I identified the high, medium and low priority issues present in the current version of the product.

  • Feed/Reviews function needs to be more clear in its purposed and how its organizing information.

    • Solution: Change 'Feed' to 'Reviews', add 'sorting' option on page.

  • The options to Check-in or favorite a location are causing confusion in the clarity of each's purpose.

    • Add pop-ups gratifying & clarifying the actions.

    • With frequency of use of the 'My places' page; break into its on separate navigation screen & add both sorting options as well as display (favorites/visited).

  • Nav bar needs to be more intuitive to accomplishing user flows.

    • Label navigation bar.

    • Add 'My places' as separate nav screen.

Usability testing allowed me to quickly identify elements which needed design updates and see the limitations and strengths of the prototype. An additional item learned was the limitations of the prototyping software itself impeding the perceived functionality of the product. This knowledge allowed me to control for that data in my report and provide the most effective guide to updating the design of the product.

Final Product

Looking Forward

The main problem I struggled with was being satisfied with the complete state of the product. As a conceptual end-to-end solo design project time both does and doesn't play a large factor in providing deliverables at each stage of the design process. I found myself iterating until I hit my allocated time limit. My evaluation of this phenomena was that this could be a detriment, when one step begins to blend with another, like lo-fi wireframes becoming high fidelity.

Identifying the elements which I wanted to work on, and then capturing that revised product as a snapshot became increasingly important to my progress along the way. This exercise helped me to further develop my own approach to each element of design. Moving forwards I believe that I am better positioned to provide succinct, high quality deliverables on a shorter timeline.