Business Gateway Website Redevelopment

Applying agile and lean methodologies, I was the lead UX Designer on the Business Gateway website redevelopment by Whitespace.


Key tasks

  • Applying lean methodologies

  • Research

  • Running workshops

  • Ideation

  • Wireframing

  • User-centred designed

  • Adhering to accessibility standards

  • Developing a pattern library

  • Collaboration with web developers and creative designers

  • Usability testing

Aim

The aim is to grow understanding, credibility and relevance among growth business while not compromising on services delivered to start up businesses. Improve the user experience of the site and provide solutions for users who are time poor.

Background

Over the four years since the previous iteration of the Business Gateway site was launched there had been a good general performance across various metrics. However, in a number of areas of the site both the user and site requirements have changed over time. While the addition of new functionality and content had largely been successful in meeting these new requirements, the deployment of said functionality and content had been directed primarily to individual site areas, precluding the sort of holistic and structural changes required to truly deliver a completely satisfactory user experience. With those considerations in mind, it was time for Business Gateway to redevelop their website.

homepage header.jpg

Results

20.54% more goals being completed on site than before

Users are browsing for 4.05 pages per session - compared to 3.81 pages before

Redesigned path to market reports means downloads are up 392%

Mobile users are more engaged with the new site; bounce rate down, pages per session up by 23%

Tailored tool has proved popular and made users searches easier - 85% of users who fill out the three steps then click onto a resource shown to them


Research

A detailed UX review was undertaken by Whitespace, this delivered valuable insights and recommendations of how the site could be improved. Research was also conducted in collaboration with Progressive and Business Gateway to identify user needs.

Content Improvements

  • Removing gated content

  • Surfacing of content

  • Serving popular guides from the gateway

  • Moving to a more dynamic, less hierarchical structure

  • Create more actionable content such as ‘How to guides’ (these performed well on the previous site)

  • Utilising filters instead of hierarchical navigation

  • Build ongoing relationships and reputation through creating a valued destination of continually updated content

  • Industry ‘experts’ embraced to provide relevant and real-life case studies, advice and tips to complement the BG advisors

  • Tone of voice should be inspiring and motivating

  • Clearly define and separate audiences based on what information they are looking for and what stage of business they are at

Identifying Audience Needs

  • They would like a highly personal, very tailored service from people who are like themselves, and understand their business and the areas in which they operate

  • They are unused to asking for help from outside services and are highly self reliant

  • Research demonstrates that growth businesses perceive Business Gateway to be a business generalist, not a specialist.

  • They go online a lot for business information and rely on local and national press as well as trade press

  • The website is likely their first port of call when responding to an advert

  • Audiences seek different information types. Growth businesses seek directional information whereas, Start ups search for information about help, advice, networking and best practice

  • Allow for users to request content themes or specific areas that would be of help (such as research service or market reports)

  • Profiling - users want content delivered to them because they are time poor

Information Architecture

Information Architecture.jpg

Based on the findings from the UX review, I then went on to create a new Information Architecture. This new structure made it easier for users to find content depending on if they were starting or running a business. In addition, case studies and ‘inspiration’ stories were grouped and made more prominent under the new ‘Success Stories’ gateway. A new section of the site was also created, ‘Your Sector’, which serves content specific to industries the users might be operating in. Lastly fundamental changes were made to the Local Office pages, so they would no longer be exterior micro-sites, but rather fully integrated to the main sites offerings.

Local Office Before

local office.png

Local Office After

New Local Offices.png

wireframe of homepage.png

Lean Methodology

Lots (and lots) of wireframes

In order to ensure that each section of the website scoped and indeed how the website would function holistically, I created heaps of wireframes. I wanted to ensure that proper research, ideation, prototyping and experimentation was conducted before beginning build. Whilst we can still be iterative in build, it’s less painful to scrap pieces of paper than code.

Co-creation workshops

Rather than adopting a waterfall approach, we approached the project using agile methodologies. This was to ensure that we could maximise value delivered while taking account the three competing constraints of time, quality and cost.

This meant that we wanted to work very closely with the client to make sure our ideas aligned with their needs and that we were meeting the requirements of the brief. As we developed through the project, we would have co-creation workshops with the client to review progress. This was far more efficient as it provided us with immediate feedback and input at the right time, when we could still be agile and iterative rather than changing large bodies of work during one final review. This also allowed for transparency of our working process with the client. From my point of view, the close collaboration was critical in communicating our direction for the website.

Sprints

We broke down the development of the website into sprints. These were:

  • 2 UX sprints

  • 2 Design sprints

  • 4 Development sprints

Those sprints were broken down into completing individual site sections based on priority. Whilst there were only two “UX sprints”, I was involved throughout every sprint. Beyond the design of the functionality, I act as custodian of the product’s behaviour and design, making sure that the whole team’s vision is maintained right through to the finished product. This involved collaborating closely with creatives, working directly with the front end developer in growing the pattern library, scoping tasks in a digestible manner with the back end developer, usability testing and evaluating the success of the product in order to deliver user and client satisfaction. Throughout our sprints I design iteratively and communicate with my team clearly, in order for the work to be completed effectively, at pace and to a high standard.


Tailored tool

A solution to serve the best content for the varied audience is through a “personalisation”/tailored tool. This tool serves content based on the business stage, geographical area and industry sector of the user. For example, if a user is starting a business within food and drink and are based in Dundee after answering the three drop down questions, the results will return with online resources for starting a business, upcoming events in Dundee, market reports and external resources for food and drink, alongside Business Gateway’s business and research services.

When developing this tailored tool, I looked to other websites for inspiration. View Arup’s design

I wanted to make sure the tool was simple, short, optional and used user-friendly language.

Screen Shot 2019-05-07 at 22.29.11.png

The tailored tool has proved popular and made users searches easier - 85% of users who fill out the three steps then click onto a resource shown to them


Browser support

We test our websites thoroughly on the most recent version of browsers and attempt to provide feature and design parity across them all to the highest possible standard.

Accessibility

This website has been designed in accordance with best design practice with the intention of making it as accessible as possible. bgateway.com has an ‘A’ WAI rating with passes for many ‘AA’ and ‘AAA’ criteria.


Launch of Phase 1

Phase 1 launched as scheduled on 3 December 2018.


Phase 2

I’ve been working with Whitespace on a wide range of projects for over 7 years. Their work and final products for DigitalBoost have always been incredibly useful and engaging. They feel like part of the team and not just an agency.
— Jacqui MacDougall, Marketing Manager, Business Gateway

As we took an agile approach and delivered the new website in phases, whilst the MVP had gone live, there was still a great deal more work to deliver as part of Phase 2.

  • Online resources search

  • Online resources mega nav

  • Your sector (additional sub nav)

  • New case study header

  • DigitalBoost

  • Events & Workshops

DigitalBoost

DigitalBoost is a Digital Scotland funded programme delivered by Business Gateway that helps businesses increase their digital skills and knowledge with free workshops, guides, 1:1 advice and tutorial videos. The DigitalBoost Health Check allows business' to find out their digital strengths and weaknesses and points them in the direction of resources that can help them improve. DigitalBoost went live April 2019.


Continued User testing and Accessibility Improvements

As we were working at pace and co-created the development of the website with the client, there was very little time and budget allocated for user testing. As a UX Designer, not being able to validate ideas with real users can feel like fumbling in the dark. I prefer to validate my ideas and iteratively improve my designs to make sure both user and business needs are being met. That being said, I still felt it was a successful project due to the large amount of co-creation with the client. The client was able to share a great deal of user insights, this paired with the previous research findings meant that we were not designing completely in silo. From monitoring the website performance thus far, the site has seen vast improvements and is scoring highly amongst KPIs. I am also delighted that soon we will be conducting formal testing with users, including growth and start-up businesses from across Scotland.

The findings from the next session of user testing will be highly informative to if we have succeeded in the website redevelopment and how we can iteratively improve on the website. Something that I also want to focus on in future phases of bgateway.com is to continuously improve on the accessibility of the site. Whilst it was designed with inclusivity in mind, there are still further improvements which can be made. These include further reducing the number of PDFs on the site and working towards achieving full AA compliancy.