Design System
The application framework was built on Material Design + React. I created the design system to utilize Material Components that were then customized to align with the company’s branding guidelines. Wireframes, mockups and prototypes were completed with Adobe XD.
Custom components that were specific to application needs were also created:
- Company Selector (Sold-to Picker)
- Expand/Collapse Order Row
- Expand/Collapse Order Card
- Product Cards
Research
Design thinking exercises like empathy mapping, how might we and card sorting were used to evaluate user needs and discover new opportunities. I conducted over 100 user interviews and (aggregated, consolidated and extracted) dialogue to create empathy maps and provide useful solutions for how might we exercises.
Because each product has a specific makeup and is utilized in specific applications, I needed to ensure that all of the relevant data was displayed and easy to access. Each business unit underwent card sorting exercises to determine which product related data would be displayed and what needed to be updated and/or removed.
I also assisted BAs with data mapping exercises that would ensure any old references to the data were updated in the new system. This gave BUs an opportunity to clean house and get rid of any outdated data that was no longer used.
Analysis
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.
Design
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.
Testing
After updating the vague and uninformative headers it allowed the workflow to become aligned with the action performed on the page. This also helped to alleviate the user’s confusion and added to their awareness of their location in the actiavation process.
The workflow was then tested via UsabilityHub.com with unmoderated testing. The tests proved the abandoment issues were resolved and there was no confusion in the activation process. Successful activations were increased by 90%.
