Project:
Partial redesign of a popular humor blog.
Project Goals:
Conduct usability tests with current and potential users of the website Cake Wrecks
Redesign the home page and at least 3 inside pages
Comps were required to be a new design based on user research conducted in a group (with 2 other classmates)
Comps were to be designed individually
Class:
GIT 340 - Information Design/Usability
Arizona State University
Timeline:
4 weeks total, 1 week to create comps
Group members:
Michelle Tavares, Naudia Whitaker, Justin Fargnoli
Summary
End Results
Before:
Current Cake Wreck’s Website.
After:
Prototype of my proposed redesign.
Professor Feedback
“Michelle, I believe you went above-and-beyond on this assignment for the amount of work you put in, hence the extra credit.
Great job on this assignment, I hope you are very proud of this. Your design comps and design write-up are some of the best I have ever seen. With your permission, I would like to show your work to any future students as a good example.”
Introduction
What is Cake Wrecks?
Cake Wrecks is a popular humor blog that shares cakes made by professional bakers that are unintentionally funny.
Readers are encouraged to submit photos of funny “cake wrecks” they come across.
Featured “cakes wrecks” can’t have been made by amateur bakers. Sundays are an exception, however. “Sunday Sweets” are Sunday-only posts that promote exceptionally-made professional cakes.
Reasons to make changes
Cake Wrecks was started in 2008, and its format hasn’t changed much since then. According to our research:
Users find the site visually overwhelming.
Users found navigation confusing.
Users complained that the design was dated.
Also, as evidenced by the declining number of comments left on posts, engagement has gone down over time. Cake Wrecks’ design and organization could use a fresh update to help users better enjoy and use the site.
Research
Online Survey
Our online survey of 19 participants revealed that surveyed Cake Wrecks users are:
77% women
often stay-at-home moms
interested in baking and/or baking "fails"
familiar with navigating the internet
familiar with basic tech usage
Usability Testing
Usability testing was done with 6 current and potential Cake Wrecks users. Testing was done remotely via Zoom.
Testing included:
a pre-test questionnaire to gauge the type of user being tested
3 scenarios, each with 2 specific tasks
a post-test to determine the user's experience overall
Research Results
Pain Points
After conducting user interviews with 6 participants, we discovered several common pain points that needed to be addressed.
Participants commented that:
The site was visually overwhelming, cluttered, and unattractive
Navigation was lacking
It was difficult to submit “Cake Wrecks”
Finding the Cake Wrecks book to purchase was tricky
Multiple links and images were broken
Blog posts were too long
Abbreviations were used without explanation
Many pages need a “Back to Top” button
Social media sharing icons were hard to find
They struggled to find posts of a specific category (wedding cakes, holidays, etc)
Selected User Comments
"The photos are funny, but I hate everything else about this website. It’s cluttered, the design is ugly, the ads are annoying, and I feel overwhelmed looking at it.”
Brenda, Age 40
"These cakes are hilarious! Wish there was an easier way to find more posts, though."
Coni, Age 67
“What is Sunday Sweets? Why does it have a directory? This website is so confusing.”
Adriana, Age 28
“This would be interesting if it weren’t designed so poorly.”
Ashley, Age 22
Post-test Questionnaire Results
What would you change about Cake Wrecks?
How easy/difficult is it to navigate Cake Wrecks?
Problems & Solutions
Visual Design
Problem: Users found the site overwhelming and visually unattractive
“Overwhelming” and “unattractive” were two of the most common words our test participants used to describe Cake Wrecks. They complained that it was visually overwhelming and cluttered, that the ads were annoying, and that the design was dated (see image 1.)
The site features photos sent in from readers of cake fails. Therefore, most photos aren’t professional and don’t follow a color scheme. So, the background should be neutral so it doesn’t visually compete with the content.
Current Cake Wrecks website design
Solution: Change background to white
Changing the background from dark blue to white will help simplify the overwhelming visuals of the site, because a white background:
makes the text easier to read
reduces visual clutter
won’t clash with the multicolored photos of the cakes
Solution: Make text more readable
White text on a blue background causes eye strain, and the centered justification doesn’t make for good readability.
Dark gray text on a white background with left justification helps readability.
Solution: Reduce ad content
Multiple participants complained about how cluttered the ads made the site feel.
While I recognize that Cake Wrecks depends on money made from ads, the quantity should be reconsidered if the number of ads is driving readers away. So, in the redesign, ads were moved to the bottom of the page.
Ads were moved to the bottom of the page.
Solution: Redesign the logo and header
The current Cake Wrecks logo (see image 4) adds to the visual clutter of the site.
The font is messy, and the multiple outlines using different colors make it look chaotic. Some participants expressed confusion about the babies riding carrots in the header and what they have to do with cakes. Only more dedicated readers recognize that they came from a notorious baby shower cake wreck 10 years prior, but the images within that post in the sidebar are broken.
In the redesign (see image 5), the baby riding the carrot is placed on a piece of cake for better context and to help orient users to what the site is about.
The tagline was made larger since it does a great job of succinctly explaining the site’s purpose. The font was changed to cleaner, yet fun styles, that help communicate the site’s tone.
Current logo and header
Redesigned header and logo
Social Media Icons
Problem: Users struggled to find social media sharing icons
In our testing, users struggled to find the icons that let them directly share a post on social media.
They also confused the icons for “Cake Wrecks” social media accounts with those for sharing. Currently, they are placed at the very bottom of each post and are only found after clicking “share”.
Sharing content is an essential blog feature and helps grow readership, so it should be easier to find.
Current placement of social media sharing icons
Solution: Change size and placement of social media icons
In the redesign, Social media icons were enlarged and added to the top and bottom of every blog post along with the call to action: “Share this post!”
The icons on the sidebar that link users to Cake Wrecks’ official social media accounts are now labeled with “Follow us on Social Media” to help avoid confusion with the sharing icons.
In the redesign, social media icons were added to the top and bottom of each blog post, encouraging users to share posts.
Social media links were also added on the sidebar in the redesign.
Navigation
Problem: Users found navigation lacking
Multiple participants commented that:
navigation was too sparse
the “submit a wreck” link shouldn’t be found on the contact page
submitting photos was a tedious and confusing process
finding posts of a specific type was difficult
Participants often couldn’t find what they were looking for and clicked around the main navigation at random until they found something helpful. Better options in the main navigation would help users fine-tune their searches for information.
Current navigation and contact page.
The contact page is where users need to go to submit their own cake wreck photos. Users in our testing struggled to find it there.
Solution: Add a “Submit a Wreck” form page
Cake Wrecks relies on user-submitted photos of cake wrecks, so photo submissions should be prioritized in the page's navigation.
To improve the submission process for Cake Wrecks, the redesign prioritizes user-submitted photos by placing a streamlined "Submit a Wreck" form and link in the main navigation. Instead of hiding it within the contact page, users can easily access it.
Currently, users need to click a link on the contact page to view submission guidelines before sending their photos. In the redesign, this step is eliminated, and users can submit their photos directly through the streamlined form.
Furthermore, the current process requires users to determine whether the photo is theirs or from someone else's website, which determines the email address to send the photo to. In the redesign, this is simplified by allowing everyone to use the same submission form and indicating the ownership of the photo within the form itself.
Lastly, the current process involves opening a new email or copying and pasting the email address. The redesign simplifies this by transforming it into a form with file upload options, ensuring users provide all necessary information without the need to remember it separately for their emails.
A new “Submit a Wreck“ form was added.
Solution: Add “Wreck Categories”
When participants were directed to find an Easter-themed post, one clicked the “Sunday Sweets Directory” in hopes of finding an overall site directory there. Another tried the search bar, and another couldn’t find a way to filter the posts, so she skimmed the most recent posts in hopes of finding something Easter-themed.
The current site’s posts are already categorized, but the only way to access them is by finding the category of that post at the very end of each post. If you click on that category, it will bring up every other post categorized the same way. However, there’s no way to see all the categories at once.
In the redesign, a “Wreck Categories” page was added. Some of the current categories were kept, and additional holiday themes were added. A photo example and a short blurb help users understand what each category is about.
“Wreck Categories” Page was added.
Solution: Add “Shop” page
Some test participants didn’t think the link to buy the Cake Wrecks book was in an intuitive place — it’s currently found in the footer and the sidebar of the home page.
A shop page was added to the redesign to comply with standard web conventions – a more obvious place to find merchandise on a webpage.
New shop page design.
Ease of Use
Problem: Users thought site was confusing and overwhelming
Users pointed out multiple issues that made Cake Wrecks more challenging to use than it needed to be. Issues included: overly long blog posts, Abbreviations used without explanation, broken links and images, and no way to return to the main navigation at the top of the page other than excessive scrolling.
Solution: Define abbreviations
One user pointed out that not everyone would know that “NYT” stood for “New York Times.” In another instance, the abbreviation: “CCC” is used without explanation. In the redesign, “NYT” is spelled out, and “CCC” is only used after defining it first: “Cup Cake Cakes.”
Solution: Shorten blog post lengths
As stated before, multiple test participants felt that that home page was overwhelming — there was too much to look at. Currently, many of the posts contain over ten photos. This makes the user do a lot of scrolling and reading.
Blog posts should be cut up into shorter, more digestible lengths to make the page less overwhelming. In the redesign, two blog posts were reformatted, and no more than six photos were included per post.
Solution: Add a “Back to Top” button
The current site requires a lot of scrolling, so one participant remarked that they’d appreciate a “back to top” button.
A “back to top” button was added to the bottom of each page, right above the footer (see image 13).
Back to Top button
Solution: Fix or remove broken images and links
Participants uncovered several broken images and links on the Cake Wrecks site, including the link to buy the Cake Wrecks book at Barnes & Noble and Indiegogo.
In the redesign, the links to buy the book at those two stores were not included, as it appears the book is no longer available there.
End Results
Nearly all our participants described Cake Wrecks as entertaining, so the site is deserving of a much-needed overhaul. By addressing the issues uncovered by usability testing, the site will be less overwhelming, easier to navigate, and more of a pleasure to use.
Before: Current Cake Wreck’s Website.
After: Prototype of my proposed redesign.