Doing the right thing, the right way, and then improving on it — positioning a growing consultancy for scale
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%
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.
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.
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
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).
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.
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.
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.
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.
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.
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.
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.
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, versett.com and twg.io. 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?"
Next, we asked participants to evaluate our proposed redesign and asked them to rate it using the same word association.
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.
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.
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.
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.
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.
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.
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%.
A react native app that helps international students get into the best universities in North America.