A new vision for Rangle: Reflecting a fresh value proposition and service offering.

As Rangle has grown so has it's 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. Both the Rangle brand and website needed a refresh to reflect this.

Duration: 3 months
Role: Product Design
Responsibilities: Discovery, experience design, art direction, information architecture.
Rangle_Website_2
Business Goals — The New Website & Brand Should
  • Change the perception that Rangle is a consultancy that can only meet Javascript needs
  • Articulate Rangle’s new value proposition
  • Showcase work from new service areas
  • Drive recruiting to support Rangle’s growth
  • Illustrate and share the Rangle culture, people, and Rangle’s role in the greater community
Measuring Success — Metrics
  • Increase the number of qualified leads
  • Increase leads for end to end ‘digital transformation’ projects
Rangle-Website-Process_1

The initial strategy for the website and rebrand.

Understanding User Needs at Speed
  • With a requirement to launch the new website and brand in a few months time, conducting an empathy mapping session allowed us to quickly articulate user needs and pain points across different customer segments.
  • These summarized insights into our users helped inform many other activities during the course of the project, such as journey-mapping, defining experience principles and establishing information architecture.
Rangle-Website-–-Empathy-Map

Some findings from the empathy mapping session which were presented to stakeholders.

Mapping The Journey
  • I ran a journey mapping session with Rangle stakeholders to chart the course of users as they made their decision to engage with Rangle, whether that be as a client or a jobseeker.
  • The workshop unearthed opportunities for innovation as stakeholders shared their insights on both sets of users and customer journeys became clearer.
Rangle-Job_seeker

A section of the jobseeker customer journey.

Understanding The Market — Competitive Analysis
  • In order to help understand the market Rangle was in, the team conducted a competitive analysis. We analyzed patterns within data points we gathered and made recommendations for leveraging industry best practices.
Rangle-Competitive_Analysis

Some of the insights generated from competitive analysis.

Understanding The Brand
  • The team undertook a number of brand exercises to deepen our understanding where the Rangle brand existed in relation to it's competitors. Mapping an X-Y graph of the competition enabled us to assess where the Rangle brand currently stood and where we wanted it to be.
Rangle_Website_X-Y

An X-Y graph mapped competitors in terms of their current approach to visual design.

Principles To Guide Us
  • In parallel to all of this, the team was working on establishing experience design principles which would act as an overarching framework to guide the new web experience.
  • These experience principles acted as a north star to keep design decisions unbiased and outcome-based.
Rangle-Website-–-Experience-Principles

Experience principles acted as a north star to keep design decisions unbiased and outcome-based.

Rangle-Design-Principles
Exploring Art Direction
  • In order to guide our approach to establishing a design language, the team explored concepts through mood-boarding and  style tiling. These acted as a basis to inform typography, photographic art direction, colour and grids.
Concept-1-Moodboards_1
Concept-2-Moodboards

Mood-boards to inform art direction.

Rangle-Style-Tile_1
Rangle-Style-Tile_2
Rangle-Style-Tile_3

Style tiles based around the concept of divergence and convergence.

How Will Users Find What They Need?
  • Taking requirements from business and user goals — the team ran a card sorting session.
  • This helped define how the site would be structured and provided guidance on the type of navigation design (a hierarchical tree structure was utilized) that would best suite the site.
Card-Sorting_2
Card-Sorting

Running a card sorting session, used to guide our decisions around information architecture.

Rangle-Sitemap_1

Sitemap informed by card sorting session; user and business goals.

Telling the Rangle Story
  • The homepage was a key part of telling the Rangle story and it needed to tell that story from the perspective of both audiences — clients and jobseekers.
  • The asymmetrical grid layout spoke to Rangle’s deep commitment to the agile framework — a structured process, but with the fluidity to solve a variety of problems as needed.
Moving Beyond Experience Design
  • From here, the team went on refine the direction of the wireframes and move to visual design, where they integrated the website UI with the new Rangle visual identity.
  • The result is a website which clearly conveys the new Rangle value proposition and interweaves the Rangle story throughout the experience.
Homepage-Wires

Homepage wireframe exploration.

Rangle-Mobile_screens
Results

In the months following the website redesign, dramatic traffic improvements were seen on the website, including:

  • Pages per session increased by 96%.
  • Visit duration increased by 125%.
  • Bounce rate decreased from 76.97% to 16.79%.
From This, We Can Deduce That
  • The website journey has improved so people are more likely to follow a path rather than bouncing.
  • People are more engaged with the site and spending more time on it.
Rangle-Website_Community_1

Contact

© Jamie O'Leary 2020
Experience Designer

This isn't the end, it's just the beginning.✌️