my role

UX/UI Designer

BACKGROUND

The discovery phase for AdventureHUB began with competitive research and user interviews. I discovered that people were unable to plan outdoor adventures without multiple resources. Users needed a one-stop-shop resource where they could find new adventures for a wide variety of adventures while viewing current maps, weather reports, and reviews. On top of having all of this in one place, users needed to be able to access this information during their adventures and without the need for cell phone service. The resulting prototype is an initial hypotheses on how I hope to provide users with the tools they need to enjoy the adventures they love.

MARKET ANALYSIS

Before imagining my own design, I set out to find the most successful apps and websites in the market that had now become my competition. I took special interest in what users might expect from my app and which of my competitors had done a good job of solving user problems (and which had not). By identifying underserved opportunities in the market I was able to imagine solutions to unfulfilled user needs. Through understanding the offerings of my competitors I was able to make better-informed decisions for my own design strategy in order to create competitive advantages.

USER EXPERIENCE ANALYSIS

After having analyzed the market, I explored each competitor platform in order to deconstruct the user experience provided. Navigating my way through multiple task flows, I took note of each app’s usability, layout, navigation structure, and specific calls to action. Through differentiation I pulled these observations together to determine what makes each competitor unique. At this point I had collected actionable snippets that could be used to create a product that will fill underserved opportunities in the market.

THE PROBLEM

Mainstream apps and online platforms only provide users with a portion of the information they need in order to plan their adventures. One might find the hiking trails they would like to explore on one website, the rock climbing routes they plan to scale on another, and still need to visit two or three different platforms to find campsites, extended weather forecasts, and navigation.

SUGGESTED SOLUTION

Users should be able to plan an adventure from start to finish without relying on multiple sources to provide them with the necessary information. AdventureHUB can fulfill these underserved user needs by providing high quality adventure descriptions that include maps, navigation, weather forecasts and the ability to access all of this information offline when they’ll need it most.

USER INTERVIEWS

To identify user motivations and understand current challenges they face while planning outdoor adventures, I recruited three participants with varied adventure interests and activity levels to engage in in-depth, over-the-phone interviews. Beginning with interviews allows for the opportunity to ask follow up questions and create a discussion which provides more specific insight to personal experiences, goals, and frustrations.

After completing the interviews, the finding were compiled into affinity maps to create a visual representation of the responses received from each participant. I began by grouping the information from each interview into the following categories:

• Behaviors and Attitudes
• Needs and Goals
• Challenges and Frustrations

With the interview responses organized into affinity maps, I was able to observe the relationship between individual user needs by highlighting patterns and hierarchy.

THEMES ANALYSIS

The responses from the individual affinity maps were further analyzed to expose additional insights. Each category was split into sub-categories to separate individual goals, motivations, and struggles the users are currently facing.

Through this understanding I was able to identify the following market opportunities that would provide valuable solutions to underserved user needs:

1. Provide all activity types in one place
2. Ability to save and organize saved adventures
3. Social component to share and plan with friends
4. High level of detail

DESIGN PERSONAS

While reflecting on the previously conducted research, two separate types of users began to emerge. One user preferred short spontaneous trips close to home while the other enjoyed traveling for extended trips with multiple days and activities planned.

This could mean that a design geared towards one user might look more condensed and scannable, while a design for the other might be more in-depth and informative.

In order to prioritize the functionality based on these different audiences, design personas were created to define how and why these different types of users might interact with the new platform. Studying these user types and their stories will ensure that design decisions are based on real data from real users.

USER JOURNEY MAPS

User research and these new, clearly defined personas were used to create journey maps in order to visualize the processes these users go through in order to accomplish their goals. These narratives tell memorable stories about the user’s goals that will become the focus and vision through the design process.

The following journey maps detail scenarios and goals for each user. Each scenario is then played out while documenting the user tasks, emotions, and thoughts throughout the process of accomplishing their described goals. In each phase insights and recommendations are noted as opportunities for the new platform based on what the user is going through during that phase. They show a step-by-step breakdown of the user’s experience with the new platform.

USER TASK FLOWS

To create user task flows I began with a tasks analysis to determine which tasks were required to complete the individual user goals in context of the personas. Based on this analysis, a series of task flows was created to document the processes the personas will use to complete their tasks within the new platform. Each task is broken down into a simple, step-by-step process to accomplish user objectives.

Task flows were created for the following objectives:

1. Conduct a filtered search and browse results
2. Save adventures to new board
3. Share adventure and schedule trip with friends
4. Create and share a packing list

SKETCHES AND LOW-FIDELITY WIREFRAMES

To transition into the design phase, rough sketches were made focusing primarily on functionality. Referring back to the user task flows, I began with a single task and identified the screens that were needed to complete that function. Then, for each screen I identified the key element that I wanted to include.

After putting together a set of sketches, low-fidelity wireframes were designed using Adobe XD. These low-fidelity wireframes would serve as the foundation for the more advanced iterations to come.

MID-FIDELITY WIREFRAMES & PROTOTYPING

After exploring the basic navigation and key screens of the app, mid-fidelity wireframes were created with a prototype that was prepared for usability testing. This set of wireframes had slightly more detail than the previous set but were still far from complete. They had just enough detail for users to identify an major usability errors before the design was advanced to the next phase. Testing early and often ensures that the design is on the right track and provides the opportunity to correct and revisit issues before the design is completely derailed.

USABILITY TESTING

Test sessions were held with participants using Zoom. This allowed for observation of each user’s body language, verbal input, and screen tracking as they navigated through three tasks.

Before moving forward to high-fidelity wireframes, testing was used to reveal possible usability problems. The goal of this round of testing was to identify successes and downfalls of the current design and navigation in order to make necessary revisions and improvements to ensure ease of use for all users.

1. Conduct a filtered search
2. Save an adventure
3. Send an adventure invite

AFFINITY MAPPING

To begin making sense of usability test results, I started with an affinity map to isolate bits of information taken from the test recordings and began to visualize them on paper. By clustering similar ideas and insights, I was able to realize patterns and hierarchy within the test results.

RAINBOW SPREADSHEET

Building on the visual patterns uncovered by the affinity map, the same observations were used in a rainbow spreadsheet. This allowed for each observation to be analyzed and addressed. Problem areas and usability errors were classified based on Jakob Nielsen’s severity ratings to prioritize necessary revisions.

USABILITY ISSUE 1:

Users suffered severe difficulty completing the task to share an adventure and invite a friend.
(Rating 4 – Usability Catastrophe)

Suggested Changes

• Remove entire invitation feature and instead, share adventure through messaging
  
• Update the share feature to allow users to share via in-app messaging and social media
  
• In-app messaging feature will support group messaging and allow renaming of group messages for personalized organization

Evidence

None of the test participants were able to complete the task without a fair amount of guidance. While stumbling through this task, users voiced their preferences for other ways that the task could have been completed. They expressed that the invitation seemed too formal for real world situation and preferred to discuss planning and adventures options with friends to determine details and logistics together.

USABILITY ISSUE 2:

Filters do not behave as users expected.
(Rating 3 – Major Usability Problem)

Suggested Changes

• Redesign filter menu to become more scannable with drop down and collapsible capabilities to eliminate excessive scrolling
  
• Add reset and apply buttons to filter menu.
  
• Add notification to filter icon to indicate how many filter options are currently selected.

Evidence

Users were frustrated with the amount of scrolling to get through the filter options. There was a lot of confusion when trying to apply their selected features and were looking for an option to confirm their choices. Progress feedback and confirmation options would keep users informed and confident that their actions are being completed.

SITE MAP

With the decision to remove certain features and focus on others, the site map was revised to match the new design architecture. The current version of the site map does not include the invitation and packing list features that were put on hold. Instead, the messaging platform was given more attention in order to deliver on the wants expressed by all users during the usability test.

COLOR PALLET

The original colors were chosen in order to blend well with the images used on the platform. Since the images all featured nature and the outdoors, this earthy color scheme seemed to be the answer. Upon reflection, however, the colors seemed to darken the entire platform making it appear heavy and dark. not to mention the lack of color contrast that was far below WCAG standards.

I started by brightening the colors I had originally started out with to make them warmer and more eye catching. I continued to play with the colors until I had reached a new pallet that would brighten the entire aesthetic of the platform and breathe a little life into each screen.

Click here to view the current design language for AdventureHUB.

USABILITY AND DESIGN ADJUSTMENTS