Vela- The Only Weather App You'll Need.
My first step was to conduct competitive analyses of similar existing weather apps and compare their strengths and weaknesses
User Research
Usability Testing
UI Design
For 2023, I was tasked with creating a weather app called Vela. It had some functional requirements; such as an onboarding page, login/sign up page, profile area, navigation menu, display of wind, wave, weather, and algae conditions.
When first thinking about this weather app project, I had some initial thoughts/ideas pop up. I knew that I wanted to make this an “everything” app. I wanted to create a weather app that has everything any kind of user wants and needs to know about the weather so that they don’t have to bounce between different apps to get the information they need.
I first conducted a competitive analysis of similar apps; Windy.com and AccuWeather. I found that they both had their strengths and weaknesses (Windy is good for map viewing, AccuWeather is good for individual location data viewing), and that there is definitely a good opportunity to create an app combining their strengths and adding new features that competitors don’t have.
To help me understand weather app users, I created two user personas; Hazel and Makoa. An older woman named Hazel who likes to garden and Makoa who likes to be outside and surf.
I also created objectives for each persona as well as a user flow to go along with that to really understand the user’s journey of how they would navigate the Vela app.
Makoa's objective: "I need to be able to plan surf trips when the conditions are good, wanna stay safe out there."
Hazel's objective: "I want to be able to quickly check the weather so I can plan my day without any surprises."
I also created user journey maps for the both of them based on their objectives. Makoa wants to be able to access his account easily and change any settings that he wants (for surf related conditions). Hazel wants an easy to use app that'll tell her all she wants to know (mostly precipitation and temperature).
The next thing I decided to do was create a sitemap for Vela. I wanted to make sure that the layout wasn't too confusing but also provides the user with any and all information about the weather conditions for anywhere on the planet. (I ended up making my locations/search locations it's own section on the app to make it easier to find based on people not knowing where to find it during usability tests)
Now onto the wire framing process! I started with mobile design and designed a good chunk of the screens and got the overall layout of the Vela app. Below are my mid fidelity screens for Vela keeping Hazel and Makoa in mind with the design.
I then inputted text onto each of the screens and made a clickable prototype. Here's the link to it: https://marvelapp.com/prototype/bh0e17j/screen/91759007
As I began finalizing my designs, it was time to conduct usability tests. I conducted 6 usability tests for the mid fidelity clickable prototype I created. I gathered all of the feedback I received, the positive quotes, negative quotes, observations, and errors (what they had difficulty with) and organized it into a rainbow spreadsheet.
I identified 5 issues and made adjustments to the app design.
Then I made my final mockups! This is when I implemented UI design and brought the Vela app to life with color and graphics
I gave desktop design a go as well and made a possible screen for the Vela desktop app.
And that wrapped up my Vela project! I learned a lot from this project and continue to learn more as I continue to develop and work on my UX/UI design skills. This was my first design project and I'm excited to tackle many more in the future!