Vela
The Process
About - Vela is an app for the outdoor enthusiast, providing up-to-date weather information, activities, and connecting users with one another
Role - UX and UI Designer, solely responsible for this project, my curriculum at CareerFoundry
Duration - May 19, 2021 - December 2, 2021 (under budgeted time)
I found the following to be beneficial methods for my design development
Discover
In order to remain safe, and enjoy themselves with no distractions, outdoor enthusiasts need a weather application to help them plan appropriately for their activities. From camping to surfing, active people lack a collective weather application. Additionally, outdoor enthusiasts need reliable reviews and information to discover new activities near and far. There is currently no application that combines these two. Enter Vela.
1. Understand the Problem
To begin the design process, I first needed to get a better understanding of the current market and my potential users. I began by writing possible problems my users could have, and created an initial hypothesis to begin my design thinking.
Problem Statement
Outdoor sports aficionados need a reliable source for the weather in their region(s) in order to plan their activities safely.
We will know this to be true when users plan their outdoor sports using our application reliably for safe outdoor excursions.
2. Understand the Market
To gain further insight to the weather and active communities, I conducted a competitive analysis. This helped me to understand what users are currently receiving, and what works well (and what doesn’t). I surveyed three applications, although Open Snow and Open Summit are ‘sister’ apps, sold as a bundle if desired.
- Very user driven, unlike other apps on the market
- No need to rely on guidebooks, crowdsourced conditions in your area
- Download maps before heading to off grid areas
- Record an interactive journal
- Very little content from entire country
- Weak social media presence
- Condense your weather information
- Bring reports other apps don't have
- Up to date reports on trail conditions
- Provide snow conditions for mountains/passes all over US & internationally
- No road condition information
- Back country information less available
- No user centric information
Takeaway
Both these applications offered great inspiration for Vela. They both included simple interfaces and were very intuitive and easy to navigate. These applications offered (across three platforms) a variety of features desirable for Vela, such as the community uploads, or up to date condition information. These apps were an excellent representation of the market, and a wonderful jumping off point in my design process. I was also pleased to see that no application currently offered exactly what Vela hoped to accomplish, thus an empty niche market!
3. Understand the Problem
To begin understanding who my users are, I conducted user interviews. I promoted my project to outdoor enthusiasts in my personal network. The selected interviewees were people I know to frequently participate in outdoor activities. I additionally scoped out participants from varying regions.
Survey goals
1. Find preferences from user using weather apps
2. Discover how users plan for outdoor activities
3. Discover what features are important to users for continuing app usage.
Analysis
In order to understand the results of my interviews, I complied an affinity map. I recorded notes during the interviews and complied all relevant, important information. Notable items were participants behaviors/attitudes, needs/goals, frustrations, relevant quotes, and facts. I used the whiteboard website, Miro, to compile the affinity map. Results below.
To gain a further comprehension of these collected results, I complied the data from all the interviews together into clusters. These collections were labeled for further insights to help the development of Vela. This was further complied using Miro.
Takeaways
This research led me to some 'takeaways' for each goal. I specified this below.
Goal 1 - User Preferences
- Users look at more features than I thought, such as humidity or air quality
- Weather by hour feature is very important
Goal 2 - How Users Plan for Activity
- Weather is a huge part of planning for outdoor activities
- Users are not always afraid to venture in weather, just like to be prepared
- Long term planning is not as much of a priority
Goal 3 - Continued App Usage
- Paying for apps is not a priority, and ads don’t bother as much as I believed. Perhaps there is a “free” version to be created
- Reviews are important and trusted
Identify
After discovering more about my users, and the market they currently have, I was ready to place myself into the user perspective.
Represent the User
In order to gain perspective and keep the user in mind, I created user personas. These personas helped me to keep the user in the forefront of my mind during every phase of the design process. To build these user personas I used Powerpoint. I tried to keep the information close to the preliminary research, and what I know about outdoor enthusiasts. I pushed myself with "Derek" to create a different persona than somebody I may know in my personal circle. Creating these personas were one of my favorite parts of the process.
User's Journey
In order to keep my design user focused, I created user journeys for potential scenarios my personas could face going through my application. Again, I used Powerpoint to create these graphics. I aimed to keep the tasks simple and on point for Vela, in order to really understand and learn the process.
Ponder
Before entering the design phase, I wanted to make sure I was clear on the steps necessary for my users and their tasks in Vela. Keeping the personas in mind, I created flow charts to begin enhancing and developing the research thus far.
Enhance the Usability
I created task analysis and user flows for my persons to really see what was required to complete their goals. These visual representations of tasks help to see a complete picture, and avoid missteps as one continues. The task analysis' were made in Powerpoint, and for the user flows I used Sketch. I tried to keep these tasks in line with our User Journeys and the over all hypothesis of Vela.
Enhance the Total Experience
I created a sitemap to give myself a plan as a designer. This information architecture gives hierarchy to the various levels of the application, for a full scope of the expectation of the design. I used Sketch to create this sitemap. Combining my original plans for Vela, with initial market/user research, helped me to create this original Vela sitemap. It was meant to be simple and intuitive,, but also to cover all the bases necessary to provide a seamless customer experience.
In order to gain more knowledge of what my users desired, I conducted a card sort with UXmetrics. Using the categories in the site map above, I found test subjects from my personal circle and my peer groups. The results were surprising. It required me to be flexible and change some ideas based on the research. These changes were reflected in a new site map, seen below. The research reflected having two weather sections, and activity searches being combined with the community.
Design
To begin the design phase of my process, I sketched out low fidelity wireframes of main pages of various features of Vela. The focus here was to begin to visualize where elements would go in each wireframe, without being to focused on UI elements. I started with sketching- the old school way, pen and paper! Following the initial research and the sitemap, these sketches were the jumping off point.
Sketch Ideas
Low Fidelity hand drawn wireframe sketches
Create Wireframes
After my low fidelity sketches, it was time to bring my designs to a digital form. I revised these images into mid fidelity frames using Balsamiq software. This phase of the design process allowed me to familiarize myself with a new software, as well as begin to see sizes of icons on a screen. We begin to see the shape of the application more clearly.
I further developed the mid fidelity frames with Figma. Bringing the designs over to this software would eventually allow me to create a clickable prototype. Once again, I was lucky enough to familiarize myself with a new software, in addition to new websites and applying icons and shapes across a wireframe. These iterations began to see color. We still see much less fluidity and cohesive thought through these screens however. These designs were an iteration after more research. This research showed the icons needed to change.
Revise and Reframe
Continuing with Figma, I reached these high fidelity frames.
note- activity map was used here as it was the closest frame I had available for this iteration
These wireframes required many edits and adjustments. The process was far from linear. I conducted usability tests (outlined below), listened to the feedback of my peers, implemented native platform guidelines, and reached out to my personal network. I then reached this final design.
Test
Map out the process
In order to evaluate the usability of my products, I created a usability test plan to outline the process ahead of me. I created a test script to ensure I was asking the same questions for all my participants. By staying consistent, I am able to receive the most reliable test results. By being thorough with my tests, from planning to scripting, ensures I receive the most fair results possible. Also, it helps to keep participants comfortable and informed, while I stay professional and on point. This test was done with the mid fidelity iteration of Vela. See that prototype here.
Report Findings
I conducted in person moderated and remote moderated tests with 6 various participants. I recorded the sessions, and took notes, and once completed complied the data in the following ways.
Affinity Map
Rainbow Spreadsheet
Once the data was complied and organized in the affinity map, I transferred this data to a spreadsheet. Color coding the information helps for easier analysis, thus, the rainbow spreadsheet. After analyzing, I was able to apply a severity rating of the errors using the Jakob Nielsen metrics, in order to identify the top 5 errors. This information was complied on Google Spreadsheets.
Apply Solutions
Issue 1: Weather Icon (high)
Change the icon so the confusion is gone.
Most of our test participants went to the wrong icon during testing. By tweaking our lower menu with new icons and combining appropriate sections, users will have a clearer picture of the apps features.
Issue 2: Activity Search (high)
Add a location search in the activity section
User feedback highlighted how users need a location to search for their activities in. A location bar has been added above the activity search bar so users can search in specific area for their activities.
Issue 3: Home screen confusion(med)
Add edit icons, change onboarding.
By adding edit icons to the customizable home screen, users will be more clear on what the boxes on the home screen are for. Additionally, the onboarding screen has been removed and the beginning tutorial will now be in the form of coach marks.
Issue 4: Hamburger menu (low)
Remove hamburger menu, add icons
The hamburger menu was originally intended to enable users to switch between map and list mode. User feedback showed this was confusing, they expected a hamburger menu to provide more options. The hamburger menu will be removed and replaced by list/map icons to switch between modes.
Refining the Design
I continued to refine my design. I sought council from my tutor, mentor, and personal network. I studied Gestalt psychology and design principles. I put myself in the eye of the user as opposed to my personal agenda, and Vela was ready for handoff. Explore the final prototype here.
Reflection
This process has been very rewarding. Parts of UX come very natural to me, and while other parts are challenging, I welcome some friction for my career. I have learned to trust the process, and my ability to correct as time moves forward. I worked with an excellent mentor, whose help has been invaluable.
What went well: I am happy to have the feedback I did. Having to pivot and change multiple times, in the name of the user, helped me to understand how the design process is not linear. The ability to change and mold as the process continues is a helpful lesson. The feedback of both my mentor and peers brought me to my cleaner, final design, which if I had not asked for or listened, would have never been realized. I was happy to learn new softwares and look forward to continuing my career. I enjoy the parts of UX that are 'old school' such as pen and paper sketching, or affinity boards with post it notes, the most. While I recognize these methods can be done on computers, I look forward to the collaborative and thoughtful process taking one away from screens.
What did not go well: I think portions of this product could have been tested in more depth, and at different iterations of the application. The addition of a community feature it is more complex than I originally anticipated, and thus requires more rounds of testing and continued feedback. As the app developed more, I could have done more tests focusing on more complicated features, which became clearer as the process continued on. I could have added more weather information earlier on in my wireframe/sketching process. I also would like to reflect more throughout the process next time, by looking back at early research more frequently.
Overall, I feel prepared to enter the field and dive into a new project to only learn and grow more as a designer in my new career.