Belfry Training
Website Redesign
Belfry Training Ltd is a family run training company that guide people through NVQs, run in-house training sessions and offers consultancy in Vocational Training and in Technology Enhanced Learning.
They needed to replace their out-dated website, with one that displayed their professionalism and influenced people to start a relationship with Belfry.
Client Workshop
In order to gain an understanding of Belfry and the goals of the project, I ran a kick-off workshop with the clients, interviewing them and building up a project canvas.
Belfry Training wants to boost their business, facilitate discovery, display their personality and start communication with potential clients.
User Persona Development
I needed to understand the users we were targeting, along with their goals and frustrations. So, together, we worked to produce a set of user personas representing those who would be interacting with the product.
Persona development got us considering the client’s goals from a user’s perspective, beginning the ideation process.
Website Evaluation
I wanted to use the existing website as the base iteration of the design process.
Along with conducting a quick-and-dirty usability evaluation, I produced a website taxonomy.
In doing so I gained useful insight into how the site would be frustrating users and ways it was failing the client’s goals.
Competitor Analysis
In order to better understand the industry standards, I developed a content/functionality inventory of competitors’ and Belfry’s websites, finding which elements were widespread and see possible additions/improvements.
Asking the clients to evaluate competitors’ websites not only gave an invaluable in-industry perspective but helped me understand the clients’ tastes further.
User Journeys
I wanted to analyse existing user journeys to help build a great one for this product. From our user personas perspective, I evaluated the journeys of Belfry’s website and the competitors’.
I then mapped out what an ideal journey would look like, highlighting essential elements for this journey to succeed.
Establishing Requirements
To create a set of features and outcomes to be the spine of the product, to reference throughout the design process, I combined insights from the research phase into a set of functional, and non-functional requirements.
This provides a solid base for the ideation phase.
Sketching
I needed to translate the research and requirements into designs, so started sketching.
Rapid idea generation without hesitation over whether a design was buildable, or even that good, bolstered creativity. Sketching for both desktop and mobile states, and quickly iterating on promising designs, I soon had the first website prototypes.
Lo-fi Prototype User Testing
I needed to test the first iteration of this product, to highlight usability issues and examine the user flow.
After touching up the most promising sketches into a paper prototype, I ran controlled user test sessions.
From this came invaluable user feedback that I was immediately able to iterate with.
High Fidelity Prototype
The next step was to create a prototype that better mimicked what the product would be like to use.
I developed a high fidelity, fully interactive prototype in Marvel, adding further details and functionality to the previous prototype.
User testing this prototype gave more feedback to incorporate before moving forward.
Information Architecture
Meeting with the clients, we worked to ensure the site’s content satisfies the users, as well as the requirements, as part of an engaging narrative.
Using our user personas we were able to define what content was high-priority, and what was surplus to requirement.
Branding
I also collaborated with graphic designer Daisy Grice to create a new brand identity and logo which portrays the professionalism and personality of Belfry Training and is suited to both print and digital.
The developed marks drew from the previous logo, with new themes encompassing Belfry’s training work, characteristics, and goals — Ripple Effects, Transparency, & Moving Forward.
Development
Considering the clients’ time and cost restrictions, but wanting to avoid losing the freedom of design, I used Wix to build the site.
The site is immediately live meaning I could gather and react to feedback throughout development.
Wix, however, is sometimes limited meaning some designs could unfortunately not be implemented.
Accessibility & Heuristic Evaluation
I wanted to ensure that there weren’t any clear usability issues remaining, so tested the site for accessibility; colour blindness, visual impairments and reduced mobility, and also ran through a heuristic evaluation of the site, making a final few tweaks.
Longer-term, the client will continue to collect user feedback, and we will also gather website analytics, so we can judge how the website is performing and adapt to any issues in the future.
Blue colour blindness representation
Red colour blindness representation
Green colour blindness representation
Belfry Training Limited’s new website has been built using user-centric design methods, creating an experience that will help users discover the information they need, leading them comfortably into starting a discussion with Belfry.
The new brand identity combined with the clean and image-heavy aesthetic produces a professional and friendly vibe, mirroring that of the company.
The strong identity, the websites SEO and its ease-of-use will improve the amount of traffic the company receives, and in turn work towards boosting the business, as desired.
Project Delivery
Project Learnings
At every stage of this project, I’ve discovered something new, or have identified a process change I would like to make.
The biggest takeaway is to speak with more users more regularly throughout the process—at the very beginning to test and iterate on our User Personas, through to right at the end user testing the website on release and iterating on feedback.
I’d also track and analyse usage and SEO data to identify further improvements that could be made.
Finally, I’ve learnt that significant changes in technical capability during a project should be fully considered, and designs changed accordingly, rather than those tweaks being made late-on during development.
