A new online presence for an Auckland executive consultant
Emily Morrow is an executive consultant living and working here in Auckland. When we first started working together, Emily’s existing site had served her well for the best part of a decade, but had become dated and felt more like an artist’s online presence than that of an innovative legal professional. I designed and built a responsive site to help bring Emily into 2017. Here I’ll run through a few key design decisions made during the process.
The existing site felt dated and no longer appropriate for Emily’s services.
The first problem I identified was that the existing information architecture was overly fragmented; the site was spread over too many pages, making it less likely that visitors would get a good understanding of Emily’s full service offering.
To solve this, originally I experimented with a one-page design that would guide users through Emily’s story as they scrolled. However, we dismissed this idea as being too confusing for those in Emily’s target audience (it would also make analytics difficult).
Instead, my solution was to simplify the existing information architecture into a more streamlined structure. A concise biography was moved to the top of the homepage, with more detail on a separate page. The services section also moved to the homepage, with a site-wide link in the navigation.
The contact page had two separate references to the same email address, and no other contact information. This was essentially a waste of a page load, so I removed the page altogether and added a site-wide mailto link to the navigation.
Information architecture refinement
Despite its prevalence, the hamburger icon used on many mobile sites is not well understood and causes confusion, particularly among those less adept with the web. A key goal for Emily’s mobile site was ease of navigation, so I explored various alternatives to the hamburger.
Emily is a prolific writer; she’s been published dozens of times in premier New Zealand law publications, which means there are dozens of articles hosted on the new site. With so many articles, I felt it was important to help the user quickly see which articles they’d previously viewed, so I built a feature to do just that; an orange checkmark appears on article cards that have previously been clicked on:
I wanted to infuse some playfulness into what is otherwise a fairly serious design, and at the same time distill the essence of what Emily does. A CSS-animated illustration in the services section was the perfect way to do this - showing how Emily can take a firm from confusion to clarity. I also took the opportunity to include a call to action button while the user’s attention was focused on that area. I was undecided on the best way to lay out this section, so I reached out for advice on Dribbble, and ended up going with option A as it made the most efficient use of space and also made sense from a responsive viewpoint.