Redesigning CredR Auto’s Footer
The Footer is by far one of the most overlooked locations in a website. It’s tricky since it is not something that appears immediately when you visit a webpage, but it’s present on every webpage at the bottom. As an intern at CredR Auto, one of the challenges I faced was to take a new approach for the footer.
What I’ve covered in this article:
- How I used Crazy-8s from GV’s Design Sprints to document immediate ideas, and then use the Method of Elimination to discard ideas that don’t make sense.
- How I used Information Architecture to properly categorize various links under different headers.
- How I used Color Psychology to understand what’s wrong with the earlier footer and used it to make content the focus in the webpage.
- How I created a mood-board to inspire from and nail Visual Design while keeping CredR’s brand presence intact.
As a loyal follower of Material Design for Android, Web Design wasn’t something I was familiar with. Mobile design felt a whole lot easier since there is only so much space in which you can experiment. The constraint of limited space on mobile makes it creatively challenging & fun but predicting interactions is easier.
However, Web design was an altogether new beast for me. The abundance of space with limited information to show is quite inversely challenging to mobile design. But, it was important — since CredR’s website is the bridge between Consumers, Second Hand Dealers and other stakeholders in the B2B and C2B business.
For the same reason, it’s important to design a footer that’s simple, adheres to the brand’s colors and still provides information the user is looking for, somewhat like a site-map.
With the necessity to fit more content into the Footer (as a future requirement we were predicting), CredR’s footer needed a long-due overhaul.
The Problem
The previous footer used the primary colour of CredR — red (longest wavelength) and had a shadow with the it’s Y value set to -2.
The above design made the user focus on the footer more than the actual content, which is the inverse of how a footer is supposed to be. A better approach was to have the content be what the user focuses on while the footer be present for ease of navigation between various webpages CredR offers.
It was understood that the content will increase, along with an increase in the columns/headings. It was essential that the new design should address the space needed to fit the content to come while increasing the white-space required to achieve the clean look.
The Process
First up, t’was time for inspiration!
I quickly headed over to Dribbble and decided to check out a few footer ideas while taking screenshots to create a mood-board.
Next up, Taking a page from GV’s Design Sprint Methodology and Jake Knapp’s How to Solve Big Problems and Test New Ideas in Just Five Days, Saurabh Kumar and I decided to set a 2 minute timer and try out Crazy-8 for documenting any immediate ideas that come to the mind.
Essentially, taking an A4 sheet and folding it to have 8 rectangles and setting a timer of 2 minutes.
My thought process was aligned to reduce the attention the footer was taking.
The ideas that were flowing immediately were focused to make the footer a little less eye-candy, so decided to document the things I definitely wanted to change:
1. Muted Colors/ Removal of Shadow
2. Fun Metrics/ Stats somewhat like Dribbble’s footer
3. Illustrations and Fun Stuff with Image Mapping
4. Plain Text with just Logo w/o Text (Minimal)
5. Arc based Footer
Based on the ideas documented in Crazy-8, we decided to shortlist a few to understand which would meet the goals that were needed to be met to achieve a simple design.
Before designing, it was necessary to follow proper Information Architecture which after reading Abby Covert’s book on How to Make Sense of Any Mess made a lot more sense to organize the links under a common heading.
For example, the previous footer mentioned Other Pages which didn’t sound like it was related to the same website. Renaming it to Our Pages instead made more sense and arranged links under headers following IA and began to roughly sketch ideas on paper.
A few sketches later, I decided to go against the Arc based footer which would have attracted a lot more users to the footer itself. Instead I decided to go high fidelity and use Sketch to prototype ideas.
Design Sprints recommend to sketch and prototype on paper and get designs approved before one moves to high fidelity prototypes so that designs are validated before wasting time prototyping. However, I was learning to use SketchApp anyway, so I decided to go high-fidelity and get a few designs rolling.
The Prototypes
Here are few of the prototypes I experimented with to achieve the simplicity we were aiming for with the design. I was also curious on how to effectively showcase a new item in the listing — to which I had some “courage” to inspire from other websites.
Version 1:
The initial sketch focused on getting rid of the shapes from the original footer and trying to fit in another category.
It was too minimal and didn’t really speak loudly on what the brand meant. Plus, felt like a downgrade rather than an upgrade. Also, the Category headings were more prominent than the list inside.
Version 2
The second version enlarged the logo for better branding, added the dropdown(up?) and dimmed the category headers while concentrating on the links rather.
Version 3
The third version was made after a little thought on IA. Clubbing CredR’s logo along with the address, CIN, Phone number and Email felt to be a great idea since it eliminates the need for a heading. Also, the space above could be used for a secondary action such as Subscription.
Also, pushed in a stat about customers. Similar to what Dribbble does, covered in one of the Crazy 8s.
Around this time, I sucked at UI and fonts in general. So, I went ahead for another iteration, this time focusing on proper alignment.
Version 4:
The brand had a lot of Red+White. Black made more sense to go with to suggest end of the page while still being able to differentiate between the Website’s background+content and the footer.
The previous prototypes didn’t quite give a sense of where the footer was beginning and it felt to be abrupt.
However, Version 4 still didn’t convey what the brand does. Also, new requirements began to flow in for the footer. A Search bar at the bottom so users can easily search from the bottom of the page and a tweak to the existing “Go to Top” button.
This led to one of my favorite prototypes.
Version 5
While the above footer did have everything necessary as per the requirements in the design — it wasn’t made to scale, lacked balance and the image underneath could enlarge or behave abnormally on HD/Widescreen desktops. So, I had to rethink.
To ensure the footer can be scaled to match business requirements, it was essential that there’s a lot more space. So, I asked.
Is it possible to increase the Footer’s height?
On getting a Yes and working with Sunny Kumar, we arrived at a version none of us could deny against, using a Grey (#919191) that was already accustomed with the brand.
Version 6
While we were almost fixated with this, the bald patches to the right made the footer seem empty. Although this could be filled with content later, as it grows, the need right now didn’t require the same.
We were 90% there. A few things were already finalised — The positioning of the logo, the button for Go to Top and a silhouette/artwork to go with.
The city silhouette still didn’t make a lot of sense and was originally added by me to signify CredR’s presence in multiple cities in India.
We decided to experiment with something that truly captures the brand’s essence while shuffling things to fit like a jigsaw puzzle.
We arrived at the final version of the footer which went ahead to be implemented in the next sprint.
The Result
This version rearranged a lot of things and used UI elements such as dividers, outlined dropdown(down!) boxes while using Grunge Bike Tyres to match with what the brand does and using Gesault’s Principles of Perception to arrange the social networks under the “Get In Touch” header. Along with that, I also used our licensed font, Proxima Nova to get the typography in place.
The Search’s UI was inspired from Medium and behaved similarly to CredR’s Header’s Search.
All in all, here’s what we achieved doing this redesign:
- Simplicity
- A clear distinguishment between the Footer and Content while still giving content more importance by reducing primary colours and focusing on muted colours.
- White-space to add more content in the future
- A better categorization of links with Information Architecture.
It’ll be interesting to see analytics on how this new Footer performs. It should be live in a few days since it’s out for development in the next sprint. Check it out on CredR
