Hikingbook App
One-stop solution for hikers to prepare easily and hike safely.
Case study, Redesign, Mobile, Launched
Responsibilities
User research, Business strategies, Information architecture, Usability testing, Wireframing, Prototyping, A/B Testing
Tools
Miro, Figma, Asana, Slacks, Illustrator, Photoshop, OBS Studio
Organization
Hikingbook Inc.
Category
Hybrid App
My Role
Product Designer
Duration
24 weeks
Hikingbook had developed many thoughtful features for hikers. However, they didn’t consider the information structure so well in advance, therefore many features were not discovered by users. They'd encountered the hurdle that most features didn't exert the biggest efficiency.
Problem
About
Hikingbook provides innovative solutions to mountain-lovers and builds a fully supportive community for hikers from around the world. Users can plan routes, navigate the outdoors using offline maps, record hikes, and share their journey using our services. This app has attracted more than 80,000 hikers to use as a daily hiking tool in Taiwan.
Reasons to conduct a redesign
The company had always believed what users need is important, thus they applied many features to the product based on users’ feedback. However, the more features were added, the more involuted the structure became. Sometimes users came up with a negative opinion about the non-intuitive experience and continuing confusion.
After I joined the development team as a product designer for half a year, I’ve gotten a deeper understanding about the product. My supervisor asked me to lead the redesign project from beginning to end to solve these relevant problems.
Observation
When I was one of the users
Before I joined the development team, I was one of the users of the Hikingbook app for a few months ago. What happened to me at that moment was I had encountered a situation in that I couldn’t distinguish how can I proceed to the next step. In the end, I decided to stay away from this app because I lost my confidence in controlling this product.
Deeper insights
I had more chances to look into the detail of this app after I became one of the development team. What I found was that the company preferred to meet users’ needs from only one aspect. They didn’t consider the entirety of the product when they had an adjustment in the early stage of development. Thus, most practical features were covered due to the less-noticed placement and inappropriate hierarchy. This caused a great inefficiency for users to reach their goals.
In order to collect more feedback, I’ve invited 5 participants to attend the contextual inquiry. Three of them were the existing users, yet the rest of them were new users.
Here are some pain points I finalised after my examination:
Information structure
A lack of classification led to too much information being shown at once.
Ambiguous state
Display actual status with obscurity.
Inappropriate hierarchy
Putting two elements with no similarity into the same layer may let users get lost.
Tone of voice
The tone of voice was ill-suited to the product in the minds of the users,
so this may not have the desired impact.
And more...
Constantly popped up view during the ongoing tasks
Few dynamic interactions to guide the user’s operation
Misinterpretation causing on specific features.
Problem Statements
I evaluated product usability from three factors: Effectiveness, Efficiency, and Satisfaction.
Effectiveness
As users operate a task, do they finish the flow with expectation? Efficiency: How long does the user complete a task?
Efficiency
How long does the user complete a task?
Satisfaction
After finishing the task, does the outcome fit the user’s satisfaction?
As far as the user’s concerned, I prioritized these factors to the order:
Effectiveness > Efficiency > Satisfaction
Redesign Goals
Necessary
Create design principles and adopt them in all products by Hikingbook.
Fine-tune minor issues. (Icons, UX writing, etc.)
Guide and support the user to complete the task at the first beginning.
Reinforce the purpose of the function that is not articulated enough.
Improve those processes which are not clear and intuitive.
Simplify the primary user flow
Show a transparent and explicit status to users at the right moment.
Refine the interface and style to a great consistency.
Users can accomplish the major task in a quick operation
Probable
Increase customer retention.
Attract new customers.
Win back competitors' customers
Enhance users’ engagement
Amplified word of mouth
Understand Existing Users
Didn’t begin with pleasure
The company had gotten opinions frequently from the existing users, who shared to the customer service that the operation was so complicated, especially for beginners. A lot of feedback showed that users have great difficulty when getting started. They didn’t know what things could be done and how things could be solved by this app. Ultimately, they didn’t have enough incentive to explore further.
Unfamiliar features became a higher threshold
From the internal aspect, the operation flow by Hikingbook had a little different compared to other hiking-related apps in Taiwan. For example, only Hikingbook had a synchronization mechanism that can let users decide whether they want to sync their data to the cloud by their intention. Moreover, Hikingbook had some advanced features that others didn’t have, like Safety Watch. Safety Watch can make communication between hiker and their family or friends during hiking. When activated, user can automatically update their current location on a private webpage. Despite this practical function being developed for a while, most users still have no idea how to activate this feature at the right time.
Inadequacy of communication
The company had to consider how to communicate with users carefully and precisely when they were ready to start an action. Users have full of curiosity at their first use, thus this moment is the golden chance to explain what and how these features can bring users value.
Analysing Market & Competitiors
Competitive Benchmarking
Interview & Validation
In order to have further understanding of real users. I approached some spontaneous hikers who were around me during my hike trip. I’d interviewed 8 hikers in-person in total. I asked them which tool did they use when go hiking, and what is the reason for. If they use Hikingbook luckily, I will ask them any challenges they had encountred before.
Last but not least, I created a questionnaire and shared it on Facebook community, this help me to collect quantitative data from a broader group of users.
Key Findings
By observing and analysing these competitors and real users with deep insights. I found some similar features offered across these apps, such as an offline map and tracking routes were the most common features. Therefore, I hypothesised these were the key features that must be streamlined.
Through those interviews, I discovered users prefer to use a tool that can let them operate in a lightweight and linear way. Because hikers usually have to carry a lot of belongings and heavy backpacks during the hiking trip. Plus, mountains in Taiwan are mostly steep or have complex rough terrain. Thus they don’t willing to make a lot of effort on details or decode the complexity of the product while walking on the mountain.
Solution Support
Brainstorming
I initiated a brainstorming event in which every colleague could put forward their unconstrained ideas. This collaboration could diverge our notion at first, and then converge to a more tangible solution.
Streamlining the Experience
Reducing Redundancy
Minimise the distraction on the map.
Hide elements opportunely when content was presented on a mobile screen.
Reduce a long text.
Avoid putting an important message in the placeholder.
Avoid giving an long interpretation by text only.
Feature Enhancements
Made main features stand out.
Apply the appropriate size of the text in different layouts.
Use the consistent style of icons and colours.
Easy to start tracking.
Display a induction before user enters the app .
Adopt user segmentation questions in the onboarding flow to understanding our customers.
Optimised Map page
Show GPS status.
Circle outline buttons make a clickable affordance.
Different menu bars in different modes.
Highly recognizable icons (Start, pause, stop)
Show recording status
Customize the important information on the top bar
Reinforce advantages of Premium membership
Using small badges reminds Freemium member features limitations.
Freemium member will have some usage quotas.
Usability Testing
I've made the lo-fi prototype for pilot testing, and then made a hi-fi prototype for user testing. I was responsible for hosting the Usability Test activity. We invited five participants in total, and let them try the prototype under our observation. Ultimately, we've truly received users’ voices during the testing. Moreover, this event could verify whether our revised version achieved our goal and the user's goal or not.
During the test, we filmed the reaction of participants and also their phone screens, trying to capture all the possibilities that might affect their behaviour. Not only observe the physical symptoms, but also mood changes. After testing, I asked them the reason for each step and any hurdles they've encountered. By doing these, I gradually understood the motivation and logic behind the screen.
System Usability Score
I asked each participant to answer the SUS (The System Usability Scale) after the usability testing as a end task. A SUS score above a 68 would be considered above average and anything below 68 is below average. Our testing outcome was 76, which was hopefully above the average. It was one of the indicators that represented our revises was workable and practical.
Testing Report
After collecting all the detail from usability testing, I ordered these problems with various weights and priortized the issues by descending sequence.
Continuously Iteration
After the testing, it made me clarify that "optimizing products" wasn't barely a path straight to the destination. What we should focus on is continuously observing users’ behaviour, and keep empathizing with their thoughts. Meanwhile, the product team need to maintain the quality of the product, so that we can create a product that finally hit the market.
Design Outcome
Comparison
Map Page
Avoid showing too many redundant elements, showing the main features only instead. Side features were placed on the next layer. Meanwhile showing more information on the map by full-screen view.
Waypoint’s Detail
Before: Not holding enough hierarchy of components, thus users hard to focus the important information at first glance.
After: Reinforce the visual from the title of the waypoint. Strengthen the clarity by applying separate backgrounds and separators to distinguish sections.
Explore Page
Before: Users could only see two posts on a page. The information shown inside the card wasn't relative to users.
After: Showing two posts in one row efficiently utilise the screen space. Displaying the essential information that users care about.
Upload Your Hikes
Before: Users have to upload all records when uploaded to the cloud. The process would be heavy and time-consuming. Sometimes this causes a big crash to the company's data system.
After: Users can quickly upload a single record in one go and retake the authority of control.
Add a Waypoint
Put the upload button of photos at an obvious placement, so that can remind users don’t forget to upload their fantastic photo at the same time. Arrange the detail information in a logical order.
Hike’s Detail Page
Before: Displaying a lot of text without arrangement might make users tired of inputting information.
After: Simplified input sections. Let users focus on one task each time. Also, decrease the pressure of reading for users.
Show Routes On the Map
Before: Only showed different statuses by changing the colour of the text. The change was too subtle and lack of accessibility.
After: Adding the understandable icon beside the text help users clarifying the meaning of the feature. When the state changes, both colour and icon will change.