rocketfuel cold brew
Design a website for a RocketFuel Cold Brew, a small scale cold brew coffee company.
working e-commerce website
sketchbook Sketch Illustrator Squarespace
Ben Cutrell (developer)
rearrange the pieces
There was already a website up and working created using Squarespace, but I was asked to come in and help shed some UX/UI knowledge on the site and help give it a bit of a facelift. It was nice not starting totally from scratch, as the owner had a good idea of information he wanted to share, and had already had some solid pieces for me to work with such as the start of a logo, "Make it Yourself" video, and a lot of research on the subject. It started out as one long page with a lot of great information, but it felt out of place. Right off the bat, users want to see the basic W's: what is this product, who started it, and where can I get it. Background info and fun tidbits about coffee are nice-to-haves.
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.