Case Study: How SlugBooks Rebranded Through Emotional Design
This is a guest post by David Miller
Emotional design, the trend of integrating UX elements with the primary goal of prompting user emotion (humor, trust, etc), is becoming an increasingly popular trend in user interface design.
If you own any part of the design or development process of a website or app, and you feel like you’re missing that extra hook to keep users coming back, emotional design might be an angle worth exploring. My name is David, I’m the founder of SlugBooks: a kayak for college textbooks (our users save money by comparing prices on their college textbooks). In this article I’ll be sharing the evolution of our website design, and the various strategies we used to build emotion into our product.
Our Design Journey
Our most recent design transformed our website into a powerful and memorable brand. See the following four iterations of the site, from mockup to present.
| 1. Mockup|| First design|
| Redesign|| Current design|
The motivation behind each iteration was to continue building trust with our users. The latest design has the most complete emotional design integration. Our product has always been inherently focused on providing users with a comfortable experience. While we intentionally built an identity into the most recent iteration, emotional design was always an unintentional focus in earlier design versions.
Building the Foundation
While the first design of the website was completely functional — far better than our mockup — the page framework and feel left a lot to be desired. It doesn’t matter how great your illustrations or emotional hooks are, if the core design foundation of the website doesn’t feel comforting or professional, no illustration or branding will help. This is why that first redesign was so critical — while it didn’t have any explicit elements of emotional design, we were able to define the basic structure for the site. The warm background, various gradients and content clean-up forced the main calls to action to jump at the user and leave absolutely no confusion about what we do, while establishing basic trust and comfort with our service.
Defining the Brand
When visitors come to your site, what do you want them to feel? This is an important question to define if you’re considering emotional design. We already knew that textbooks are already an emotionally charged topic — every college student out there has a strong (usually negative) opinion on the cost of college textbooks. By plugging in these fun yet still professional comic characters, we were able to disarm some of that raw negative emotion and build some potentially positive energy towards the comparison experience.
Finding an Illustrator
Tumblr and deviantART are great platforms for finding great affordable illustrators – most of the illustrators who post their art to these two platforms are doing so recreationally, as drawing is something they truly enjoy. Dribbble is another amazing platform for finding artists, though with this one you’ll be paying a premium because Dribbble illustrators usually draw for a living instead of a hobby. In order to find the most popular comic artists on Tumblr, go to the popular comics page on Tumblr and contact your artist of choice to find out if they do commissioned work.
The best guideline in finding an illustrator is to find artists who truly enjoy creating content for fun, and who are passionate about your product. We found our illustrator through Tumblr — Dom is an amazing talent, draws for fun, and the kicker was that he’s a recent college graduate, so he was able to relate to the pain point we help solve.
Emotional Design Integration Options
After we defined the brand, we just had to decide how to plug it into the site. There are so many different effective ways to do this — we selected the following:
Homepage Call to Action(s).
Every user who visits our homepage is treated to a textbook subject mascot, which is pointing at the text input box that we want our users to start navigating the site with. The homepage mascot is probably the most common instance of emotional design integration (see MailChimp, AppAnnie, Hipmunk). However, we took this mascot character integration two steps further.
- We have several different textbook characters, each characterized to the subject they represent (see the footer mural below for the complete set).
The above textbook character shows how our characters are subtly modified to point to the next element as each component in the form is completed.
The footer mural is the least intrusive (and most fun!) way to integrate branding into your site. This component was inspired by foodspotting, before they redesigned their site. Integrating a footer mural will allow you to reach your most engaged users (they’re the ones who scroll all the way down). Footer’s can have real utility beyond listing out SEO links. This footer mural was also an opportunity to connect all of the textbook subject characters that appear at the top of our homepage together.
Illustrating your footer is similar to how certain movies now have extended scenes that appear after the credits begin to roll at the conclusion of a movie (Pixar was among the first movie studios to start this). These movies give viewers a reason to stick around in the theater and continue enjoying the film for just a bit longer. Who wouldn’t want to keep their users delighted just a bit longer? Plugging a fun footer into our site holds the same value.
Our footer mural integrates most of the characters we’ve built into our brand into a fun display. The various characters interacting with one another also adds to our personality. My favorite: Film textbook watching as Criminal Justice textbook prevents a comet from forcing the dinosaur textbook from going extinct. There are other storylines here as well, take a look!
About Us Page
If you’re considering integrating emotional design into your site, you must have an About Us page — with information about the individuals who created and run the site. Our design has always been as much about being transparent with our users than anything. You can’t be transparent if there’s no outlet on your site for users to learn who you are. Own the product, create an about page. Once you have that page set up, integrating your brand into it is obviously a must have.
For us, illustrating textbook caricatures of each team member was a fun way to embrace the brand and still tell our users about ourselves. Realmac Software, creators of popular Mac/iOS apps including Clear and Analog, has a similar concept of this on their company page.
Consistent with the textbook character theme, we transformed team members into subject textbooks, each titled after of our domain/focus within the organization.
Generally you’re better off spending time making sure your website never breaks, instead of designing a 404 page. The 404 page isn’t worthy of any design time or attention. It’s a page that your users should never see, ever. But bad things happen. 404 pages are an opportunity to keep your brand seamless, even when your website sends a user to a page that doesn’t exist.
Our 404 page was created by accident: we had created a “Construction” textbook for our homepage call to actions. Our illustrator had majored in architecture, so this was a logical character to create. The only problem with this is that thanks to web 1.0, anything that says “Construction” on your homepage tells users that the website is undergoing maintenance (they’ll bounce). While we understood the construction character had no business on our homepage, it was a fun mistake that proved perfect for our 404 page.
404 pages are an excellent non-intrusive way to incorporate your brand identity, even when your site breaks.
Our main content, the actual price comparisons, is where you won’t see any illustrations. Exhibit extreme caution when integrating emotion/branding into pages that monetize. It can help, but it can also distract users from doing the one thing that page was built to do: convert.
You know your brand better than anyone, but you might not know your users as well as you think. There are so many great tools out there, between Usabilla, Optimizely, Visual Website Optimizer. After you’ve built your minimum viable product and the concept has proven out — get a testing framework set up. You won’t regret it. Here are a few different emotional design focussed tests you can to do make sure you’re augmenting (and not crippling) your brand:
With A/B testing, you have a handful of different illustrations, and you want to know which one performs best. This can be useful if you’re trying to decide which unique style to take the page in. If you find 3 illustrators to create different mascots for your homepage, this is a great way to prove which illustrator works best for your users.
Examples of the various homepage character variations. Our Dance textbook was a consistent underperformer, so we removed that from the rotation.
With implicit testing, you may have a very large number of variations, and you’re just looking to prune out the ones that perform worse than the rest. We do this with our library of textbook characters. You can see all of them in the footer image, but we have those more detailed characters that appear next to our CTA at the top of the page. We have removed certain characters that struggle to perform. For example, our Dance textbook would struggle consistently, while Chemistry has always been one of our stronger performers.
Byproducts of Emotional Design
Ok, so you built your brand and you have all of this art integrated into your site. Does the art have any other uses, outside of the website? Of course it does — leverage it! This art unlocks so much potential, it’s insane. Now you have art that you can add to your facebook, pinterest, twitter — you’ve basically unlocked some crazy off-site marketing potential. Our users now recognize our art in our wide variety of marketing channels. From our explainer video to the flyers our street teams hand out to college students, having these brand assets has unlocked potential.
That’s the story of how we went from a hacked-together Microsoft Paint mockup to the web app you see today! Hopefully these insights were interesting, and please share your own experiences in the comments below.