Based on the feedback recieved from User Experience Center of Excelence, the latest navigation stack of Testlio platform lacked in multiple areas of user experience and didn't cater to the current goals of users. In this case study I will present solutions to the problems and findings uncovered to my team. Note: This project is currently at stage of final user testing.
Initial Consultation and Survey: Started with a Lean Canvas activity to understand the client's idea and vision. Surveys were conducted to collect both quantitative and qualitative data on user pain points.
Market Analysis: Evaluated competitors based on multiple criteria such as usability, aesthetics, and course experience.
Addressing Pain Points: Used "How Might We" questions to address user challenges, focusing on long-term learning, course value, and community building.
User Personas: Developed user personas, with a focus on those facing language barriers and motivation challenges.
User Journey Mapping: Mapped out user journeys to empathize with users and their experiences on the platform.
User Stories and Prioritization: Created user stories addressing pain points, then grouped and prioritized them for MVP development.
Design Flows and Information Architecture: Developed user flows for key scenarios, and constructed the information architecture for the platform.
Testing: Conducted testing sessions with low-fidelity prototypes, gathering feedback on various platform features.
Design System: Adopted the Atomic Design methodology to create a consistent and flexible design system.
Final Decisions: Opted for original photos over stock images and illustrations based on user feedback.
MVP and Beyond: Although the initial focus was on the MVP, plans were made for future releases, integrating more features based on user feedback.
There are multiple core problems that were peresented to Product Design team from UX Research team:
Current visual UI architecture is not logical. Current implementation doesn’t follow a visually logical sequence in terms of data hierarchy.
Lack of screen real estate. Most of the work done on our platform is content heavy. It requires working with big chunks of text and data. Actions such as text editing, managing, dragging and dropping. In most cases users would like to concentrate on one task and have as much possible screen estate to execute it.
Number of clicks and access to main actions. Since our platform consists of multiple modules and for different modules we have different CTAs, if you are deep into one module it takes a lot of clicks and loading time to get to the necessary module to create a module unit there. Getting around the platform is time consuming.
Breakdown of navigation and sub navigation. Currently we are having a problem of poor visual breakdown in our main navigation. Separation of sub navigation items such as segments, features and labels is also generating confusion.
Main navigation. This includes a way to go to the Home page / Dashboard, Tests, Runs, Issues, Reports, Teams.
Sub navigation. Includes: subpages, segments, features, labels, etc.
Workspace selector. Workspace dropdown list with available workspaces and settings.
Search. Global search available across the platform.
Notification centre. Notification dropdown area available across the platform.
User related functions. Avatar, token management, user settings, help, logout.
Minimum screen size of 1012 px. Should work on a minimum size of 1012 px width. Support for smaller screens can be added in future iterations.
Speed interaction. Animations, loadings and transitions should be minimised in favour of speed of main actions.
Scalable. Can be reused in other Testlio related platforms and applications.
Segment, feature and label management. Editing, adding those features to favourites and similar interactions are out of scope for this task.
Page content redesign. Page contents and modules will stay intact for the exception of the area that hosts top bar with actions and titles for some module items will now become part of the page content, since top bar will be reserved by main navigation.
Anyone who interacts with Testlio App can be considered a stakeholder for a wide initiative like this. For sake of clarity we would consider internal and external Coordinators as main stakeholders since they interact with the platform the most. Here you can see main personas for Coordinator users
Navigation is compact, flexible in visibility, offers quick access to main actions and introduces a clearer separation between different nested items.
First goal was to clearly structure out different levels of control over the page and order them in a way that it makes sense visually over the navigation. Hierarchy order goes from left to right and top to bottom. Top left corner defines engagement/workspace which affects rendering of the whole navigation stack. Interactions:
Left navigation can extend or collapse. With user control the navigation can be hidden or visible to give more horizontal screen area.
Workspace picker, profile dropdown and search can be triggered from anywhere on the platform.
At the same time to tackle the other problem one of the goals was to make the horizontal area collapsible to gain as much horizontal screen estate as possible. Dining that however means that key actions from that menu have to be easily accessible.
Since Testlio allows multi layered workspace nesting such as, Engagement / Workspace, workspace picker needed to visualise that hierarchy and be fast enough for coordinators to switch between workspaces and engagements.
Main navigation options are left aligned and represented on the top of the screen. In this example there are 6 menu destinations (hoping to deprecate Plans). Making it limited in horizontal scalability was a purposeful design choice. We should be really careful with the amount of the items that are included here. Clicking on the Testlio icon is going to take the user to the Home / Dashboard of the current Workspace / Engagement.
Global search is not planned for the first iteration but can be introduced as a control centre later. Similar interactions to spotlight where you can not only find items but also trigger actions. Even though it wasn't part of current iteration my designer excitment pushed me to fantasize during a coffee break how this can look.
Notification centre, profile, token management (Account management), help and logout from the sessions are all part of this user centred corner.
Sub navigation includes module level main actions, sub nav menu items, segments, features and labels.
Main action of the module should be visible from here. The actions that used to live in the right top corner of any module can now be moved here. Same actions that are triggered on hover on the top bar, meaning: New Test, Import Test, New Run, New Issue, etc. In case of tests a split button is used to highlight the main action of Create Test but also leaving the Import Test option.
New sub navigation supports advanced collapse and hover interaction to maximise the work area.
While hovering the sub navbar the collapse floating button appears. Clicking on that button hides the side navbar. Also can be triggered by the “[“ keyboard shortcut.
While hovering the navbar that is peaking from the left side it triggers the navbar to show in an overlay state temporarily covering the main UI. The moment the user leaves the sub-navigation area the mouse navbar hides automatically.
Clicking back on the floating chevron button expands the navbar back to the view. Also can be triggered by the “[“ keyboard shortcut.
Feature development was split into 2 main milestones.
Milestone 1:
• Main nav-bar redesign
• Updated Home interaction with new Testlio logo
• Workspace picker button
• Main menu destinations with new icons
• Notifications buttonUser profile avatar
• All the actions from the tile bar should be moved below to page content to make space for main-navigation.
• Workspace / Engagement picker popup
• Workspace / Engagement name and icon
• Workspace / Engagement settings button
• Workspace / Engagement search
• Workspace / Engagement list with name and icons
• Sub navigation redesign
• Show, hide and overlay interaction triggered with a click and shortcut
• Module title
• Module level main call to action
• Font weight fixes and alignments
• One list can be expanded at a time - segments, features, labels
Milestone 2:
• Changes depending on learning from Milestone 1 iteration
• Profile drop down
• Notification centre -> can be a separate epic
• Global search -> can be a separate epic
• Advanced shortcuts
I parted ways with Testlio during the final user testings of this feature. That being said, future plans for this development was to user test it apply final fixes and proceed with development.
