Business Link

Responsive website redesign

Inside a foodtruck that was helped by Businesslink
Inside the Drift food truck, one of the many businesses helped by Business Link

Say you’ve got big dreams and ideas that you want to turn into a business, but aren’t quite sure how to get started. Or maybe you’ve taken a few steps, but don’t know what’s next. Where do you go?

In Alberta you go to Business Link, which provides budding entrepreneurs with a wealth of information and services on starting and operating a business in Alberta. If you’ve got the dream, drive and passion to get started, Business Link can help you turn your idea into reality. We worked with Business Link almost 20 years ago when we were starting up Yellow Pencil, so working with them to redesign their website was like going back to our roots, you might say.

Project background

Business Link, a non-profit organization funded by the provincial and federal governments, has been successfully operating out of Edmonton since 1996. So helping people was not the issue – the team has that down to a science. But not everyone who could benefit from its products and services was even aware that such a resource existed.

Business Link’s goal is to be the entrepreneurial hub in Alberta, a place where people planning, financing or starting their businesses can go to figure out how to take the next step toward success. Similarly, Business Link recognized that a brand refresh was the next move it needed to make, so we partnered them up with a local Edmonton branding agency to create a new brand and logo that captures the essence of its bold and exciting entrepreneurial spirit.

The new businesslink logo

With a fresh look and a new energy emerging, we worked with Business Link to redesign its website. We went straight to work, setting out to help transform businesslink.ca into an effective and streamlined site that connects entrepreneurs to the resources they need – all with a few clicks online.

The challenges

A screenshot of the old Businesslink website.

Business Link’s existing website was outdated and the platform it was using made updates and site maintenance difficult and tedious for internal staff.

The website was complicated to navigate, with many levels of content, and poor wayfinding. Adding to this was a messy and massive labyrinth of content – not exactly enticing to enthusiastic entrepreneurs eager to get their businesses going. Plus the site wasn’t fully responsive, so Business Link was missing out on a critical opportunity to attract new business that were interacting with the website on a wide a range of devices including desktop, tablet, and mobile.

The solutions

Our primary objective was to create a navigable, fully responsive, and accessible website that clearly identifies the products and services Business Link provides, allowing its users to quickly and easily find what they need – on any device. Essentially, Business Link wanted to provide additional value to its clients by using a “direct and connect” business model. The new website needed to be the place where excited entrepreneurs could land and start confidently planning their businesses, or where they could find the support they needed from Business Link’s team through consulting and supportive services.

Discovery

We started with a discovery phase to understand stakeholder needs, user needs, and current pain points, really getting down to what Business Link wanted for its new website. And most importantly, we began a process of asking Business Link that all-important question: Why?

With a mixed team from user experience, digital strategy, and development we spent a few days face-to-face, working collaboratively with Business Link’s team to gain insights into their overarching business goals, how the new website could support those goals, and what outcomes they wanted to achieve. Business Link had already done a great job segmenting its audiences, understanding the various tasks they needed to accomplish, and how to direct them to the right resources. We used a new tool we had created internally, Discovery Canvas, to help focus the conversation and keep track of ideas, challenges, and potential solutions.

Setting priorities and reducing risk

Business Link had an ambitious timeline for launching its new website, so we had to zero in on what elements were essential – and quickly. That meant stripping the project down to the bare essentials, and if we couldn’t immediately identify how something could add value, it would be put on the back burner or eliminated altogether.

Discovery can involve extensive discussion, the documentation of business requirements, and even rounds of design, which eats up time that could be spent getting closer to the finish line. So instead, we used a MoSCoW list to help distill Business Link’s wants down to its actual needs. In brief, MoSCoW is a collaborative process that allowed us to set project priorities with Business Link to determine the “Must Have,” “Should Have,” “Could Have,” and “Would Have” requirements for their project. Interested to learn more about this process? Read more about MoSCoW lists here.

Sounds simple enough, but the benefits are huge, particularly because it helped us reduce development risk and scheduling risk. For example, Business Link wanted us to build a searchable directory of partner information that could be used by staff. In the typical process, we’d have to try to translate the business requirements into practical terms and build something that would be delivered toward the end of the project. If something was lost in translation, precious development time and resources would have been wasted.

Instead, we built a quick prototype of the tool, which gave Business Link a hands-on opportunity to see how it worked using real data. Overall, our Lean approach to this project allowed us to build flexibility into the discovery phase in order to maximize Business Link’s “bang for buck” and keep timelines on track. We then created a prioritized set of MoSCoW requirements log for the new businesslink.ca that would be the foundation of the project going forward.

Design

Business Link now had a fresh new logo and identity that conveyed its re-energized focus as a connector and director. We knew Business link wanted to move away from its rigid “government” look and feel toward a website that was dynamic and entrepreneurial.

Guiding the user experience

As an entrepreneurial hub, Business Link needs to direct people to the right resources. It might be booking a webinar or boardroom through the website, connecting people to its network of small business service centres in Alberta, or scheduling a meeting with one of its experts.

We started by collaboratively working with the Business Link team in our workshops to create user experience sketches and a sitemap to give structure and a provide high-level view of the content, interaction, and navigation needs for the new site. We sketched out how content should be organized and prioritized on the site. Together, we identified the relationship and importance of various page components, where there were gaps in content, and how to reorganize existing information so that people could navigate through the new site more effectively to get to where they needed to go. By the end of the workshops we had pretty much everything we needed to get started with our work – from requirements to a flushed out user experience.

Sketches of a wireframe for the new businesslink design

From static to interactive

We took the user experience sketches we created and translated them into interactive wireframes, which were built in-browser. This way, the Business Link team didn’t need to imagine how the site would function – they could click around and experience it for themselves. This allowed the team to see how the site would be laid out and how it would look on various devices, including desktop, tablet, and smartphones. From a practical standpoint, it eliminated the need for static wireframes and Photoshop mock-ups, which sped up the design phase. We simply started with the useable code for the wireframes and gradually added a layer of styles on top.

Building out the brand

We used style tiles as a tool to get Business Link involved in the design process early on, rather than presenting them with a “grand reveal” at the end the project. Style tiles offer that happy medium between the conceptual nature of a mood board and refined mock-ups, and they provide a starting point for the design discussion. We presented a couple of options to Business Link so that they could pick and choose elements from each, such as typography, colours and design elements, which helped narrow down the overall design of the site.

Photography was another essential part of the design. Since Business Link is all about helping people, we really wanted to highlight what they had achieved. We accomplished this by showcasing Business Link’s real clients authentically, working at their businesses, rather than using impersonal stock images. This involved us working closely with Business Link to come up with guidelines so that they could coordinate the photoshoots with their clients.

Our approach to the design phase helped speed up the process immeasurably, and we were able to continually make design refinements even while the content management system was being built.

Little by little, through client collaboration and careful iteration, we ended up with the final site.

And of course, we created the designs to be responsive over all screen sizes and resolutions, eliminating barriers to mobile use.

A style tile created for businesslink
A second style tile created for businesslink

Development and deployment

The old site was operating on the Joomla platform, and there was no content strategy – just lists and lists of links. Drupal, a robust and flexible open-source CMS, was chosen as the platform for the Business Link’s new site. It’s a solid out-of-the box solution that can be extended by adding modules. That made it ideal for Business Link, since the website needed both static and interactive pages.

We developed custom functionality that would cater to both the user and staff needs including e-commerce, a directory of Business Link partners, and integrated social media. For instance, Business Link offers webinars to its clients, and the speakers wanted to gain a better understanding of the attendees (for example what stage of business they are at) so they could plan the course better. We built a commerce checkout survey pane that can be populated with questions that the administrator can easily add through the product configuration screens. When the order is complete, the survey answers are included on the order for the administrator to review.

Templates, such as news items, events and basic pages, were created to allow for easy updates and implementation by internal staff. We also created a number of content blocks, such as landing page cards, so that staff could easily switch or re-use a block on multiple landing pages, as well as configure the menus on a per landing page basis. Overall, content on the site is highly modular and reusable, so that it can easily be adapted to suit Business Link’s evolving needs.

User acceptance testing and quality assurance were done to ensure that the site functioned as it was intended and pristinely met the wish list and expectations that Business Link stakeholders had for it.

A screenshot of the new businesslink site on an Apple iphone6

Content strategy

Business Link’s old site was a collection of information that had no content strategy guiding it. Content was outdated and was not effective in giving the user or even Business Link’s staff members what they needed. Our content strategist worked with Business Link diligently to ensure that their content could effectively meet the needs of their users.

Business Link had identified four primary audiences for its services – starters, runners, planners, and dreamers. We further refined this into two groups: thinkers and doers. Within these two groups, we created a more detailed breakout of audience characteristics and each of their specific needs in order to pinpoint content requirements.

With these audience considerations top-of-mind, content could now be created to support this full spectrum of users, both thinker and doer groups. Dreamers and planners, for instance, were in the thinker group. They hadn’t quite committed to a plan or were in the very early stages. In contrast, starters and runners had already taken some action and were looking for next steps and even assistance from Business Link staff. As such, the site was structured to meet the various users’ needs by directing them to the self-help resources, tailored products and services, and other business service providers that will help them be successful over time. In some cases, it meant moving them towards a more personal interaction with Business Link’s staff.

It was crucial for Business Link’s content to represent its new focus within the marketplace. After all, a formal government-style voice just didn’t suit its dynamic new website.We created writing guidelines to ensure that Business Link staff could easily maintain the voice and tone for content needs to come.

Image of the new businesslink websites on a mobile, tablet, and desktop computer.

The results

The new businesslink.ca launched in December 2014 to an overwhelmingly positive response. Business Link staff love how efficient it is to manage, while site visitors have commented on how easy it is to find exactly what they need.

In addition, the new responsive design offers access to this information across all mobile devices by using a flexible layout that optimally displays the site’s content based on the screen size. This approach keeps content as clear, usable and easy to find as it is on a desktop.