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.
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
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 After
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.
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
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.