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.

www.chinatimes.com

台灣是一個多山的美麗島嶼，愛好登山者不少，然而令人遺憾的山難新聞也頻傳。熱愛登山的軟體工程師柯政祥發揮所長，以數位科技輔助讓登山更安全，成功開發登山APP「Hikingbook」，提供山友一站式整合服務，從登山前

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.

Optimized users experience