How we built an award-winning responsive site for GoGet, Part 1: Planning & Design

Thinkun’s new website for GoGet CarShare has been awarded the Best Mobile Site in NSW award by the Australian Web Awards. We’re proud of what we have achieved in building this site and its fantastic user experience on all screen sizes. This wasn’t just any responsive site build, so we’d like to share our process with you in this three part series. In Part 1, we’ll discuss the crucial stages of planning, architecture & design.

 

Why a new site was needed

GoGet Website 2003-2012 

GoGet’s old site was a static HTML dinosaur built almost a decade ago back when GoGet was a young startup. They’ve grown quite a bit since then – GoGet is now the leading carsharing service in Australia with over 1,100 cars and 38,000 members – and they wanted to give their new and existing customers a far better online experience. So GoGet approached Thinkun with the following brief:

  • New web presence to reflect the dynamic, fresh and user-centric nature of the business
  • Completely new site architecture to funnel new visitors to conversion
  • Provide a much better experience for mobile users
  • Integrate with GoGet’s proprietary booking and fleet management system for live data (minimal changes to their system allowed)
  • All within a modest budget

Personas and user journey workshops

Two aspects of the brief stuck out to us – increasing conversion rates, and improving the user experience for all users (mobiles, tablets and desktops). A fact that’s now well known among digital agencies, and one that’s been solidified by our own experience, is that site usability is a critical factor in conversion. So we decided from the earliest stage of the project to fortify every aspect of the site, from layout & design to content, with best in class user experience for all users.

A user-centric approach to design has to start with understanding your users, so we researched a range of personas to define types of users that could possibly interact with the website. Everyone has different life experiences, aspirations, and thought processes that can influence the way they interact with a website in vastly different ways. It’s important to cater to as many of them as possible so no one gets left behind. A couple of examples from GoGet could be socially-conscious professionals, or parents who sometimes need a second car.

One of many persona broadsheets from our co-design workshops with the client

We spent quality time workshopping user journeys and the site architecture with the client, as no one understands their target market and customers better than they do.

Analysing previous site data to inform new architecture

Fortunately, GoGet had been collecting data on their old site through Google Analytics for some time, so we had a wealth of information to help us identify drop out points in the site architecture. The Visitors Flow report in Google Analytics was particularly useful as it allowed us to visualise exactly the path users took through the site, and in particular where they were exiting the site without converting. This played a large role in constructing user journeys to inform the final site architecture.

Google Analytics Visitors Flow report

Finally, after a few iterations, we landed on a site functionality sitemap both us and the client were happy with. It was informed by our personas and user journeys, co-design workshops with the client, and previous site analysis in concert to work towards a site hierarchy that was as simple and logical as possible for all user types.

Wireframes and design

With a functionality sitemap scoped out we were ready to get wireframing. Creating interactive wireframes allowed us to rigorously test the site’s user experience on various pages before beginning design. It allowed both us and the client to see how a user would interact with the functionality on the site, and make informed decisions about what should be kept (and what should be discarded) before spending valuable time on the actual design. Interactive wireframes are especially handy when you arrive at the development stage, where it is made abundantly clear to the developers how a certain element should function, and where it should scoot when you hit a responsive breaking point.

Design began after a few iterations of wireframes, and went through a similar process of feedback, testing, and making sure it fulfilled all site requirements. Initial development of the site’s WordPress framework was already underway during this process, but after a lot of refinement we were ready to call the designs finalised.

Stay tuned for Part 2 in this series, where we’ll talk about the development process, challenges, and the unique functionality we built for GoGet.

See GoGet live here.