Raindar is a responsive website which allows users to view live update on the weather.
product
The current solution to viewing the weather is too general and some users find it hard to decide on their outfit and plan due to this problem.
problem
The goal of this project is to design a website that displays live updates on the current and future weather conditions.
goal
Title: UX Designer/Researcher
Responsibilities: User research, journey map, wireframing, high/low fidelity prototyping, and user testing.
role
project overview.
Platforms for viewing weather interrupts the user with unrelated ads.
1. ads
Wasted time due to inaccurate weather conditions. Not all sites display the same information.
2. accuracy
Most websites do not provide enough weather information. It is also difficult to find specific data.
3. product
When a user runs into trouble, they are unable to locate a customer service contact point and are unable to find the answer to their questions.
4. support
pain points.
User interviews were conducted to understand the target audience and their needs. The goal was to identify what issues or complaints users have while using a weathering site of their choice. A primary user group identified through research were athletes who were unsure how to plan their day due to inaccurate weather readings.
user interview
interview goals:
.png)
-
Which weather forecast site do you currently use?
-
How often do you open the site? When you do, what is your motivation for doing so?
-
What challenges do you face while using the website? How does this make you feel?
-
Is there any way in which you feel these challenges could be resolved?
-
Do you use you weather sites for any other uses?
interview questions:
-
Ages 13-62
-
People who view the weather every day
-
Include participants of different genders
-
Include participants with different abilities
-
Include participants who use different sites
target participant characteristics:
A competitive audit scouts the competitors to understand their approach and identify the strengths and weaknesses of their brand. The aim is to discover what works for other companies and incorporate those strategies into the design and gain a competitive edge. Three competitors are audited for this project: The Weather Network, Apple Weather App, and AccuWeather. The audit includes my notes and while interacting with their site and a report.
competitive audit
personas.
user journey map.
site map.
Paper wireframe is a rough sketch of each interfaces and their elements quickly illustrated on a paper or tablet. Taking the time to draft iterations of each screen of the site on paper and a tablet ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
The digital wireframe was designed using Figma. It replicated the paper wireframe, but contains more detail and is scaled. This will be used to create a low-fidelity prototype and conduct usability testing. For a more detailed description of each wireframe, check out the PowerPoint.
To ensure a responsive design, the paper and digital wireframes include a desktop and mobile version.
starting the design
paper | digital wireframe
Title: Creating a responsive weather website
Author: Taejun Kwak, Student, taejunk31@gmail.com
Stakeholders: Raindar Customers
Date: Apr 1st, 2023
Project background: I am creating a responsive website to provide accurate weather information with live updates. My goal is to create a product that is easy to use and increase customer satisfaction.
Research goals: I would like to figure out where users struggle while navigating through the high-fidelity prototype. Also, any design improvements or feedback is much appreciated.
research plan
introduction
usability studies.
-
How long does it take for a user to read today's weather?
-
Are users able to successfully interact with Raindar?
-
Are users using every feature? Do they care about articles and videos?
-
Are there any parts throughout the process where the user was confused?
-
Is there any issue in terms of responsiveness?
research questions:
-
Time on task: how much time users spend reading the weather
-
User error rates: how often users click on elements with no connections
-
System Usability Scale: a questionnaire to evaluate customer feedback
key performance indicators (KPIs):
-
Unmoderated usability study
-
Location: remote (participants will go through the usability study in their own homes)
-
Date: Sessions will take place between Mar 31 - Apr 1.
-
5 participants will simply use the website and go through each feature.
-
Each session will last for 25-30 minutes
methodology:
-
Participants are anyone who views the weather daily
-
Participants should be between 18 and 62.
-
Participants should include a fairly even distribution of genders across the spectrum and people with different abilities including:
-
1 user of assistive technologies
-
1 user with a visual impairment
-
1 user who isn’t fluent in English
-
-
Incentive: Participation in a raffle for a $20 amazon gift card
participants:
-
Prompt 1: Take a look at today's weather for Toronto and Vancouver.
-
Prompt 1 Follow-Up: How easy or difficult was it to read the weather? Do you remember the information you just read?
-
-
Prompt 2: Play around with Raindar.
-
Prompt 2 Follow-Up: Did you have any difficulties understanding the feature?
-
-
Prompt 3: Take a look at the weather information for the next 7 days.
-
Prompt 3 Follow-Up: How easy or difficult was it to read the chart? Is there any other information you would like on it?
-
-
Prompt 4: Take a look at the videos and articles.
-
Prompt 4 Follow-Up: How easy or difficult was it browse the videos and article section?
-
-
Prompt 5: Go back and forth from the web version to the mobile version.
-
Prompt 5 Follow-Up: Was there a feature that was hard to use or view while on a different version?
-
Have the participant complete the System Usability Scale. Participants are asked to score the following 10 items with one of five responses that range from Strongly Agree to Strongly disagree:
-
I think that I would use this website frequently.
-
I found the website unnecessarily complex.
-
I thought the website was easy to use.
-
I think that I would need the support of a technical person to be able to use this website.
-
I found the various functions in this website were well integrated.
-
I thought there was too much inconsistency in this website.
-
I would imagine that most people would learn to use this website very quickly.
-
I felt very confident using the website.
-
I needed to learn a lot of things before I could get going with this website.
-
I found the design responsive.
script:
research insights.
There are too many number on a single chart making it very difficult to read it.
Next 7 days chart is confusing
The footer for the mobile version is the same as the web version. This is not responsive and it is too difficult to read or press anything on the footer.
Problem with mobile footer
There should be a separate page like the video section to browse all available articles.
Browsing articles is not possible
refining the design.
Using the wireframes and insights gained from usability studies, mockups which includes branding and images was created. There are two versions: desktop and mobile. The icons are all made from scratch and the theme are blue colours to represent the sky. Once the mockups are finished, a high-fidelity prototype is created by connecting buttons and interactions. It is key to ensure all user-flows are considered.
mockups | high-fidelity prototype
desktop version.
moving forward.
mobile version.
-
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
-
Conduct more user research to determine any new areas of need.
-
Gather a team of engineers and see if this can be developed into a real app
next steps
impact: Raindar is a responsive site that considers the user needs and ensures a positive experience when viewing the weather.
what I learned:
-
The consideration and planning required to design for both web and mobile.
-
Smoother transitions using Figma prototyping feature
take aways
problem statement:
Ha-yeon is a 21 year old student who spends a lot of time outdoors. She wants a weathering app with live updates to better plan her day.
user story:
As a student and athlete who is always outdoor, I want to know exactly the weather condition to arrange my day and be prepared for the weather.
problem statement:
Michael is a nature photographer who needs a weather forecast site that is accurate to avoid damaging his equipment.
user story:
As a photographer who struggles to leave on days where it might rain, I want an app that provides me with live update on the weather to better plan my schedule.