Website logo refresh

Doing the right thing, the right way, and then improving on it — positioning a growing consultancy for scale

Role —
Senior Visual Designer / Visual design lead
Duration —
3 months
Responsibilities —
UX auditing & benchmarking
Competitive analysis
Information architecture
Visual Design testing
Design system integration
Highlights —

Aligned our experience principles with our online presence and validated through visual design testing

Increased qualified leads by 300% in the 3 months following our release

Pages per session increased by 96%

Bounce rate decreased from 76.97% to 16.79%

Background, goals and my role


As Rangle has grown so has its service offering. Started 7 years ago as a Javascript development shop, Rangle has expanded to offer user experience and visual design, digital strategy, agile consulting and machine learning capabilities. When I joined Rangle, both the Rangle brand and website were undergoing a refresh to reflect this. We had established a visual identity and website, rooted in simplicity with influences from Swiss and modern design.

The primary goals of the original website launch were to increase qualified inbound leads and leads for end-to-end digital transformation projects, Rangle’s new area of focus. We learned from our sales and marketing teams that were not quite hitting the mark here. Prospective clients were seemingly confused about our value proposition and had a hard time figuring out what we did. The visual refresh feedback was also underwhelming and we were missing the ‘wow’ factor. We needed to course correct and better reflect and position our value proposition for scalable success.

Above: A snapshot of our original brand refresh and website launch.

My role

Initially, I joined the project to take over from the previous visual design lead to refine visual design and work closely with engineering in the lead-up to the first release. I worked on evolving the visual design language, introducing complimentary abstract shape patterns and bringing it all to life with motion design.

Approximately 3 months later, when we revisited the project to course-correct, I joined the project as a senior visual designer, working alongside an experience design lead and another visual designer and experience designer. We also had a program manager, project manager, scrum master, 2 engineers and later a QA specialist.

Our goals

Since we were course-correcting, we maintained similar but modified business goals of our first release:

Clarify our value proposition so prospective clients and candidates understand what we do

Showcase our work from our new service areas

Reflect the culture at Rangle and increase the number of inbound candidates

Our metrics goals remained the same:

Increase the number of qualified leads

Increase leads for end to end ‘digital transformation’ projects


Let's hit the reset button and align...

We had heard from our sales and marketing teams, "Clients don't know what we do!". To be able to better show and tell our client what we do, we needed to align on a vision statement that our team could get behind and understand. We took a skeleton statement and filled in the blacks (underlines).

Our vision statement — will provide value by being focused and accessible for people who want to be better so that we can build authentic relationships and unleash possibilities.

Auditing our website — where can we improve?

This project presented a great opportunity to address usability and accessibility issues from the first release. To kick off this project, I wanted to take stock of the issues that we would like to address so I partnered with an experience designer to undertake a UX audit of the existing website (time-boxed to one day). Specifically, we looked at information architecture, content hierarchy, accessibility and components. We also used Google Analytics to gather insights on page ranking, user journeys and drop-off.

Above: Some pages from the UX audit I conducted which helped generate a list of improvements and document hypotheses of engagement issues with the website.

Stakeholder interviews

Our experience design lead moderated a series of interviews with 16 internal stakeholders (from our senior leadership team and C-suite) and 8 external stakeholders (from existing and prospective clients and potential job seekers). The results were fascinating and gave us insight into engagement journeys and different perceptions of Rangle. I helped facilitate these sessions and synthesize the results which we compiled into themes and actionable outcomes.

Above: Outcomes and action items from our internal and external stakeholder interviews were compiled into our Master Insights Document (MIL for short). This document became our checklist for design exploration.

Where did we land in our market?

As part of our competitive analysis work (in the lead-up to the first release), we conducted a brand charting exercise to understand where we stood in the market vs our competitors. Our team revisited this post-launch to evaluate where we feel we landed and where we wanted to be.

Above: An X-Y graph showing where our team felt we landed compared to our competitors in terms of their current approach to visual design.


How do we "wow" prospective clients and candidates and communicate our value proposition clearly while staying true to our brand and experience values and bettering our competitive moat?

Exploring art direction

Who does it better than us? Who do we feel is successful in our space and why? We had gathered insight from our stakeholders on which companies they feel do a good job and we asked ourselves why. I conducted some visual design research, exploring competitors and adjacent service brands and the result was a collection of moodboards to help guide and inform the new visual direction.

Above: An extract from our moodboards, guiding our new visual design direction.

Staying true to our values

Charting our course through our design evolution, we wanted to stay true to ourselves. We created and aligned on experience principles that would guide our design decisions and unify our brand and web experience.

Above: Our experience principles which we would later leverage to be our visual design testing metrics, measuring the success of our redesign.

Focusing on first impressions

We learned from our business development team how important first impressions were. Client's usually evaluate partnership opportunities within minutes and often don't make it past the homepage if they do not find what they're looking for. Our homepage would be our most important communication tool and we needed to make an impact. We crafted a refined value statement supported by our services, listed above the fold. Our services were then supported by our best work we had done in that space.

Above: Wireframes for our homepage and case study pages, with a refined value proposition, clearly defining the services we offer and supporting case studies examples front and centre. We also refreshed our case study format, showing highlights and our team involved.
Above: Some initial coats of paint on our homepage, exploring immersive and refined experiences.

Let's test our visual design...

Iterating through internal design reviews and lean testing methods, we refined our exploration to high-fidelity prototypes that we would bring into a round of visual design testing. Our homepage experience is immersive and interactive, showing our culture and our work and incorporating fun micro-interactions and transitions.

Above: An early prototype of our new homepage and case study pages that we would use to test with our internal and external stakeholders.

From this round of visual design testing, we wanted to learn how we match up against a selection of our close competitors in our space and how closely we aligned with our brand values and experience principles. We interviewed six people from three domains within the business, Creative, Marketing and Technology as well as two external stakeholders.

During the test, we asked participants to examine Rangle's existing website and two of Rangle's competitors, and We then asked them to rate their experiences using opposing word choices from our experience principles. This helped us set a baseline for testing our proposed redesign and see if we were on track or not.

If you were to evaluate the over all experience of this website, taking into account how all the design, content and technology work together, what words resonate with you more?"

Above: We presented participants with an evaluation chart listing our desired experience principles and their opposing values. After evaluation, participants indicated how they felt their experience aligned with the words.

Next, we asked participants to evaluate our proposed redesign and asked them to rate it using the same word association.

What did the results say?

Evaluating our competitors against our own experience principles was an interesting study. The results gave us quite an insight into what our own stakeholders like about our competitors and where we could tune up and iterate on. The study also indicated we were on the right track with the improvements we made in our design exploration—we improved significantly in approachability, focus and flexibility. However, we found areas to improve on such as timelessness as we moved towards a more immersive experience.

Above: Our stakeholder evaluation of our existing website (before redesign) according to our experience values against our top competitors in our space.
Above: Our stakeholder evaluation of our new redesign against the same competitor results from the testing session.


With our design direction on the right track, it was time to iterate and move into final visual design with a focus on bringing flair, surprise and delight to the rest of the website.

Bringing it to life with animation

We wanted to create a rich immersive experience for prospective clients and candidates, flexing our creative and technological prowess throughout the website. This meant that we had the green light to create tricky and complex animations which for me was like a ticket to Disneyland. From homepage loaders to scroll-based animations and video, we looked for ways to deepen our experience and decrease drop-off rates.

Above: Scroll-based animations and transitions for our partnership model page.

Experimenting with grids

To be a leader in a field often means not playing it safe and this was the approach we took with visual design. We experimented with our grid approach, establishing a responsive 10-column grid notably without page gutters or margins that would work on each of our breakpoints. Content would be supported inside 8-columns, giving breathing room regardless of device screen size.

Above: Our new 10-column grid for our 4 breakpoints. Our nav menu would float on top of our two desktop breakpoints.
Above: An example of how content flowed within our new grid and breakpoints.

Fluid typography and spacing

Supporting our dynamic grid structure, we wanted to add flair and responsiveness to other base components. We implemented fluid typography and fluid spacing that would seamlessly scale based on viewport width or vh units. To do this we determined base sizing per breakpoint and derived calculations we found in this Smashing Magazine article.

Above: We turned our typography and spacing values into fluid values with base sizes at our 2200px, 1280px and 320px breakpoints.

Design system integration

As we consolidated our new components in Figma, we migrated these to Storybook and Contentful (our website CMS). We created building blocks from our base components in Contentful (e.g. spacing values) as well as templates for component groups and pages. This, along with playbooks for creation, empowered the Marketing team to construct new pages in a much shorter timeframe.

Above: A selection of our Figma design system components.


In three short months, we were able to come out with the second release of our refreshed marketing website. This enabled us to reduce the team size from 10 to 3 people post-release (one visual designer and two engineers) to observe feedback and iterate on the results. Major wins from the project are as follows:

Design system built within the CMS

We integrated our base components right into Contentful (our CMS) which resulted in hyper-efficient page-building time as well as design updates. Coupled with templates and page-building playbooks, we reduced the deployment time from over 2 weeks to under 3 days for updates.

300% better qualified leads

In the 3 months following the release, our metric goal of increasing qualified leads improved by a factor of 300%. Our business development team noted that clients found it easier to understand what we did and were impressed by the work and clients we featured more prominently.

Better analytics moving forward

We formed a better picture of client and candidate journeys by bolstering our analytics tools, installing Hotjar on the website to monitor user behaviour and tracking metrics better with amplitude. In the 3 months following the release, we noted a 96% increase in pages per session and our bounce rate decreased from 76.97% to 16.79%.