HowStuffWorks Reviews
Context
Problem
Goal
HowStuffWorks Reviews provides customers with comparisons of a variety of financial and lifestyle companies.
The current website was outdated, it didn't have a set branding direction, and it needed a boost in user trust.
With this project, I wanted to create baseline branding guidelines to tie in with the whole site redesign and find ways to boost user trust.
Phase I
Step 1: Brainstorm features
The first step of the redesign was to brainstorm key features we want to add to the site. After our first meeting, we set up bi-weekly meetings to keep the conversation going.
Three product goals were developed along with corresponding features upon the brainstorming session.
The first product goal was to build trust so that users can feel comfortable and secure when selecting offers from HSW Reviews.
The second product goal was to place emphasis on the first couple offers. These were deemed the best offers by the editorial team and were provided by our strongest partners.
The third product goal was to improve visual design of the overall site.
I ensured accessibility was a foundational element of the visual redesign, rather than an additional feature.
Step 2: Homepage Assessment
I completed a quick assessment of the current homepage to identify some foundational issues that the site had.
Step 3: Design Foundations
In order to create a more consistent design and prepare for future iterations to the site, a foundational design system is vital.
For HSW Reviews, I created the Paperclip Design System that outlined design principles and foundational guidelines that the site would follow.
This was a starting point for the Paperclip DS - components, illustrations, spacing, responsive modes, etc. are all items that could be added to the live working design system in the future.
Phase II
Step 1: Establish Scoring Algorithm
Each offer on the current website had a rating assigned mostly arbitrarily by the review writers. The first step of phase II of the redesign was to establish a scoring algorithm that was accurate and trusted by users.
The ratings on the right hand corner of each offer card would read outstanding, excellent, great, or fair, followed by a score out of 10.
There was no additional context as to how this number was assigned.
With the help of a data analyst, we created a scoring algorithm that used user engagement (number of clickshares) and scores from a trusted ratings provider, TrustPilot.
I added these expandable sections on the sidebar of the page to provide users with transparency on how the score was calculated.
I explored a few different ways we could visually display the score and the scoring details on each offer card.
I created clean, responsive mockups with the final design treatments and outlined how the hover/click tooltip interaction would function for the developers.
Step 2: Revamp Offer Cards
The offer cards provide the fast facts, ratings, and partner details for all the offers in the current vertical - suffice to say, they are key!
The current offer card design was outdated, had inconsistent design treatments, no area to neatly list additional details, and the first offer card was not highlighted in any way.
After some exploration, the final design treatment for the offer cards was decided.
I went with a calming but eye-catching blue-purple color scheme with the first offer highlighted, a neat details section, the content rearranged to be more readable, and the new scoring design treatment.
I also detailed the hover interactions that the offer cards would have - including an extra shadow on hovered offer cards and some motion applied to hovered buttons.
Step 3: Redesigned Headers, Filters, and Top Tips
The remaining elements in need of a redesign were the header images of each vertical, the filters on the side of some verticals, and the top tip blocks that appeared midway through the page to promote the first offer.
The headers on each vertical of the current website had an outdated design, with text often overlapping an image, making it difficult to read and inaccessible.
The new header design has a solid background color that passes color contrast standards with the text on top of it, so that the text is readable and not overlapped onto the image.
I included colors that would be cohesive with the new offer card design, and ensured the mobile version header would also be readable.
I then created new headers for all of the verticals based on category - I definitely was able to brush up on my Photoshop skills!
The filters had an outdated design and showed no feedback after each filter was applied.
The redesigned filters were clean, modern, and included an "Apply filters" button to indicate to users that their filters are ready to be applied.
The top tip cards were placed midway through each page - after the first three offers - to remind the user about the very first offer.
I created a variety of possible design treatments to the top tip cards, from which one was selected to be included in the final redesign.
Phase III
Final Redesign State
All of the different redesigned elements were combined to create the final mocks of the new HowStuffWorks Reviews website.
Final sample vertical page mockup
The homepage redesign was set to be completed in a later sprint - but I had created most of its visual design direction.
I created some illustrations and designed a friendlier, modern approach to the homepage.
Outcomes & Lessons Learned
The new header images and scoring algorithm were made live first for a handful of users to test the feature effects on the click-through rate.
Both features yielded a higher click-through rate in the two weeks they were live.
