Background
23F - DH 110: User Experience and Design
Team
Isabella Lee, Lucian Li, Lin Huang
Platform
Mobile
Introduction
Challenge
How can we enable undergraduate students at UCLA to engage with the natural ecologies and outdoor recreation opportunities available in Los Angeles and Southern California? What are the barriers that keep students from participating in outdoor recreation? Is it possible to foster learning and appreciation of wild and urban ecologies? Is it possible to connect students to opportunities to volunteer or act as stewards of the natural landscapes and biodiversity of the region?
Solution
A mobile platform, HikeU, that allows UCLA students who are beginner hikers. It allows them to easily find trails around campus, as well as learn more about the basics of hiking.
Prototype
[The user signs up and is brought to the home page, which shows them a list of hiking trails near UCLA, sorted by distance. They can click into each trail to view the trail details, such as duration, how to get there, map, etc. Going to the guides page, they are able to read each guide to learn more about the world of hiking. Users can save trails and guides as well. Their profile shows their saved and completed hikes.]
Background
This fall quarter, I took DH 110: User Experience and Design at UCLA. Our final project was to create a solution to one of the design prompts given to us. We had about 6 weeks to go through the end to end design process, which we then presented our final products at the end of the quarter. Throughout, we had weekly check-ins where we would receive feedback from our professor and classmates. I worked with 3 other classmates to create our product, all with different majors and backgrounds.
The following is a condensed version of the process, but you can find the full project report here.
We decided to tackle the following: Outdoor recreation and engaging with the natural ecologies of Southern California
Design concept
To help with design decisions in the future and understand our users on a deeper level, we have defined our average users and their current experience journey. We also made low-fi sketches of our application which will serve as a starting point since we will be expanding upon these initial designs in the future.
For our initial idea, we included a homepage that displays local hikes, which the user can choose to organize based on various features of the hike which could be highly useful for beginner hikers. The features we plan to include are as follows:
- Hike details including: duration/length of hike, difficulty of hike, elevation, etc.
- Location of hike from the user
- How crowded/popular the hike is
- Water/bathroom access
- Parking/public transportation
- Shade/forecast
- Accessibility
- Optimal time to go on the hike
- What to bring/what to wear
There’s also a user profile that displays the user’s saved hikes, journal, experience level, and completed hikes. The experience level and completed hikes feature in particular will be especially important for beginners because it motivates users by showing their progress and growth over time. We also included guides that will inform beginner hikers on relevant topics such as how to get started with hiking, safety, equipment, ways to protect the environment while hiking, and transportation. Users also have a personal journal displayed on their profile page, where they can log their experiences on each hike, as well as add images of views and wildlife they took along the hike. Journal entries can also be shared to the public, allowing users to read first-hand experiences from other beginner hikers from their profile or on individual hike guides.
During our weekly check-in, we received the following feedback: The survey when creating an account isn’t necessary, just assume users are beginners. Don’t need location services, as it’s supposed to be just for UCLA students finding hikes near UCLA. Don’t focus on the social aspects for now.
High fidelity frames
From this, we solidified our frames, and moved on to designing our high fidelity frames and prototyping. We first started out by deciding on our design system, including color palette and font to keep our interfaces consistent throughout the design process.
Usability testing
To start off our interviews, we asked some general questions about the participants’ experiences with hiking and hiking apps. We found that most of them don’t really use a hiking specific platform to discover new trails or locations to explore, they either search on Google, TikTok, Youtube, or hear from friends. All of them have never used an app or website to learn about hiking or trails as well. When asked if they would use such platform that also contains detailed hike guides, those who are actually interested in hiking said yes.
Having an app like this would make it easier for them, as “doing research on my own and all of those scattered hiking places are confusing. An app that’s only for hiking around UCLA will be really helpful… to have more interest in hiking.” The participants would love to engage in this platform since it would be “more convenient to partake in this activity” as well.
Next, we asked the participants to interact with our prototype and provided some user tasks for them to perform to gain an understanding of the general flow. These tasks included signing up, exploring hikes in the home page, exploring the general hiking guides, and viewing the profile page. We followed up with the participants by asking questions specifically about the hikes, guides, and profiles pages. Through their answers, we were able to gain valuable insight on ways to improve our app.
After the participants interacted with our prototype, we again asked them some general questions concerning their experiences. They all thought that the app was very easy to navigate, as it was well structured and had an appealing layout. This led us to find that they themselves would use this app to discover new hikes as it contains all the information in one platform already, and since it contains the guides, it is very accomodating to beginner hikers.
Concerning the visual design and overall aesthetics of the app, the participants all liked how it is very simple, comfortable, and clean. One concern was the dense wording of the guides, and how text heavy it was. They would’ve liked to have images or short videos, something more engaging rather than having to read such a long article.
With the feedback, we made the following revisions:
- Adjusted trail details pages
- Guides less wordy
- Got rid of journal (combined with completed trails)
Hikes
For the hikes page, there were mostly positive reactions on how the information was laid out and how detailed it was. One small suggestion was to add wildlife warnings (bears, snakes, etc.) and more detail on whether the weather is suitable for hiking (too hot or too cold). The method of sorting on the home page was also questioned, as they wanted to know how it was initially displayed.
Guides
For the guides page, the overall consensus was that the guides were way too dense, making it hard to read, especially for international or non-native speaker users. One possible solution would be to just cut down on the text, and only convey basic information. Another solution would be to break up the text with images or interactive elements.
Profile
For the profile page, most of the participants liked how the information was presented, and appreciated the ability to customize the profile section with saved hikes. One participant raised a valid point that the journal was confusing, as it wasn’t made clear what it was used for. A solution that another participant suggested that would solve this issue would be to combine the completed hikes section with the journal section, and allow users to optionally add notes and images to their completed hikes.
After making the revisions, we then sought out another round of opinions to improve our designs. One of the main critiques was that the warnings/suggestions icon at the top of the page was a bit confusing, whether it was a button that users could input their own data or if it was just an icon for visual display. It also was found to be unnecessary unless it popped up in real time, so we ended up taking the icon away, and just leaving it as a Warning section in the trail information.
We also ended up bringing back the journal, as it allowed users to input their own ratings of the trails, as well as any pictures or notes they might have.
Final solution
The final solution of this project is a mobile app called HikeU, a platform geared towards beginner hikers at UCLA.
It includes a homepage that displays local hikes where the user can choose to organize the list of hikes based on various features of the hike which could be highly useful for beginner hikers because they often lack detailed information about hikes that more experienced hikers may already be aware of. The hike details also include information such as duration, difficulty, accessibility, etc.
There are also guides that inform beginner hikers on relevant topics such as how to get started with hiking, safety, equipment, ways to protect the environment while hiking, and transportation.
The user also has a profile that displays the user’s saved and completed hikes.
Future considerations
One thing we also discussed was having more user interactions, allowing them to input or change any existing information on the trail detail pages. As they would experience it first hand, it would be nice if they could input information real time, as well as upload their own pictures to be displayed on the trail page.
At the end of this project, the biggest takeaway I learned was how to work in a group. As most of my previous projects were done solo, working with a group with people of different backgrounds and skill levels was definitely a learning experience for me. Obviously there were clashing thoughts and opinions throughout the process, as well as an unbalanced work distribution. Although at times I got really frustrated due to miscommunications, I learned how to effectively resolve these issues, and in the end come out with the final product, HikeU.