- ROLE
UX Lead & UX Designer
- FOR
All commercial and federal users.
- DATE
February 2021
Mayhem by ForAllSecure is the product that I’m currently redesigning.
Below is the user interface onboarding feature.
All base designs were created with Illustrator, Sketch, or Figma. All user research is done by me using standardized qualitative/quantitative methodologies.
The team consists of two UI engineers (for implementation) and myself.
BACKGROUND
Before 2021, an official onboarding feature didn’t exist and the organization relied on letting the users read through our documentation in order to understand the product. Along with the documentation, we had our support team on standby to help them out.
As a solution, I made this onboarding feature to try to ease the pain of having to be redirected repeatedly or have a new window open for the documentation.
I fell back onto the personas research and quickly realized that there are two general archetypes with our personas. The consumer (an example would be a manager) and the tester (an example would be a developer).
Therefore, I decided to split the onboarding into two paths and the user would be able to choose which path they wanted to learn about.
General design process is, briefly, as follows:
- Stakeholder interviews
- Background research/competitive analysis
- Modeling, mapping, flows
- Wireframes and/or prototypes
- Validation
- Improve design
- Repeat steps 4-6 as many times as we need in order to get clean, consistent data
- Repeat if necessary
- Hand-off and deployment
- Follow-up and maintenance
WIREFRAMES
Below you’ll find extremely rough wireframes that I put together after hand sketching on a virtual whiteboard with my team. Following this, I started working live in Figma and creating vector images in Sketch with the team before coming up with the designs above.
Wireframes (after hand sketching) for the “tester” path.
Wireframes (after hand sketching) for the "consumer" path.
SOLUTION
The two videos below are the “final” designs before we carry out maintenance testing.
I used Figma and Principle for design and animation before handing it off to the UI developers.
Video of tester persona onboarding process.
Video of consumer persona onboarding process.
TAKEAWAY
Maintenance testing is needed every quarter.
As a team, we should have finalized the true onboarding process with a tutorial before creating this feature because now there needs to be updates to this design with the new onboarding information.
We tested the onboarding with 5 users – a mix of commercial and non-commercial – and 4 out of 5 users were delighted by the imagery and understood the content.