The company’s website was due for a redesign as more than 50% of its organic traffic came from mobile devices. Working with the developer, graphic designer, and business stakeholder, I led the mobile responsive redesign of the SEO site.
An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. They didn’t include annotations, so the challenge was to design the rest of the pages to be in line with their mockups while optimizing them for mobile and conversions.
Before trying to apply the agency’s templates to the rest of our pages, I first decided to create an official style guide that would help direct all future designs as well as help the developer. At the time, no official style guide had been used, leaving many pages with inconsistent fonts, font sizes, and even font colors.
A style guide would ensure every page had a consistent look and feel, which would help strengthen the company’s brand and identity.
The mockups provided a good foundation for a style guide. There were buttons, banners, and highlight boxes. However, they were static mockups and a few elements required more elaboration.
Taking their elements, I designed the hover states of buttons and links as well as the placement of components. I also selected two new typefaces that were more modern than the company’s existing mix of Arial, Helvetica, and Verdana.
I chose Fira Sans for the display font because it was friendly, easy to read, and fast to load. I chose Open Sans for the body text because it was slightly more structured and wider than Fira Sans, making it easier to read on mobile devices.
The style guide came to include:
It was decided the content should be reviewed and updated, so my next step was to proofread each page and optimize it with SEO in mind. I fixed typos and grammatical errors; included keywords when and where appropriate; added internal links with title tags; and deleted any pieces of content that were either repetitive or unnecessary.
After editing the pages, I reviewed each one with business stakeholders for approval. Once approved, it was time to start coding them.
A CMS was in place, but it pulled many unnecessary styling and code from Microsoft Word. It was easier for me to copy and paste the text from Word into Atom and code it from scratch.
I implemented on-page SEO techniques, such as internal links, title tags, and alt attributes. Since the developer took the style guide and created CSS classes for each element, I was able to create buttons and custom bullet points on the spot.
While I worked on the content, the developer was programming the mobile responsiveness of the site. He too had to work off the agency’s mockups, so there were a few unaddressed parts of the website that we had to work through. For example, we had to design how the drop-down navigation would appear on desktop.
The existing drop-down was tiered and required users to hover, scroll down, and move to the right to reach second-level pages. In the new drop-drown, I decided an expanded mega menu that displayed all the first-level and second-level pages would be the easiest for the user.
Below is the homepage before (left) and after (right).
We redesigned the website to be both modern and mobile responsive. In comparing two months pre-launch to two months post-launch, conversion rate improved by 34.83%, bounce rate by 4.90%, and average pages per session by 2.39%.