Case Study - UI/UX
Trailpals, a hiking app designed to connect solo hikers
Timeline
6 weeks
Spring 2023
Tools
Figma
Miro
RESEARCH
Interviews + Survey
User research was conducted through 4 one-on-one semi-structured interviews and a survey with both open and closed response questions. We received 22 responses to the survey through social media outreach.
Demographic information for the surveys:
Most (18/22) respondents identified as female
Most (18/22) respondents were between the ages of 19-21
Insights
77% of respondents did not know of any platforms to find hikers
Ideal group size was 4-5
Safety was important for longer hikes
From a scale of 1-5 for how experienced of a hiker you are, most respondents fell in the range of 2-4
Planning was a major deterrent
Shared experience was important
All found hiking social in some aspect
Only 4 survey respondents hike alone
So…
How might we facilitate a convenient and comfortable experience for making hiking friends?
DEVELOPMENT
Initial Sketches
We began by ideating possible features, starting with the flow to create a hike event. These were based on a few of our interviewees mentioning that they liked hiking as an activity to bond with friends, and how planning was a deterrent to go on hikes. We wanted:
A home page with hikes that were available for browsing
A create page with options to add a photo and information
The ability to invite friends to the event.
Initial Prototype
Due to time constraints, we used our initial sketch as a wireframe and dove straight into a prototype we could test. Our additions included:
Several distinct flows (create a hike, join a hike, report a hiker)
Condensed home page for easier browsing
Personal profile page
Option to report hikers for safety
Usability Testing + Changes
We conducted usability testing for our initial prototype and changed multiple aspects of our prototype to increase ease of use and to implement more features. For testing, we gave users the prototype on a phone and asked for specific tasks, including creating a hike, then asked for overall thoughts on the information architecture and visual language. Feedback included:
Providing greater hike information on cards on the home page
Creating profile pages for individual users to gain more context for safety
Adding more context on specific hike pages
Reworking screens for consistency for ease of use
Updating colors to provide greater contrast
Creating an invite link on a profile to increase engagement
"Final" Prototype
Afterwords
After the project ended, I revisited with a better understanding of visual design and prototyping. The following is all work I did independently, overhauling the previous designs. Changes I made include:
Revised typography and colors for greater contrast and readability
Consistent visual system, including getting rid of the dots on the login pages
Improved header and navigation bar, so every elements is represented in the system
Bigger buttons for accessibility
Flows
This system is comprised of 3 main flows, each representing a value from our research:
Convenience for planning hikes
Sociability for finding new hikes/friends
Safety for viewing and reporting profiles.
Joining a hike
Creating a hike
Profile + Security
Reflection
As this was my end-to-end design group project, there were several key takeaways.
Takeaways
Communication and accountability are key to ensuring a project remains on track
Being the sole interface designer was difficult, however sticking to a set style guide was key for rapid iteration
With such a short timeline, we had to prioritize certain features over others by going back to our research
Missed Opportunities
If I were to do this project with the knowledge I know now, I would:
Record and transcribe interviews
Develop personas, journey maps, and storyboards
Map out the information architecture
Conduct more structured usability testing
Create a design system + components
