WE ARE CREATING DASHBOARD TOOLING SOLUTIONS FOR NEXT GEN ENTERPRISE ECOMMERCE
OVERVIEW
OVERVIEW
Company name: Mi9 Retail
Duration of current R&D project: 21 months, 2018 - 2019
Services: Product design, UX research, agile development, automation testing.
The company: Mi9 Retail is an enterprise ecommerce software provider for large retailers, wholesalers, and brands. Based in Miami, Florida, Mi9 Retail also has offices in North America, Europe, and Asia with 443 employees across 17 office locations. Mi9 Retail acquired MWG, both Dublin (where I work), and 3 US offices, in November 2018.
The product: We are building an enterprise ecommerce solution for large ecommerce retailers. This comprises a handheld Picking application, a customisable ecommerce Storefront site and a back end Admin Panel application that manages end to end ecommerce services for retailers. These 3 services together are grouped under the product name of Commerce 8.
ROLES
My role: Lead R&D product designer for our ecommerce admin panel tooling solution.
Other designers working on this product: 3 other product designers from Mi9 Retail.
Size of the overall R&D team working on this product: 1 product manager, 5 product owners, 4 designers, 42 developers, 8 testers, and 2 technical writers.
PRIMARY USER GOAL
“A clean and logical layout providing me with strategic information and feedback which helps me to make informed and confident decisions”.
KEY DESIGN OBJECTIVE
Create a simple to use, beautiful and informative tooling dashboard built upon a foundation of industry research and best-practice design standards.
OTHER KEY PRODUCT OBJECTIVES
Technical: Using a microservice focused approach, use the agile development process to build a best in class, cloud based enterprise ecommerce application.
Business: Use this product to go head to head for market share with industry leading international ecommerce service providers.
PRODUCT RESEARCH
"eCommerce is one of the most profitable industries in the modern age. It requires fewer staff members and has minimal overhead costs. This is why it comes as no surprise that this industry has enjoyed rapid growth in the past few years and it seems like it isn’t stopping any time soon."
Source: Financesonline.com
WHAT THE PRIMARY COMPETITORS DO WELL
Shopify
-
Make it simple for users to set up a store and begin trading straight way.
-
Have an easily navigable and intuitive UI which promotes user confidence.
-
Have a fun and modern style of branding which appeals to many user demographics.
-
Offer helpful on-boarding tutorials for new users.
-
Use a simplified one page approach to many feature areas, creating a simplified UX.
-
Give clear on screen help info per input field.
-
Offer a Shopify Premium service which gives users access to extra features.
-
Have a powerful search optimisation tool.
Magento
-
Is the best known worldwide ecommerce provider.
-
Has a powerful and large range of features.
-
Make it easy for retailers to set up a store and begin trading.
-
Uses clear labelling and explanations throughout modules, creating a good UX.
-
Offer an enterprise solution for larger retailers.
-
Offer multi-currency and multi-locale features.
-
Integrate with many third party services.
HOW THIS IMPACTED OUR APPROACH
We wanted to create an enterprise ecommerce solution with a front end experience that was as good as the open source and main B2C competitors. These B2C ecommerce providers put high emphasis on customer experience, ease of use, easy onboarding, accessibility and a modern and clean UI. Enterprise ecommerce solutions are not known for being customer friendly and we wanted to completely change that. We were starting with a blank slate from a front end perspective, so we could create something new using best practice methodology with no legacy considerations.
DESIGN SPRINTS & STAKEHOLDER INPUT
After we conducted competitor research I then facilitated design sprints with members of the product team on areas of our existing tooling product that we thought were key for MVP. We followed the 5 step design process of: 1. Exploring 2. Sketching 3. Deciding 4. Prototyping 5. Testing.
These design sprints gave us great confidence as a product team when we went to stakeholders to get input and buy-in.
CUSTOMER RESEARCH
We then went on site with some of our existing customers to watch them using our product. We asked them the following questions:
1. What works well? 2. What are the pain points? 3. Do you have any ideas for improvement? Below are some of the comments we received.
"I've used a good few ecommerce platforms before. Most of them were really not user friendly."
Customer: Online ecommerce manager
"I don't know why xxxxx is so difficult to use. It costs big and then we need someone to come in and teach us how to use it."
Customer: Regional manager
"I used Squarespace to create my own website. That was fine to use. And it looked well, I don't see why we can't use something like that."
Customer: Content creator
"I just always feel so lost when I'm navigating xxxxx. I mean I can, but I'm never sure what's going to happen!".
Customer: Content manager
KEY USER DEMOGRAPHICS BASED ON CUSTOMER SURVEYS
User 1: 25-34. Content editor or ecommerce assistant.
Works daily within one or two modules of an ecommerce admin panel. Has basic user access rights.
User 2: 35-44. Ecommerce manager.
Works daily within many ecommerce admin panel modules. Is comfortable using the application. Has administrator rights.
User 3: 45-54. Regional manager.
Has full administrator rights. Does not use the ecommerce admin panel on a daily basis. Is mostly concerned with accessing reporting on an irregular basis.
HOW THIS IMPACTED OUR APPROACH
From talking to retailer users it was apparent to us that people wanted the enterprise applications they used at work to be as easy to use and to navigate as the ones they used as private consumers. We are all now so used to high quality interfaces and interactions in our daily products that bad experiences and legacy design systems will find it increasingly harder to gain market share. We were determined to look to the best practices in not only ecommerce applications, but apps in general to make sure that the design decisions we made were to the best practice standards possible.
STORY BOARDING
-
Using the customer feedback and the outcomes of the internal design sprints us product designers began storyboarding key screens.
-
We focused only on primary features and interactions.
-
We worked closely with the product owners, and we then refined the storyboards with the rest of the agile teams.
-
We were able to use storyboards to identify any areas of technical concern that needed more effort than estimated
-
We then walked our stakeholders through our proposed key interactions.
This shows how we plan to add and delete fulfilment locations for stores.
THE BIG PICTURE
I developed a design system style guide for our sitemaps so that they would all look uniform. This helped streamline presentations when telling our product story internally in the business and also to clients. We also find sitemaps super useful for developers to define end points within a product flow.
This shows user journeys in the content editor.
TIME TO WIRE
We then began wireframing detailed screens. These would be used by our development team and product owners for sprint planning and story pointing. They would also be used to review our proposed approach in detail with stakeholders without the distraction of a full UI.
4 step wireframe flow showing how we would alter a timezone.
BRANDING THE PRODUCT
-
We considered our branding palette very carefully and went through many iterations to get to the final version.
-
We firstly looked at all our main would-be competitors to compare their branding and see if there were any recurring similarities.
-
We found a common theme running through most of our competitors - all used some form of purple, blue, grey with brighter colours accents for key notifications.
-
We did some further research, finding that people's perception of a blue/grey theme was of stability, technology and ease of use.
-
We didn't want to play it too safe though so we used an electric blue for our primary palette colour. This would run through CTAs, heading fonts, links and icons.
Colour palettes and typography styles from our product style guide.
THE UI
We next began applying our branding to key areas. Universal elements such as headers, data grids, and navigation would be the first features added by development to the component library, so these were the areas we focused on to begin with. As the project progressed we designed more detailed UI for module specific UI features. When possible we have tried to keep final designs six weeks ahead of development. We validated our approach by user tested cognitively and with end users using these design prototypes.
This shows our mvp dashboard, and flyout menu structure.
This shows our most common layout throughout all modules - horizontal section tabbing and a summary panel.
This shows a weekly slot management calendar.
This shows the content editing screen from our Content Management module.
WORKING WITH DEV
Us designers have worked closely with the agile development teams throughout the 19 month life cycle of the project. We work most closely with the front end developers and product owners, and we also take part in the bi weekly sprint refinement sessions and quarterly planning meetings. This close relationship with other team members has given us a great understanding of technical limitations and business priorities. And it has also given non design team members an insight into our design priorities and areas of focus for the product.
OUTCOMES
WAS IT SUCCESSFUL?
Over the life cycle of the product we have gained great interest from the ecommerce industry in our new offering. The product started out being built by MWG Dublin, and during the project we gained the attention of the large ecommerce provider - Mi9 Retail. They acquired MWG primarily because of this R&D product we are developing.
We have a sizeable number of interested retailers in the sales pipeline. And currently 3 international retailers have signed contracts to use the product, which is currently at MVP stage.
WHAT WE LEARNED
Fail quickly, fail fast.
Communicate constantly.
You don't need to be a designer to have great ideas on how to make a user experience better.
Never work in a silo.
Never allow conflicts or differences to fester.
Listen to everyone's opinion, but don't let it become a design by committee.