top of page
tr570bg.jpg

Ranger Boats®

Driven by a passion for perfection, RANGER® Boats has over 50 years of experience delivering fiberglass and aluminum fishing boats that provide unparalleled craftsmanship, performance, innovation, and strength.

Contribution: UX Design, User Research

ranboat.jpeg

Overview

Objective

This project aimed to enhance Ranger's model configuration tool for better usability, boosting revenue for the company and its dealers. The Build Your Own tool allows users to customize product components like motor, color, and options.

Startegy

Discovery

Researched user pain points for insights

Define

Idetified project-focus areas

Ideate

Developed wireframes, user journeys

Prototype

Prototype the solutions

Solution

The redesigned interface incorporates a visual break to prevent cognitive overload when introducing new content and utilizes a modal for the configuration workflow, enhancing user awareness. The streamlined navigation experience, achieved by consolidating groups, ensures the website now guides users seamlessly through the buying process with informed step-by-step guidance and persistent progress indicators.

Floating Ipad.png

Discovery

In this phase, I empathize with users, aiming to understand their needs, goals, motivations, pain points, and behaviors.

Usability Tests

Usability tests conducted through usertesting.com helped in:

  • Identifying potential usability issues that could negatively impact completion rates and lead to submission abandonment.

  • Identifying potential usability issues that might increase the time taken to complete a build submission.

  • Identifying usability issues that could negatively affect the perception of ease of use.

  • Recommending user-centered design changes to address these identified issues.

Ranger-Analysis-2.png
Heuristic Evaluation

I reviewed how the configurator workflow performs under the Nielsen Norman Group’s 10 Usability Heuristics to identify potential improvements.

Competitive Analysis

I review patterns on peer websites to identify areas in which we may better perform against competitors.

Taxonomy

I conducted a taxonomy to develop an understanding of the general pattern logic of Ranger’s configurator options, paving the way for structural discussions on feature and option selection logic.

Design Workshops

The UX team collaborated on major screen decisions and patterns to consolidate implications and recommendations.

Define

In this phase, I define the problem based on insights from the empathize phase, synthesizing research findings to understand users' needs and expectations.

Usability Issues
  • [Visibility of System Status] One of the most prevailing issues users were facing is keeping track of status changes. Primarily, users have difficulty keeping up with the overall build price and image/view updates.​

  • Users are having difficulty deciphering the info presented in the Summary Section; particularly, differentiating standard/added features, and their cost.

  • The Taxonomy shows that there are no established naming conventions for BYO groups.​

  • [Error Prevention] Our usability tests show that users sometimes get confused during page loads; elements are still interactive, and a large amount of new information is loaded in a jerky manner. (eg. Right now, the user sees the footer every time it loads.)

  • [User Control and Freedom] The main navigation menu for the site is still visible, so users accidentally exit by selecting an item in the menu.

  • [Recognition Rather Than Recall] Excessive information on the screen ( eg. boat image that is not dynamic or interactive). this can lead to confusion and increase scroll mileage.

screencapture-rangerboats-saltwater-inshore-bay-2660-bay-build-html-2023-12-21-18_23_17.pn
Design Direction 
  • Improve visual patterns and hierarchy (lines, outlines, selections, active states, progression buttons)
     

  • Improve visibility of system status; both in terms of price and image/view status:

    • Introduce a persistent and clear indication of past, current, and future status for each decision users make in the BYO process.

    • Adding the right directional iconography and cues to the BYO experience should offer a more satisfying

 

  • Improve match between the system and the real world: 2/10 testers truly understood the options and features that were presented to them in the Color, Motor, and Options section.

 

  • Content control through utilizing tabs/expanders/selectors to reduce scrolling, show more at once, control how we present options

Selecting Model.png

Ideate around the majors decision screens 

Motor.png
Options.png
Send to Dealer.png

Ideate

Understanding the users' wants, needs, and expectations, I proceed to generate potential solutions for the defined problem. I explore diverse ideas and concepts without judgment to foster creativity and innovation.

Start by addressing how users are introduce to the workflow

Image_0008.png

Design & Prototyping 

In this phase, I create interactive models, gather feedback, and iterate on the design to refine the user experience before development.

Improved User Control and Freedom

The design uses a modal (implies a screen takeover) that obscures the main nav menu, which tells a user more clearly that they have entered the configuration workflow.

Improved Error Prevention

Provide a clear visual break between the current content and the next; this reduces the chance of cognitive overload when introducing new content.

Improved Grouping

 The number of groups was reduced by consolidating smaller groups into larger ones, resulting in a more organized and intuitive navigation experience. 

Improved Workflow

The redesigned website now guides users seamlessly through the buying experience. Users are informed about each step and what to expect next, ensuring a smooth and efficient process. Additionally, clear call-to-action prompts encourage users to reach out for assistance when needed.

Improved Visibility of System Status

The new design introduces a persistent and clear indication of users' progress throughout the "Build Your Own" (BYO) process. Users can easily track their past, current, and future decisions, allowing them to make well-informed choices.

m motor.png
m colors.png
m option.png
Increased Lead Conversion

Analytics from the revamped design demonstrate a notable improvement in lead conversion rates compared to typical performance. The streamlined user experience and improved navigation lead more users through the build funnel, resulting in higher engagement and increased conversions.

Tor Funnel 1.png
3 Device Mashup.png
Floating Ipad.png

other works

bottom of page