Hitch-A-Hike
New product | iOS Application
Overview
Hitch-A-Hike helps connect New Yorkers with nature.
Role: UX Researcher, UX Designer
Team: Danielle Martin, Isabelle Michaelides, Kara Snyder (me)
Timeline: 2 weeks (including a holiday weekend and remote work)
Deliverables: High-Fidelity Mockup and Prototype, 20-minute Client Presentation, Specification Document with Functional Annotation
UX Methods: Topic map, screener survey, user interviews, affinity map, persona, journey map, problem statement, platform choice, strategic partnership, competitive matrix, competitive feature analysis, feature prioritization/MoSCoW map, project pin-up/crit, design studio, mid-fidelity wireframe, prototype, usability testing, high-fidelity mockup, client presentation/public speaking
UX Tools: Excel, Sketch, Principle, Trello
Challenge
The problem space for this project — nature and New Yorkers — was expansive and reflective of the backgrounds and common interests of our team of UX Designers. We were tasked with researching how New York City dwellers define nature, interact with it, and designing a solution for them.
Goal
Design an app or responsive website that helps New Yorkers interact with nature more based on their habits and needs + present the solution to internal agency stakeholders.
Solution
What evolved from our design process was Hitch-A-Hike. It’s a native, iOS mobile app for carpooling New York City residents into nature and providing them information about their natural destination and outdoor activities.
Research
Topic Map
After aligning the team’s common interests and moving outside our areas of expertise, we used a topic map to start visualizing a potential problem space for nature/outdoors. It’s unlikely we’d have this much freedom again. Yet, this helped us decide on a possible problem space as well as start to get to know each other as a team.
Screener Survey
We used a screener survey to isolate New York City residents, but stayed open to various ages and frequency of interaction with nature. Based on the results, we identified the following 6 users to interview:
User Interviews
Collecting qualitative data through user interviews is one of the most fundamental (and my favorite) part of the design process. This is the foundation that the rest of work rests on.
All of the interviews, except one by phone, were conducted in-person. Knowing the quality of data we gathered at this stage would be integral to the rest of our process, we designed the following questions as a common starting place:
How do you define interacting with nature?
How frequently have you interacted with nature in the past month?
Does time of day, week, month, or year affect how much you interact with nature?
On a scale of 1–5, 1 being not at all and 5 being totally satisfied, how satisfied are you with the amount you interact with nature?
What do these interactions with nature look like for you?
Where are these interactions with nature happening for you?
What does being in/around nature do for you?
Do you generally plan to interact with nature? If yes, how? What resources do you use?
Is interacting with nature something you do solo or with others?
What obstacles do you face trying to interact with nature as a city dweller?
The power of following these questions up with a why (or more than one) should not be understated.
Synthesis
Affinity Map
To identify patterns, trends, and areas of opportunity, we synthesized our user interview data using an affinity map.
Persona
From the I statements, or first-person insights from the perspective of the user, a persona was generated. Having this persona helps communicate the research to stakeholders and focus our team’s design for this user. Meet Jacob.
Journey Map
A journey map is a powerful tool for visualizing the user’s holistic experience. For this sprint, the Research & Planning phase of Jacob’s journey provided the most opportunity to create a more satisfying experience for him within the time constraints of our sprint.
Problem Statement
With Jacob and his journey firmly in mind, we began to narrow our problem space and focus our efforts. A solid problem statement does both of those things, plus can validate (or invalidate) any assumptions floating around the problem space. We did this by coming up with a clear problem statement:
City dwellers have limited access to fully immersive experiences in nature and often use city parks as a stopgap between trips outside the city.
Jacob is overwhelmed by the busyness of modern city life and spending time in green space is restorative for him. How might we help Jacob overcome the distance and surround himself with green space more effortlessly?
Ideation, More Research + Design
Insights Distilled
I’m a firm believer in occasionally pausing, pulling yourself out of the weeds (data), and reflecting on what you’ve learned. It’s about seeing the bigger picture and starting to ideate. We still had a lot of unanswered questions, but here’s what was starting to gel for us:
Platform Choice: Native Mobile App
Jacob isn’t hiking or swimming with his laptop. While he prefers to disconnect while in nature with close family and friends, he does bring along his iPhone. Creating a native, mobile iOS app became the obvious choice. It would also allow for push notifications with his driver and allow for offline access to outdoor activity and destination information he’d need.
Strategic Partner Identified
But who has that natural destination data? Integrating the Google Maps API would help deliver the address and driving destination, but our app’s specialization would be nature. We identified the Appalachian Mountain Club (AMC) as proposed partner.
AMC’s core mission is to connect people from the Mid-Atlantic through the Northeast (and within driving distance of NYC) with outdoor activities
Our app, Hitch-A-Hike, could help transport their members to their events, especially for their New York chapter
AMC sits on a mountain of data from their offerings: online advice, online trip planning (by state or activity), printed guidebooks, maps, and magazines
Competitive Matrix
Wanting to understand where Hitch-A-Hike could potentially fit into the market. So, we did some research and synthesized the results in this competitive matrix.
What we found was that our focus on nature was a major point of differentiation. Also, our pricing — estimated based on driver-initiated carpooling giant, BlaBlaCar — was not the cheapest, but still quite competitive.
Competitive Feature Analysis
As we got closer to going into the design studio, we started to think about features that would be important to Jacob. Due to the time it would take to conduct more user interviews on carpooling and synthesize the data, we opted to create the competitive feature analysis below:
Interestingly, none of our competitors offer natural destination and outdoor activity information. This reinforced what could be a significant competitive advantage.
Being a curious and analytical person, it was fun to pull this analysis and the competitive matrix together.
Feature Prioritization/MoSCoW Map
This competitive feature analysis and a MoSCoW Map also helped us prioritize which features we must have and should have to create our MVP, or minimum viable product. (For this sprint, we did not focus on could have or won’t have features.)
Project Pin-up
(aka Group Crit or Design Review)
As a UX Designer, you’re always simultaneously UXing your own work. A project pin-up offers a chance to zoom out, present your work, and get feedback from other UX Designers and some of our stakeholders. We presented all of the aforementioned artifacts. By opening ourselves up to critique, we found new ways to refine our ideas and identified areas of improvement. We also learned that people have very strong feelings about persona photos. (We made a switch based on feedback.)
Design Studio (Workshop)
This is when the Hitch-A-Hike app really began to take shape. While the initial sketches weren’t so pretty, they are fast and low-cost. Because of the time constraints, we focused on Jacob’s journey as the passenger. We assumed he was registered and logged into the app.
Mid-fidelity Wireframes and Functional Prototype
Coming out of the studio, we constructed this mid-fidelity wireframe. (One of my teammates took the lead in transforming our hand-drawn sketches to digital wireframes using Sketch and InVision. The other spearheaded the high-fidelity mockup creation.)
Usability Testing for Mid-fidelity Wireframes
Conducting our usability tests with 3 users was quite successful:
3/3 users were able to successfully search for carpools from Williamsburg, Brooklyn to Lake Placid, NY for two passengers.
3/3 users were able to successfully filter the ride results to find a female driver doing a round trip and request the carpool.
3/3 users were able to successfully find destination information about hiking at Lake Placid.
However, we did note some minor opportunities for improvement that we chose to integrate into the high-fidelity mockup.
Deliver
High-fidelity Mockups and Functional Prototype
We integrated the changes from the mid-fidelity wireframe usability tests, plus color and photos, to create our high-fidelity mockup.
Usability Testing for High-fidelity Mockups
We performed another round of usability testing. The following two tests were successful among 4 new users:
4/4 users were able to successfully search for carpools from Williamsburg, Brooklyn to Lake Placid, NY for two passengers.
4/4 users were able to successfully find destination information about hiking at Lake Placid.
There was also a high-fidelity usability testing issue: Only 2/4 users were able to successfully filter the ride results to find a female driver doing a roundtrip no more than 5 miles away from their destination and request the carpool. This was a decrease in usability for this test from 3/3 users successfully completing the task on the mid-fidelity prototype to 2/4 users in this test. Additionally, we learned that 1 /4 testers couldn’t close out of the filter menu during this test. No further updates were made due to time constraints.
Client Presentation
To conclude this sprint, our team had approximately 20-minutes to present our design process to internal agency stakeholders. This included a 19-page presentation deck.
Specifications Document with Functional Annotations
Additionally, we delivered a specification document including:
Style guide with colors, typography, UI elements, visual properties, and states
Measurements and spacing information
9 pages of functional annotation (like the example shown)
Next Steps + Next Time
Next Steps
In the high-fidelity mockup usability test, 1/4 users could not close out of the Filters menu because they were expecting the button to be at the bottom of the page. Explore this through more usability testing.
Consult with development team about integration of the Google Maps API and Appalachian Mountain Club data.
Conduct card sorting for the content of the Menu screen.
Create and test a mid-fidelity wireframe and conduct usability testing for the rest of the app.
Create the high-fidelity mockup for the entire app.
Things I would consider doing differently next time:
Conduct another round of user interviews after deciding to move in the direction of carpooling to better understand user habits and mindset, specifically around carpooling.
While overall we had very successful mid-fidelity usability tests, I want to consider testing with paper prototypes more on future projects. It’s faster and will be cheaper when budget is a factor.