Planit
A UXUI Case Study
About
PLANIT is a responsive web app designed to help support hiking enthusiasts mitigate danger in the planning of and during a hiking activity. This was created as part of the CareerFoundry UX Immersion Programme that I completed.
Role
Sole UXUI designer, product strategy, user research, interaction, visual design, prototyping, and testing
Timeline
January to December 2022
Tools
Figma, Figjam, Usability Hub, Optimal Workshop, Typeform
The problem
Hikers need a way to easily maximise the safety of themselves and their group while on hiking tours, because unreliable weather data causes frustration to hikers and can cause dangerous hazards to hikers. Furthermore, hikers often need to rely on multiple tools which can lead to inefficient planning which can effect their safety.
The solution
One tool that provides the link between hiker and hiker safety.
By offering users access to up to date accurate weather data in an intuitive way; by applying a simple and focused user interface that alerts hikers to impending hazards while on the go; and by automatically connecting hikers with third party rescue teams in times of danger.
Project overview
Many hiking enthusiasts face different hazards during a trail that make the safety of themselves and their groups challenging. As a keen hiker myself, I have experienced first hand the dangers that adverse weather can present, and therefore empathise with the types of frustrations that hikers can face during a pursuit.
While there are many hiking apps on the market, I found these are more geared towards finding new trail routes rather than optimising the safety of the user, therefore I identified an opportunity to develop my idea of providing a link between hiker and third party rescue teams.
Project goals
1. The app should be aesthetically pleasing, intuitive and easy to use.
2. The app should focus on maximising the safety of hiking enthusiasts during an activity
Research goals
At the outset, I wanted to gain an understanding of what aspects two of the most competitive hiking apps, Komoot and Alltrails, achieve in respect of their user experience. I also wanted to find out what people think about hiking apps im general, how they feel about using them, and what drives them to use them in the first place. With these in mind, I set these research goals:
1. Identify any opportunities for Planit via a UX analysis conducted on Komoot and Alltrails.
2. Discover who the users are, why they need support, where and when they will use the app and what Planit as a product will offer, via a series of surveys and interviews.
3. Uncover user frustrations, and pain points that could effect usability.
Competitive analysis
This analysis of Komoot and Alltrails using the SWOT model helped me identify some key insights and opportunities for how to approach the design of Planit.
Insights and opportunities
I noted that Komoot and Alltrails have a strong community of users who use the apps on a regular basis. This community is necessary for the success of an outdoor pursuits application. The content is detailed and offers additional data including weather forecasts and trail reviews. Trails should be easy to search so that users can easily view and compare different options.
I found it frustrating that both apps require user sign up, even just for browsing trails, and found that Komoot's content was especially detailed which meant it drained my battery quickly.
Komoot and Alltrails do a great job at providing direct ways for users to search, view and save new trails, but there are distinct opportunities to offer more options focused on safety.
Surveys and interviews
To further the research and gain insight into how people feel and behave towards hiking apps, I reached out on social media and acquaintances and carried out a series of surveys and interviews.
My survey consisted of 13 questions asked of 12 participants and my interview rounds, conducted via video call, consisted of 16 questions asked of 5 participants
Data findings
Research conclusions
Tools are unreliable
Hikers find themselves frustrated that the tools fail to provide them with accurate weather data, trail route information and support.
Difficulty using complex tools
Existing apps on the market can often be difficult to navigate and can cause users to be left feeling confused when attempting to understand complex data.
Environmental changes cause anxiety
Hikers can become anxious when they anticipate weather change but cannot accurately confirm it. Uncertainty relating to weather and other environmental hazards can lead to potential danger and harm.
Opportunities for Planit
I was excited to analyse the data collected from the surveys and interviews and identify the potential opportunities for Planit, therefore I ran a series of qualitative analyses to find patterns and relationships between participants' answers. These include:
Aligning to accuracy, reliability, and safety
Insight: No one app allows a user to view multiple sets of forecast data for comparison.
Opportunity: An app that allows a user to view multiple forecasts from 1 - 5 days and compare data sets.
Aligning to connectivity and accessible data
Insight: No one app combines both advanced weather and hiking info, so users need to use multiple sources.
Opportunity: An app that combines both advanced weather and hiking info.
Aligning to safety and communication
Insight: No one app allows a user to auto share their location, so multiple tools are needed for safety.
Opportunity: An app that automatically shares a hiker's location helps create peace of mind that they can be located in times of danger.
Site map
Based on the results of my research, I made a list of product requirements (not shown) for Planit and used this to map to categorise all of the features that would be offered. This site map is based on a co-existing hierarchy.
I decided upon five main screens that would branch off from the homepage (Discover trails, Community, My trips, My Account, and Help), with these including all of the subcategories.
Initially, I had discounted 'My trips' as a main navigation item, thinking it would be accessed via a link to the homepage, however upon reflection, I felt this wouldn't be particularly accessible if the user were not on the homepage in the app, therefore I added this to the navigation bar. Moreover, I reconsidered what a user might want to do when they open the app - potentially check their trips!
I had also added 'Community' and 'Blog' as two separate entities, but decided that these might be better to combine as one, since they both offer ways for a user to find community information and interact.
Furthermore, I conducted a quick remote card sort to validate and challenge Planit's site map. The results highlighted a need to think about the difference between 'hazard info' and 'view hazards' and similarly, 'weather info' and 'view weather' and the user interactivity with adding a date entry, needing to make it more intuitive for a user to understand the apps intended function.
User journeys and flows
Following the results of the user research, I identified two key types of hiker: the weekend hiker and the expert hiker. User persona 1 is shown below (user persona 2 not shown). From analysis, and creation of user personas, and mental models, I was then able to define the frustrations, needs and goals of the user type and could determine the navigation flow for a particular user journey.
User persona 1
User journey 1: Explore trails
User Flow 1: Explore trails
Wireframes
This image displays an iterative design journey in the form of wireframes for Planit app that I created and it follows the development from early pencil skecthes through to high-fidelity designs of the same screen - the homepage.
These next screens present the mid-fidelity design of Planit in its third iteration. Here, I focused on refining the core features and navigation flows of both user personas - to addresses their needs to be able to find new trails and set safety alerts. The numbered hands lead you through navigation.
At this stage, the design is still in grey-scale, however I wanted to include necessary detail as following this iteration, I would put it through a round of usability testing, therefore making it as intuitive as possible but not investing too much time on the visual aesthetics.
Keeping with the user story: creating a profile, this prototype was developed further to show more detail including written detail ensuring direct and focused language was used for the profile questions, and to allow for user testing to ensure the navigation was simple and intuitive to use. It was great to have the opportunity to make any changes before applying colour and bringing the designs to life.
Usability testing
Moderated user testing
Usability testing was carried out on PLANIT in two rounds, the first via moderated, remote testing with 9 participants taking part; the second via A/B preference testing. The goal for me was to identify usability pain points and design preferences of Planit's potential users.
Scenarios Tested
- Onboarding and set location
- Sign up
- Search for a trip via filters
- Save a trip to a new list
- Plan a new route and turn on alert notifications
Data findings of moderated user testing
With the data collected, analysed and filtered via a critical error evaluation, user pain points were addressed as the following and amendments were made in the next design round:
-
80% felt confused by the search radius screen and skipped the save button after setting their trip dates, and they said they felt frustrated at having to go back and click this for them to be able to continue. In light of this, I added a screen that houses all of the filter options and added a 'continue' button at the bottom of the screen.
-
60% found onboarding unclear, feeling frustrated there is not an option to sign up as a new user and not realising there is an option to so this later if they choose. Therefore, I replaced the new user screen with one that offers an option to log in, sign up or skip for those who wish to just browse.
-
40% of participants struggled to identify how to plan a new route from the "Explore" screen, therefore a search text field was added to the top of the screen and a button at the bottom.
-
40% of participants struggled to identify how to plan a new route using the search for location option, therefore I added a dropdown list of known routes/locations to assist.
A/B preference testing
Unmoderated remote preference testing was carried out by 14 participants via UsabilityHub to determine their design preference between two versions of the same screen within PLANIT.
Results of A/B preference test
User overall preference
71% of participants preferred version 2 with the simplified layout.
Statistical significance
According to UsabilityHub (2022), version 2 is performing better. The difference is 95.0% likely to be statistically significant meaning we can be confident that it is actually better, and not performing better due to random chance.
Changes Applied
Lines removed at top of screen, border box removed from around trip lists and greyed out lines added to differentiate between elements and lists.
Style guide
To identify the colour schemes that inspired the visual design of Planit, I searched through Pinterest and Pexels to find photographs and images of nature and the outdoors in general. Additionally, I utilised colour palette generators such as coolors to help guide my colour pairings.
When it came to choosing the typography for Planit, I found I gravitated towards a sans serif fonts such as Roboto and Noto Sans Malayalam. These fonts offer a clear and readable typeface. I did not want to overcomplicate the design using more exotic types and felt that simple was better for this type of application.
The style guide below shows the basis for my UI. Following my research of colour from other outdoor apps including Komoot and Alltrails, I decided upon two different shades of green for the main visual, and warning colours of red and yellow to highlight the alerts and hazards contained within the app.
Extract taken from style guide (click image to link to full guide)
UI design
To showcase the UI design, the following images represent a random selection of the screens I designed for Planit. Following the data collected from the user testing, I refined many elements of the screens and most importantly, I prioritised usability in the design.
Once the fonts and colour styles were added, I am very happy with how the screens create a good deal of visual interest and enhance the user experience of the app.
Interactive prototype
The final design of Planit is presented as a high-fidelity interactive prototype. Go ahead and explore the app! If you prefer, you can also access it on Figma by clicking HERE.
I also created a series of short videos that walk-through each feature. You can access the full suite by clicking HERE.
Responsive design
Designs for mobile, tablet & desktop breakpoints
Lessons learned
Upon reflection on the project, I note that parts of the process were particularly challenging, however, I am able to take valuable learnings from the way I overcame them.
Although I was passionate about resolving every issue that the users raised, I realised this would be an impossible task given the time constraints of the project. Therefore, instead of trying to satisfy everybody's ideals, I looked further into the user data to identify the most important issues that needed to be addressed first, with the rest being addressed in subsequent design iterations that could be guided by usability testing.
Additionally, self-reflection has taught me that while pride in one's hard work and attention to detail are crucial, perfectionism may also be a barrier that prevents advancement. Instead, by applying a rapid and iterative design method, a viable solution can be built and then tested to quickly validate potential resolutions in addition to finding and addressing further issues.
Next steps
Given the opportunity to spend more time working on PLANIT, I would invest in usability testing to further validate my designs ensuring that PLANIT's users recveive the best user experience possible.
Additionally, I would like to develop PLANIT's features including designing access to offline trail maps and building out the user community feature. I would also like to develop the design for increased accessibility including voice user interfaces.