Ordermentum

Identifying customer pain points

The goals defined from the customer pain points include:

• Allow the user to quickly edit key product details, such as visibility and pricing groups, potentially without having to go into the product detail page
• Find a way to surface product variant information and allow the user to edit those variants
• Improve the mobile experience to allow all product editing functionalities to be available for mobile screens also
• Uplift the UI to reflect the brand and make product editing easy and enjoyable for the users, setting a benchmark for all table driven sections of the app going forward.

Research and concepting

Some comparative market research was conducted to look into table and data design in similar industry and also some best practises used by popular table oriented product. We looked at detail issues such as how variants are addressed, what are the common height and size of the table rows and cells, drop-downs, how should the table behave, and filter elements for tables etc.

Sometimes there is nothing better than sketching up some ideas to get some concepts going. For complex table designs the sketching really help bring it to life.

Design and documentation

Leveraging existing brand palette, we chose a set of palette with a managable number of shades and tints for the primary, neutral and semantic colours to craft the table UI. Each table element is meticulously defined to allow full flexibility when it comes to viewing, selecting, editing and saving the changes made to the different data fields, across different view ports. Other than a more modern and friendly UI style, new features of the table include:

• Splitting Product and Categories
• New Filters for product searching
• Fast inline editing
• Make changes on the go (mobile responsive)

We’ve all had to battle the hand off process when it comes to design. One can never over prepare with the design system and tech spec’ing so that the developer knows how the design behaves. Much care was taken to ensure all states of the newly designed table are documented and explained as to eliminate as much production related questions as possible up front.

Feedback and refinement

Early prototypes of the new table design were tested with some real users to get their impressions and feedback. These sessions were very helpful to see if the new design is addressing the main problems that the users were having with the old version and see where improvements can be made in design and build before final release.

Here are what some of the suppliers had to say about the new design:

“Huge step up from where it was before. It’s hard to fault at this point!” - Citrus WA

Accounts: “had a call with Coffee Service Packaging. They LOVE the new product page. Given they have so many SKU it just makes managing their product so much easier!”

Accounts: “I demo’d the new product filters yesterday to La Spiga, needless to say I got a joyful response, actual hands were raised in the air haha well done!”