Undisclosed Company

  • INDUSTRY
    Oil & Gas
  • PROJECT
    Website Application
  • TOOLS
    Adobe XD, Photoshop, Illustrator, UsabilityHub.com, Bloomreach
  • Team

    Project Manager, Project Owner, Scrum Master, Change Management, Business Analysts, Architecture, Designers, Developers, Quality Assurance

  • role
    UX/UI Design Lead

The Project

Our team was designated to build an application that enabled a 360° view of the customer for internal users. External users are able to enroll as new customers, place orders, access order related documents and manage users.

The Problem

  • PROBLEM SUMMARY
    • The copy within the activation workflow lacked clear direction and resulted in new users abandoning the activation process.
    • Incomplete activation caused users to email or place multiple calls to the sales and customer service teams for log in assistance.
  • VALUE

    The activation workflow is the user's first encounter with the application. Providing an efficient activation process is crucial to building the user's trust and loyalty to the application. A seamless activation process grants internal users more time to focus on delivering value in other areas.

The Process

Design

The application framework was built on Material Design + React. The design system utilizes Material Components that were customized to align with the company's branding guidelines. Wireframes, mockups and prototypes were completed with Adobe XD.

Research & Workflow

I partnered with the Sales and Change Management Teams to interview internal users about the email and phone assistance provided by users having issues. The interviews revealed that the instructions were misleading. I also researched the users in action by using LogRocket to analyze user sessions. The sessions showed the majority of drop-offs occurring on one particular step in the workflow. This caused me to take a deeper look at the copy used to instruct the users during each step of the process.

The Solution

activation
mockups

The first release contained headers that were vague and uninformative. The copy instructed the user to log in, but didn't clearly indicate that the activation process would be incomplete without performing this step.

First, it was crucial to clean up the copy so that the header of each step in the workflow was aligned with the action performed on the page. To alleviate the user's confusion, I edited the body copy to clearly define the action taken and the user's stage in the activation process.

prototype

In addition to the copy edits, I adjusted the workflow order. In its initial iteration, the password was created in the first step and then the user was instructed to log in to complete additional steps, but this message wasn’t a focal point and could easily be missed. This gave users a false impression that their activation was complete and they could log in at their convenience. After reordering the flow, the password was created in the last step. Once the password was created, the activation was complete and the user could elect to log in. Following these modifications, the new flow and copy provided much-needed clarity and activation workflow completions increased by 90%.

    Let's chat.

    © 2007-2021 JxnGraphix