Role: UX Design Lead working alongside junior UX/Visual Designers, UX interns, Business Analysts, Developers, and Product Owners.
The Human Problem:
The F5 sales processes are mostly manual and include working through email or paper documentation. For F5 customers there was no easy way to access and manage their subscription-based products, account information, and account users.
Strategy and Business Need:
The current F5 business model is based on hardware and software sales which are mostly held through F5 Partners channels and F5 Sales Representatives. With quickly evolving disruptive technologies, and focus on Security and Cloud solutions, F5 set a strategic goal to deploy a new Digital Commerce and Subscription-based business model.
The new Customer Account and Subscriptions Management Console, MyF5 Portal, was planned as a one-stop-shop for F5 customers to manage their Subscription-based products, account information, and users.
The Process is About the User:
Who are the users?
Personas: We had a set of F5 Personas to use across different portals and projects. For the MyF5 Portal, there were three Personas selected that match the projected portal’s users (customers with F5’s subscription-based products):
What users will do in the portal?
User Journey Maps: We ran User Journeys workshops starting with initial contact or discovery, and continuing through the process of engagement into long-term use.
Tools used: Smaply User Journey building tool.
Content structure: what makes the most sense for a user?
Information Architecture: Card sorting exercise was performed to define the information architecture of the portal, and navigation. Twenty-three participants who matched the defined User Personas provided their feedback in the supervised study. Results helped the team to understand how users think about the content and organize in a way that makes the most sense and suits users’ mental models.
Tools used: OptimalWorkshop card sorting tool.
Continuous improvement: Iterative Design and Prototype Testing
We started with whiteboarding, creating user flows, sketches, and low fidelity prototypes but shifted to high fidelity visual prototypes before doing usability studies. It was because accessing aesthetic appeal was one of the priorities and we wanted to capture this information during testing.
Tools used: Balsamiq; Gliffy diagram builder; inVision; Zeplin; Photoshop.
User flow diagrams
Low fidelity prototypes:
High fidelity wireframes:
Visual Design: Additionally, there was a new Style Guide developed for the portal’s interface. All elements of the design were created in accordance with F5’s Branding Guidelines. The Style Guide aimed to improve our documentation, consistency of design, and help with future interface development and maintenance.
Design Validation (Usability studies): Over the course of two years, we built the user testers base and standardized the process of testing. Currently, we test prototypes for every new feature of the portal, evaluating results, and making recommendations on changes. Findings and recommendations are presented to the Product Owner for review and prioritization. The Agile process allows the team to quickly implement recommended changes.
Tools used: inVision.
Was the Human Problem solved?
How did we know that the problem was solved?
1. The outcome of the project matched the definition of success: users now could view and manage their subscription-based products online;
2. Users’ feedback also helped to validate the successful outcome, as well as define and prioritize new features.
3. Successful deployment of the first project increment (PI) allowed continued development of PI2, 3, and 4 as steps to actualize the larger business vision.
What I learned during this project
Bringing UX into an Agile team environment means allotting time and budget for an iterative UX process including research and testing.
The User-centered Design process has the user in its core, but sometimes the system’s architecture and system restrictions dictate the experience, and the result does not always benefit the user.