Boston.com keeps Bostonians updated on what's going on in the city, covering topics such as local news, upcoming events, arts, sports, and real estate. While a majority of visitors view the news and events pages, the boston.com team is hoping to improve the layout and overall engagement of their weather page, while maintaining their goal of expressing the voice of Boston. Our team had two and a half weeks to generate a redesign that efficiently presented weather with specific value to a hyper-local audience (people living and working in Boston), increase page traffic, and improve users' interaction with the page.
competitor research user flow sitemap sketches proof of design iterations wireframes prototype user testing navigation schema persona profiles presetation
post-its Google Survey sketchbook OmniGraffle Photoshop Excel whiteboard InVision Google Slides
surveys and interviews
We released a survey of 14 questions and received 115 helpful responses from residences of the greater Boston area. 89% of these respondents were between the ages of 18-24. To try and narrow down what features should be most prominent on the site, we wanted to find out what people were looking at on their weather source, and their motivation for checking the weather. We also wanted to, quite literally, capture the "voice of Boston" by asking open ended questions.
We followed up the survey with 6 in-depth interviews and came up with a few key takeaways:
- weather definitely affects how people plan their commutes and daily activities
- people value seeing the hourly and extended forecast
- people "hate scrolling" for essential information, and
- more than one person mentioned how much they enjoyed reading Weather Wisdom, a blog authored by the brilliant meteorologist David Epstein.
There are several weather websites and mobile applications out there. Our clients specifically mentioned they did not want to compete with large weather websites, but only provide weather information for the Boston audience. However, it was still important to view how popular weather websites presented their information through effective data visualization.
For mobile design, we looked at apps such as the iPhone and Android weather apps, the Weather Channel App, WeatherBug, and Dark Sky. We also studied several websites, such as The Weather Channel, AccuWeather, Weather Underground, Google's weather, forecast.io, Yahoo weather, and my personal favorite, Drake Weather.
Based on our research, we developed four personas of who we thought would be visiting boston.com, and from there decided what we could add to the page that would be valuable for these users:
Our clients encouraged us to deliver multiple ideas, so we took several different approaches in our initial sketches. There were a few concepts we believed were essential to accomplish our goal: 1) link the weather and events pages together and suggest activities our readers could do based on the current weather, 2) use real photos of Boston (either professional or via Instagram) to illustrate the beauty of the city in its current season, and 3) increase engagement by adding a interactive slider for the hourly forecast. Below are some initial sketches, wireframes, and mockups of these ideas.
After visiting our clients at The Boston Globe, we realized that our ideas needed some trimming and precision. Some concepts, such as linking the weather and events pages together, were strong in theory, but not feasible in practice. Our team had to find a way to combine the positive emotional responses we got from using Boston images, with the established functionality of our more structured mockups.
After narrowing our final mockups down to three designs, we asked volunteers to complete a few simple tasks on each. We recorded each user as they completed the tasks on each version. I found this practice very helpful, since it allowed us to go back and watch user's facial expressions and comments during the testing. We discovered that current conditions, hourly, and weekly forecast information had to be very obvious and instinctive. Many users expressed confusion when looking for the high/low temperatures for the weekly forecast, so we made this feature more prominent.
We also tested the usability of the temperature slider with 70 users and asked them how they thought it was used and to identify the temperature at a certain time. All of them found the slider straight-forward and could tell us the temperature without a problem.
Below are the final versions of both the mobile and desktop versions. Both are displayed with and without a background image, and in grayscale to eliminate distraction from various colors or branding choices.
back to the drawing board. . .
After presenting to our clients and classmates, we received feedback and questions about our design choices. I began to think how I could take the ideas of our team a step further by adding more value. So, I went back to the drawing board and thought back to our first client meeting. Early on we learned that site traffic increases by more than 20% in the days around a weather event, such as a snowstorm. This is a significant boost, and I wanted to address that by providing useful information for readers, such as a snow-o-meter and links to school closings, plowing services, suggestions on what to wear to stay warm, and commuting updates.
While the slider was intended to create engagement with the users, our clients thought this could become a burden over time. They also commented it may be more appropriate for a mobile version. Therefore, I wanted to include a previous idea we had to display the hourly forecasts with a horizontal accordion effect. The clickable prototype below shows these new features in a desktop layout.
This was the first exposure I had working with a real client, and learned many valuable lessons along the way. The first lesson I took to heart was to not fall in love with an idea. This is not to say you shouldn't be confident or believe in your design choices, but there is a good chance that your original idea will be tweaked, improved, or even completely changed. Be open and willing to listen to the feedback both of your team and your client, they may often bring up questions you haven't thought of. Going off of that, it is also important to put your ego aside and focus on accomplishing the goal of the client, and that might not always be what you personally think is best.
Lastly, our clients told us that if our idea was not implemented doesn't mean it was a failure. This was a big aha moment for me, and I realized that success in UX design is measured in many different ways. Maybe an idea won't work out, but that shouldn't stop you from being bold and always be willing to try something new.