Using Design Thinking to Create a Better Website

Bleep 360 Website ReDesign

Part 1: The Challenge

Background

Bleep 360 was founded in 2013 and has become a unique 24 hour Healthcare agency that prides itself on providing “only the best” service for its candidates and clients.

Today, the competition in the nursing agency market is more competitive than ever before with direct competitors like Your World Healthcare, TFS Healthcare, PE Global and Direct Healthcare as well as new competitors like Altrix and Lantum.

With this much competition, staying relevant and top of mind requires an outstanding candidate experience – online as well as offline.

Problem

The Bleep 360 team feel that their existing website doesn’t represent their current brand. As a candidate-centred company, they wish to better understand their candidates needs and wants and to use this information to deliver a more engaging digital presence.

Bleep 360’s candidate related goals are: 1) attract new candidates, 2) support existing candidates. It is therefore imperative in this website’s redesign that the information architecture should focus on organising and structuring content in an effective and sustainable way to improve the experience of users who are seeking a new new roles in healthcare, getting compliant ready and require payroll related support.

Old Website

Scope

The aim of this project is to completely redesign and develop the new Bleep 360 website.

Roles

User research
Information architecture
Copywriting
Content strategy
Visual design
Website development
Testing

Tools

Paper
Markers
Miro
Confluence
Figma
Adobe Photoshop & Illustrator
WordPress

Part 2: The Process

Using the design thinking methodology, I’ve conducted a one-week design sprint. This include the 5 stages – empathise, define, ideate, prototype and test. Upon launch, we will be able to validate the solution through testing and revisions so as to complete the process.

Step 1: Empathise

To understand Bleep’s competition, I, along with a healthcare professional, conducted a competitive analysis and audited websites from traditional competitors like Your World Healthcare, TFS Healthcare, PE Global and Direct Healthcare as well as new new competitors like Altrix and Lantum to learn what they were doing right, wrong or not doing.

One of the main assumptions that I gleaned from this analysis was that most of the competitors use low-quality photos of people, poor copywriting and poor information architecture while some of the others like Direct Healthcare have a modern visual design, compelling copy and an excellent information architecture.

I reviewed how our representative users performing the following tasks:

Registering as a healthcare professional with Bleep 360
Find a role/job that fits their criteria of work and situation
Accessing resources to assist them becoming compliant with Bleep 360’s standards

Step 2: Define

To simulate a real-world design thinking activity, we’ve created an experience map in Miro. This map is similar to an affinity diagram, but highlights the order of actions and pain points experienced along the way.

First, I pulled the most noticeable or important details from the competitive analyses and site visits. Then, we ran a workshop with key stakeholders in Bleep 360 to obtain data about users experience and added it to the experience map as yellow sticky notes with the first part of the process on the left, followed by each subsequent step.

Next, we grouped the data (yellow stickies) into themes (blue stickies) and grouped those themes into tasks (green stickies).

After that, we used dot-voting by placing dots on the biggest pain points. The issues that accumulated two dots were considered important and three dots for issues we considered urgent. Stickies that had similar pain points were combined.

Finally, we tallied the dots to find the biggest pain points. These would become the foundation for the user-centred design strategy.

The design strategy began with the stickies that had the most pain points (i.e. the dots). Then, I inverted those pain points to create a list of goals to work toward, but I also made sure that these had a business perspective to balance user needs with business needs.

To create the metrics, I first determined what success looked like for each goal. Then I worked out how I could measure that success in terms of user efficiency (i.e. time to complete), increased effectiveness (i.e. reduction in error) or increased candidate satisfaction (i.e. happiness with the process).

Throughout the rest of this project, we will refer to the design strategy to ensure our solution addressed user goals.

To really understand our audience, the candidate, we had a number of 1-on-1 interviews. Asking key questions relating to their experiences with Bleep help us to build 4 persona boards in Miro.

I found clusters with similar attributes, I grouped them into themes (blue stickies). To clearly identify the source of the responses, I gave the stickies corresponding colours to the names. In the end, from the multiple interviews we undertook, I established 4 main characters that represented 4 key users. I called them Utilising Ursula, Loyal Lola, Passionate Paul and Opportunistic Otis.

By focusing on the needs of these representative characters, I could deliver a streamlined solution that has a consistent, targeted message.

Step 3: Ideate

Planning a whole site redesign, its important to understand how users access inner pages from the main navigation, home page and footer. As a result, my sitemap sketches eventually led to a more and intuitive structure.

To ensure we’d properly thought out the sitemap, I sketched task flows for tasks that the primary persona (the candidate) and the secondary persona (the client) need to accomplish to connect with the Bleep team. These sketches helped me think through all the tasks and find opportunities to reduce clicks to complete each task more efficiently.

Since two of the project goals were to provide life job suggestions on the homepage, I initially sketched wireframes that included live job speciality filter in the hero section and locations/regions in which Bleep was hiring. Ultimately, though, I decided to use the live job search for the hero section because it addressed both those issues in a simple element.

I added this extra step of paper prototyping in the design thinking process because I wanted to be certain that a representative user could easily accomplish tasks. I also wanted to be sure the user experience was aligned with business goals.

I used three sets of wireframes to complete each task. The user feedback informed me that my third wireframe was the easiest to navigate. That helped me move onto prototyping software.

Step 4: Prototype

By the time we moved to software, I’d locked the architecture. Still, designing the sitemap in Figma helped me organise all my sketches and notes into an easy to read artefact.

I created five task flows and wire flows in Figma that were based on my earlier sketches. I started with the user goal, which were defined as the follow:

As someone who values their time outside of work,
I want the flexibility to choose when and how much I work.
An organisation that needs to function with adequate members of staff,
wants the ability to find capable nurses on short notice.
As someone who’s seeking to find shift work,
I want the ability to search and apply for opportunities.
As someone who’s seeking to use the referral programme,
I want the ability to refer a friend and understand how to claim my commission.
As someone who’s seeking a job at a healthcare recruitment agency,
I want the see what opportunities are available and apply to them.

These flows provide a high-level overview of how the primary, secondary and tertiary personas would complete their tasks from the website’s main navigation, the homepage and the footer.

The result of this stage clarified the user flow and made it clear that I was ready to design the final wireframe in software.

I created the low-fidelity wireframe in Figma. The changes I made from my original sketches were based on user-testing feedback of the paper prototype.

For example, the user thought that the benefits should be be given greater priority over the quote and refer a friend block, as the benefits would have a great impact on user engagement. That feedback led me to moving the benefits to just underneath the hero banner and above the page fold.

Before I moved onto the high-fidelity design, I wanted to create a style guide that would aid me during the design process and, if necessary, provide me with an artifact that I could refer to later.

Part 3: The Solution

For the high fidelity design, use Freepik.com for the images. I wanted to create and effective content strategy that aligned with the project goals and that would satisfy the personas as well as the clients expectations. I also wrote copy that would entice users to complete the goals.

This project included site development and testing which allow me to make further changes to the design to further improve the user’s experience. I used WordPress for the development and completed the entire construction of the site in just under 20 days.

Final Thoughts

To complete this project and ensure the goals were achieved, I’d need to validate the needs and wants of the personas that I created with quantitative and qualitative data. If that data didn’t confirm my assumptions, I’d have to redefine the personas. However, if that data did confirm my assumptions, I’d conduct new user-testing, redefine or refine the problem, brainstorm new ideas, and undertake some A/B testing to further improve on the site’s user experience. There’s always room for improvement!

Beyond