Duration: Jan 2022-Aug 2022
Role: UX|UI Design
Tools: Figma, Optimal Workshop, FigJam, Usability Hub, Notability
Overview
Vela is a responsive web application with the motive to encourage users to explore new places and make the most of their outdoor adventures. The aim is to present data through visually appealing icons, breaking away from traditional text-heavy weather apps with blue-themed designs.
Avid hikers and mountaineers require a robust application that assists them with weather forecasts, critical notifications, and recommendations before embarking on their hiking excursion. This need will be met with the development of a unique application that offers in-depth information beyond just the weather conditions.
A detailed weather information
Important insights about the place to be explored
Guide on Hiking gear based on the weather and terrain
The Process
Throughout the development of my application, I have adhered to the following design thinking process, ensuring the correctness and proper order of each development step.
Gathering Insights
The competitive analysis was a crucial step in determining my app's most effective design strategy. Through the examination of two established weather apps, Opensummit and Weatherbug, I analyzed a range of factors, including the apps' overall strategy, market advantage, and SWOT profile. This allowed me to assess key elements such as usability, layout, navigation structure, compatibility, differentiation and calls to action (CTA), all of which are important considerations in creating a compelling and user-friendly product.
Some of the features lacking in these apps include:
-
Overwhelming number of features, making the initial app usage confusing in OpenSummit
-
Absence of graphical representation for temperature, rainfall, humidity, barometric pressure, and other factors in Weatherbug
-
Inaccurate notifications displayed at the top of the home screen in WeatherBug.
Explore the detailed competitive analysis here.
Opensummit
Weatherbug
User Interviews were conducted with three participants, each having a different experience of hiking or mountaineering. The information collected was then analyzed which led to the following conclusions:
-
No application in the market provides all the weather information.
-
Mountaineering requires precision planning and is much different from just casual hiking.
-
The accuracy of weather apps is always a matter of concern for mountaineers as the weather changes fast in the mountains.
-
It is a good option to learn about weather patterns which will come in handy in certain circumstances.
Presenting the comprehensive list of features after research:
Weather Features
-
Graphical representation of weather information
-
Display in different units of measurement
-
Overlay maps for weather conditions
-
Alerts, precautions, and notifications of disasters
Additional Features
-
List of hiking gear to be carried
-
Information about food, cell coverage near the hike
-
Add notes for last-minute preparations
-
Reviews with the latest weather updates and photos
All about the User
I developed four distinct user personas, each with unique interests, capabilities, and locations, to gain insights into how they perceive hiking while using apps for the same. Through this process, I discovered that accessing weather information was not straightforward and user-friendly. The notations used were confusing. Additionally, apps lacked sufficient data for comprehensive planning, as they failed to provide information about available resources around hiking places.
In addition to the personas, I have developed two user journey maps and two mental models to devise solutions and enhance the app's usability and user experience. The complete set of personas, user journey maps, and mental models can be found here.
User Persona
User Journey Map
Mental Model
Moving on to Information Architecture.....
I have carefully considered three user flows to enhance the app's functionalities, making it easy for users to plan their hikes. The first scenario is to help users check real-time weather conditions for a particular place. In the second flow, users can quickly determine if any specific hiking gear is required for their adventure. Lastly, the third flow allows users to add important pointers and notes in one convenient note section. All these features are included and can be found in the same place, ensuring a seamless and enjoyable hiking experience for users.
Below is the final version of the sitemap that has been developed after 2 to 3 iterations as the design process proceeds, incorporating changes based on Card-Sorting and Usability testing methods.
Making of Vela
I began by sketching my ideas using the app called Notability. Once I had a clearer vision, I transferred the concepts into digital form, creating wireframes on Figma. These low-fidelity wireframes and prototypes formed the initial screens of my project, providing a starting point for further development and refinement.
Click on the place
Click on the Weather icon
Check the Weather for a Nearby Place
Click on the place
Click on the Weather icon
We can observe how the paper sketches are further defined in the mid-fidelity prototype, with the same functionality.
Scroll down to find the review section to write a review
Write a Review for a Place
Click on the Place
Scroll down to find the review section to write a review
Click on the place
The three user flows of three different personas are considered the foundation for constructing low-fidelity prototypes which are further refined into mid-fidelity prototypes.
Click on the Saved Menu
Click on Notes Tab and add a note using the icon
Add a New Note
Click on the Saved Menu
Click on Notes Tab and add a note using the icon
Usability Testing
I executed usability testing to assess the user experience and functionality of my designs. This was achieved through conducting comprehensive testing methods such as user interviews and A/B testing, to gather valuable insights into the usability of the prototypes. I closely monitored and recorded the participants' interactions and feedback, enabling me to pinpoint areas of improvement, design opportunities, and user pain points. The results of the usability testing were then utilized to make necessary adjustments and enhance the overall user experience. In my case, I administered moderated-remote tests to six participants, taking into consideration the following aspects during each session:
-
The ability of participants to complete tasks
-
How long does it take participants to complete tasks
-
Whether participants enjoy interacting with the product or service
-
Whether the product or prototype has any critical errors
Several errors were corrected, and the prototype was modified based on the interactions and observations made during testing.
The five major issues addressed are described below:
Issue 1: Weather of the entered location not displayed anywhere (High Severity)
Issue 2: Allowing users to describe the weather using icons in the review section (Medium Severity)
Issue 3: Users didn't click on the different hiking gear (High Severity)
Issue 4: A method to save the description provided in the hiking gear section for water access (Low Severity)
Issue 5: Not able to add notes under a particular place (High Severity)
The prototype underwent refinements based on insights gained from usability testing. The five main issues, along with others addressed in the rainbow tracker, were successfully resolved.
The intensity of hike icon are changed according to the appropriate colors
An icon to upload photos in the review window added
The weather of the current location added in the home screen
The floating button is removed in the favorites section.
Images are added with appropriate depiction
The notes section is updated with two further sections for easier distinguishing and usage
A scrollable box is added for description to hold the variable size of information
The Final Design
The prototype is improved with the implementation of the chosen font and color scheme, which aligns with the established brand identity. Furthermore, accessibility considerations were taken into account during the selection of colors and styles for the application to ensure a seamless user experience for all users.
Click on the Place
Scroll down for review section
Click on Write a Review
Insights Section
Click on Hiking gear
Scroll down to get information in graphical form
Click on Water
Click on the weather icon
Color Palette
Primary Colors
Secondary Colors
Typography
Poppins
Light:
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Regular:
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Medium:
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
High-Fidelity Wireframes
Prototype in Figma
Reflections
-
Gained experience in conducting interviews and user research for the design process of the app.
-
Discovered the crucial role of usability testing in continuously improving the design and the iterative nature of design work.
-
Recognized the significance of considering accessibility guidelines in the design process.
-
Encountered challenges in selecting appropriate colors and developing the visual and user interface components of the app
-
Adhere to established design principles and guidelines when creating the user interface of the app.
-
Enhance abilities in constructing responsive websites.
In the Future....
-
Explore a wider range of color options for the prototype.
-
Investigate and integrate features tailored specifically for the needs of mountaineers.
-
Integrate engaging animations, which are currently absent in the prototype.
-
Incorporate cutting-edge trends, such as personalized user experiences and three-dimensional design elements.
%20Mockup_jp2.jpg)
