During my quarter in San Francisco, I was given the opportunity to work for CalMatters. A few classmates and I began to re-work the design of the CalMatters website in order to make it more intuitive for users. Check out our work below.
We started with a wordpress website.
It was not the best website we had seen. The color and fonts made the content a little hard to read and on top of that, the Navigation bar was difficult to understand. We didn't have any idea what the difference between "Commentary" and "Blogs" was.
Other critiques we had:
- The use of white space made the screen underwhelming.
- The large blue headings were not adding to the comprehension of the content.
- The navigation bar had too many drop downs in each section.
- Articles were categorized by both vertical and content style, but there was no consistency.
- The newsletter subscription box was ineffectively placed as an afterthought.
- The podcast was nowhere to be found!
- Alignment was inconsistent between left and center justification.
So we began to wireframe.
We looked to media sites like Slate, The Atlantic, Huffpost and New York Magazine for inspiration in our design. We bounced back and forth between the best way to design the navigation bar – should it be by vertical or content style? In the end, we ended with a homepage re-design, with aspects from other online news sites we found most effective and consistent with CalMatter's style.
Pictured, in order:
- Donation page, which closes into
- Home page, which scrolls down to
- Main story page, which continues the scroll to
- Latest, Popular, Trending, which scrolls into
- Commentary bar and Verticals
Then we made a brand book.
We were given feedback on this design, and what we found was that CALmatters did not have an understanding of its brand. They hadn't thought about a brand book, and everyone that we spoke to had similar, but lightly different views, of what the brand was. So before we set about re-designing the website, we first made a brand book. What we included:
- The "why"
- The "what"
- The "how"
- Guiding words
- Logo guidelines
Then we presented.
The final thing we presented to CALmatters was an Invision prototype of what their new site might look like. We followed our brand guidelines, which they were appreciative to have, and created a more modern look for CALmatters, while still keeping in mind their tie to more traditional newsrooms. A click-through of our prototype can be found here.
Our presentation went smoothly, and the staff of CALmatters was more than enthusiastic to see our ideas. They are undergoing a huge website re-design within the next year, and they found our brand guideline and design hugely helpful for them going forward.
I learned the importance of aesthetic, even for a newsroom.
CALmatters has great content. But what it lacks is an aesthetic. Even this, regardless of the content, drives tons of viewers away from the site. Most of CALmatters viewers are older, governmental employees, but the content they create affects so many more people then that. What we tried to do is capture that audience, to make them feel welcome on the site, by changing the way it looks.
Going forward, I will always take into account the UX of a site, and the emotions a user may feel when interacting with a website. I learned that even something as intuitive design and a lack of aesthetic can inhibit people from interacting with content that really has the potential to serve them. I now have a much better understanding of the importance of interaction design, and I plan to keep this in mind in all future projects.