Blog & News Section
Role: Workshop Facilitator; Lead UX and UI Designer
Quick note: I'm in the process of templating this page, so it looks slightly different than the other portfolio pieces. I know this; it will be rectified soon.
​
Our News and/or Blog section had never been designed. It was a simple grid, with no method to either filter, search, or find relevant articles. Content just kind-of showed up wherever, with no rhyme or reason as to why. Users had to scroll endlessly to attempt to find articles they found relevant, and even then it was a best guess. I wanted to update and modernize the blog with an eye towards readability. But most importantly, I wanted to set a structure and an architecture that made sense to a user, increasing the ability to find articles. We have great writers, and I wanted to highlight their work that was being lost. To that end, we hosted a design workshop.
Workshop
After doing initial brainstorming and group building exercises, we moved on to personal sketching of what a blog might look like.
We then collated our ideas into some major themes and structures, building consensus as we went.
The results of our group brainstorm, a place for everyone to view and review what we've discovered over the day.
After doing initial brainstorming and group building exercises, we moved on to personal sketching of what a blog might look like.
We found folks from different departments at different levels, and hosted a day-long workshop to brainstorm and sketch new ideas for the blog. We asked participants to bring some blogs that they liked to read, and throughout the day we discussed and compared those ideas. Finally, we did a brief sorting exercise, attempting to find useful categories that made sense both logically and for our dealer base. We found some great ideas from the workshop, which spurred creativity towards some initial, exploratory wireframes.
Initial Ideation
The idea here was to show hierarchy, between a feature article and the other articles we have on the site. I liked the carousel, but wondered, "If it's a feature article, why are there so many? That's not really a feature."
I wanted to play around with structure. Research showed a lot of news/blog sites are asymmetrical, so for the sake of seeing something new I laid out a straight grid to compare. It didn't push the eye, or interest, in any useful way, so I moved on.
I wanted to explore spaces, both as a grouping mechanism and a way to show relationships. Ultimately, I felt the design gave too much hierarchy. Users had to parse a section among other sections, and then individuals within those sections. It was overwhelming with actual data, and it didn't quite execute the scannability I wanted for a news section.
The idea here was to show hierarchy, between a feature article and the other articles we have on the site. I liked the carousel, but wondered, "If it's a feature article, why are there so many? That's not really a feature."
There are many, many different ways to organize a blog. The current section is a straight 3 column grid, with no hierarchy whatsoever. Externally, it looked very organized, but there was no internal structure. Articles weren't organized in any way, either alphabetically, by topic, or any other useful category a user would latch onto. With these initial ideas, I wanted to generate lots of ideas of how to lay out articlec. No one, final design here made it to the wireframes, but certain structures and atoms did. Ultimately, the final design was an assemblage of different sections of many different ideas, each unearthed through this generative process.
Wireframes
This is the final presented landing page. There are sections that show off a featured article, popular articles, and then a categorical structure based off our design workshop learnings.
This is a fairly linear and highly structured search results page, as well as when a user clicks on "view more". I wanted to show articles in a way that was clear, concise, and easy to sort and find. The goal here was to fix our IA problems from before.
This design is for shorter, more blog-like articles. It's a simpler layout, focusing on the text while still providing reader's the opportunity to browse. And maybe a bit of a personal touch, I added in an author bio spot, to really highlight and give credit to our great and talented writers.
This is the final presented landing page. There are sections that show off a featured article, popular articles, and then a categorical structure based off our design workshop learnings.
It seems like a big leap from the initial ideation to our final design, but the main structure was set from the initial ideation ideas. All I did was flesh out, more clearly, some specific design elements, define and present an order/structure, as well as showing for presentations more clearly our design thinking. I often describe good design as "looking normal," which is a bit of a misnomer. Normal implies easy to do and obvious, but finding a logical and resonant structure and design takes many, many iterations and a keen eye for detail. The right answer, it often seems, only feels obvious after you've tried all the wrong ones.
Visual Design
This is the final visual design for the news section. We used our current design system, lightly modifying elements as needed.
There was a tendency on my part to over-design this page, but I ultimately stripped most of the flourish away to focus on the content. The headlines jump out, and the filter on the left rail provides a natural bounded space to navigate. The articles are the star here.
Presumably, once you read this article, you'll want to read another one. I included the author bio to support more browsing, as well as similar articles to keep the reader engaged and interested. Finally, some social media buttons help boost our SEO, providing some audience engagement that was previously lacking.
This is the final visual design for the news section. We used our current design system, lightly modifying elements as needed.
Occasionally, when passing off designs for their visual treatment, some UX problems emerge. This one, in an ever-so rare case, didn't really have too many shifts from UX to UI. It was a really clean process, owing largely to the fact that I could lean on all the work I'd done previously to create a Design System. Everything laid in very nicely, and I think it works really well to accomplish our goals. The section now is easier to navigate, easier to read, and hopefully, more joyful to use.
​
Every project has learnings, and perhaps the most tragic one befell this project. Relative to other projects, we weren't able to develop this one quite yet. That's the key takeaway, unfortunately. Sometimes you can do great work from start to finish, only to see it live on, at least for now, on a "Complete Later" list.