From Whiplash to RyderShip | Item Details

Problem

One of the most trafficked flows needs the code base to be upgraded before everything starts breaking. We need to carefully consider the plethora of personas who interact with these elements daily.

 

A screenshot of current state for this flow. The top shows tabview layout. Global information is on the top right of the page and displays the main details of an item which a user would need to always have access to. The left shows a long scrollable page with form fields with awkward alignment and confusing hyperlinks.

 
 

Personas in Consideration

An image of the persona types who interact with this feature upgrade. The customer, admin internal users, warehouse workers, and dev ops - basically anyone who uses this application will need to be taken into consideration. There are so many different intentions that we decided a deep dive into interviews will be crucial to understanding if we are building the right solution.

 
 

Interviewing Time

Above is an example of just one of the pieces to this flow and my documentation for each user role type. You can visually see how I color-coded the user types and documented the most pertinent of the feedback they shared.

Takeaways

  • Users are more likely to work on a tablet than desktop or mobile.

  • There are a lot of things which were added in years past which are rarely or not used at all.

  • The majority have ideas on future features which can help make this flow more user-friendly.

  • Some things which were designed with one purpose were used in other confusing solutions as a workaround for what they really need to happen.

  • There were unknown and unlogged bugs

 
 
 

Initial Assumptions

  • We would be able to rename the navigation with non-industry terms because it would make sense to be grouped the way we think they should be grouped.

  • We can eliminate things we heard from our users that are never used anymore.

  • We can re-group all the information in a way that makes sense to us.

  • Some groupings we fully understand and can replicate them as is - requiring less dev time in the build.

  • We utilize error-handling for most form fields.

  • Some information is not very important and we can push them further down the page for better hierarchy.

 
 
 

User Testing Time

What type of testing did I conduct and which user groups participated?

Can anyone say, “Card Sort?” - YUP! Here we go!

Above is the EXTENSIVE card sort I conducted with strangers on UserTesting.com as well as in-house dev-ops and actual customers.

Wanna guess the outcome? Hint: not what we expected it to be …

 
 
 

Results from Initial User Testing

  • The majority of the testers agreed that renaming the navigation with non-industry terms was confusing and hard to identify.

  • Some labels needed to be better explained (so we added some additional info icons to help where necessary and for other instances we added copy straight under the title or added a hyperlink to a help article based on actual usage data from DataDog).

  • The majority of the users wanted to create their own category in the card sort. After examining the new categories they added - we were able to deduce an appropriately matched new category). We tested several rounds to make sure we were grouping them in the most user-friendly categories.

  • Most users grouped things together which we assumed did not belong together.

 
 
 

Special Considerations

  • For every user type role, there is a different set of information that they are able to view.

  • Scope does not allow for many net new features.

  • We will not be able to optimize for mobile.

 
 

Solution

An image of the landing screen comp for item details. It shows updated layout design with a left side navigation.

Things we changed:

  • New left side navigation.

  • Card layout grouped by the results of our user testing.

  • Global elements are now at the top of the screen.

  • We added “quick copy” icons to the global navigation for the items most users need to copy the majority of the time.

  • I made sure the character count for each line does not exceed 70 characters for easy reading.

  • Alignment was updated for easier reading.

  • No more “Hidden Menu”

 
 
 

Where do we go from here?

A WHOLE list of future feature requests were documented. We were lucky to be able to incorporate some of these asks - but, the rest were added to our backlog for future iterations.

Reach out for all your complicated work flows!