UX Design / Content Strategy / SEO
Animal Behavior College Website
The company website was overdue for a responsive website as more than 50% of its traffic were coming from mobile devices. An agency helped us design two templates for our website. They provided us mockups for two types of pages: homepage and general content page. From these mockups, I developed the company’s first design system and drove the mobile responsive redesign project from concept to execution.
Process
Before trying to apply the agency’s templates to the rest of our pages, I first decided to create an official UI 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.
Style Guide
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, such as hover states of buttons and links as well as the placement of components.
I 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:
- Illustration of how content should be laid out
- Use and layout of headers
- Brand colors and their uses
- HTML attributes for links and images
- Font icons
In addition, I broke down their mockups into wireframes to make communication between stakeholders and developers much easier as there was some confusion as to what “templates” were.
Content
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.
Development
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.
Challenges
Sitemap / Drop-Down Navigation
There were a few unaddressed parts of the website we had to work through. First, we had to decide on the sitemap since we had planned to remove a few pages. Then, we had to design how the drop-down navigation would appear on desktop and mobile.
For the mobile menu, I proposed making the contact functions (e.g. call) into buttons that sit on the same line as the menu function. However, the third option became the final navigation.
The second challenge was deciding what to keep or remove in the footer.
Result
We redesigned the website to be both modern and mobile responsive. In comparing the nine months post-launch to the same period in the previous year, mobile organic traffic increased by 57.77%, goal completions by 64.73%, and goal conversion rate by 13.66%.
