Productmothercare Digital Store Solution
Year2017/2018
My RoleUI/UX Designer
Overview

WES platform provides Mothercare stores the ability to provide additional services to customers who walk into Mothercare stores. It provides the capabilities for store associates to enable customers order products not available in store. The current DSS platform is an in-store solution that extends the omni-channel capabilities of the Demandware platform into the physical store. This allows retailers to quickly digitize the store by combining omni-channel platform capabilities with purpose-built store functionality such as buy in-store/ship to home, guided selling, bar code scanning and secure credit card transactions. By infusing digital intelligence into the physical store environment, retailers can personalize service, increase store sales and optimize inventory carrying costs.

Benefits of DSS

  • Increase In-Store Revenue — Customers can shop the entire product inventory from within the store, regardless of whether products are in the retailer’s or the manufacturer’s warehouse. By easily accessing inventory not carried in the store, store associates can prevent walked sales and increase in-store revenue, while decreasing inefficiencies in stock holding, allocation and shipping.
  • Deliver Personalized Shopping Experiences —Store associates can provide consumers with a personalized shopping experience through clientele and guided selling features, such as the ability to easily and quickly look up a customer’s profile and view their purchasing behaviour and past purchases. The tablet application’s easy-to-use interface minimizes the need for training and increases efficiencies on the sales floor, while also arming the associate with data that allows cross-sell and up-sell opportunities, price matching and discounting options.
  • Minimize Complexity and Cost – With a central commerce platform running web, mobile and store experiences, retailers can quickly digitize the store, without spending additional time developing, merchandising, promoting and operating experiences.
  • Capture Secure Payments –Credit card information swiped or manually entered is encrypted and secure. Retailers can control the functionality that resides on retailer-owned and managed tablet devices, in accordance with their store and IT policies.

Discover

Identyfing the project requirements, business goals, understanding the users

Discover phase was about identifying project’s requirements, business goals, objectives. Discover phase was also about observing, engaging, listening to the users and understanding their motivations, emotions and their needs involved.

Kick-off meeting

Peoples involved into project have been invited

  • discussed what are the major pain-points of the current DSS platform
  • Project goals and expectations
  • What are we trying to achieve?
  • Technical limitations
  • Assigned roles to the project
  • What’s our deadline?

DSS - Project Brief

Market research - competitive analysis

I’ve started with market research. I’ve looked on the competitors websites and apps in order to get deeper understanding what they are doing well, what they offering to their customers and what kind of features they are using. Competitive analysis allowed me to compare our existing and outdated MC DSS app with competitors products, so in that way we could learn from them what our product is missing, what kind of features and functionality we need to implement in order to match user expectations and be up-to-date on the market.

Key competitors

General research notes

  • Personalization and Customer Engagement
  • AI, Assistants, and Chatbots
  • Providing personalised content to the customers
  • Interactive Product Visualization (360 degree view)
  • Micro-iteractions are now used a lot more
  • Advanced Social proof features (The number of people viewing this product, Number viewing that product right now, Average review scores...)
  • Cross-selling feature

Analyzing and comparing competitors key features - Competitor analysis matrix 

Reviewing the existing DSS platform

  • UI elements look outdated
  • Lack use of white space
  • lack use of Typography
  • limited personalised features
  • Some of UI elements are not consistent
  • No interactons
  • CTA doesn’t stand out enough
  • Colours do not match the current MC branding

After performing a competitive analysis, we have got a much better idea and understanding of what our competitors are doing right and we have identified particular areas that could be improved in our new product.

Define (the Problem)

Defining the problem statement in human centred way

The goal of this stage was to define the problem statement in the user centered way.

In order to define problem and get better understanding about the user I’ve used following ux methods:

Personas

To quickly access the data I've gathered from research phase - I've created a persona and problem statement. Personas make it easier for designers to create empathy with users throughout the design process.

The key audiences are expectacing parents and parents with different motivations.

User stories

User stories are great design tools, because they help to focus on the users and their needs rather than focusing on the technical aspects of the project.

  • As a user I want to find advice
  • A a user I want to ask for a advice
  • A a user I want to compare products
  • As a user I want to read customers reviewes
  • As a user I want to browse in-store exclusive products
  • As a user I want to browse products that match my budget

Define a Point Of View (actionable problem statement)

We have defined a problem statement using a point of view design tool.

We have taken all of the data and information regarding the user, applied it into the POV template and then generated the following problem statement

Expectant mom who lives in London is looking for shopping advices, because as the first-time mum doesn’t have much experience and doesn’t know what exactly it’s needed for her first child.

Once we have defined problem statement in a POV we started opening up for ideas to solve our design challenge.

IDEATION

generate as many potential solutions as possible

We have put together all of the informations gathered from the previous stages, so we were ready to move and start finding the solutions to solve the defined problem. In order to generate as many ideas as possible we have used following ux methods:

Brainstorm sessions

We have conducted few internal brainstorm sessions with our UX team in order to discuss the problems and generate as many ideas as possible

Together with the team we have generated a large quantity of ideas a then filtered and cut down into the best, most practical or most innovative ones.

We have discussed what of features we might implement to our product and funcionality in order to match the user expectations.

Key Ideas, outcomes

  • Implementing new "advice & blog" section to our product
  • Delivers a better brand experience to shoppers through omnichannel consistency of promotions, order history, pricing and more.
  • Introducing new product comparison feature
  • Improving the product recommendations feature
  • Optimize checkout process by reducing the number of steps
  • Make app more interactive (introducing new micro-interactions that will enhance the overall UX)
  • Present products in the best possible way and provide useful information for customers
  • Design clean and distraction-free layout
  • Improve existing shoppung features

Userflow

A visual representation of the user’s actions to complete tasks within the product

Before starting any design work or sketching, I spent a great deal of time making sense of user flows and existing content. Structuring my content into a user flow I was able to show how user would get from homepage to the end goal - order confirmation page

Checkout flow

Prototyping

experimentation and turning ideas into tangible products.

Insights gathered from previous stages allowed me to move on and I was able to start producing first visual concepts. At this stage I really started thinking about the page structure, components and all of the user inetraction are required to achieve the goals defined in the previous stages. I've started with sketching first layouts and playing around with different ideas and design approaches. Having multiple sketches of competing designs allowed me to compare and contrast them.

Creating wireframes

Once I got a better understanding of what I wanted to do and the issues I should tackle, I took some time to sketch layouts and try different design approaches. I like to draw low fidelity layouts as they help me determine very quickly what works and what doesn’t. I can iterate easily. It also allows me to see the different versions I’ve worked on and in what direction I’m going.

I created wireframes using Sketch application. This was a quick and effective way to organise the content and screen layout. I experimented with different layouts and adhered to UX best practices and common UI patterns.

Creating colorful mockups

1. Homepage

2. PLP

3. PDP

4. Basket

Interactive Prototype

Once I've got mockups signed off I've put them into Invision to create a high fidelity interactive prototype. Protypes help me to explain the user journey, interactions, transitions between pages and the logic behind user interface.

Testing

Testing and validating the product before final developing it

Usability sessions - UX lab

In order to validate our concepts we have conducted the usability sessions in our in-house UX lab and then based on the users feedback we have made adjustements/improvements to the current prototypes and then tested it over and over again until we were satisfied with the result and feedback gathered from the testing sessions.

I've received feedback on my prototypes and based on it I've made changes and created new prototypes and then we tested them again. Those 3 steps: Ideation, prototyping and testing are very often placed into loop and repeated iteratively until we find out the solution to the problem.

Product develop

Delivering projects source files to the developers

Project documentation

Delivering projects source files to the developers. Creating documentation in order to explain funcionality in detail.

Summary

Design thinking - Iterative Process

The five stages are not always sequential — they do not have to follow any specific order and they can often occur in parallel and be repeated iteratively. As such, the stages should be understood as different modes that contribute to a project, rather than sequential steps.

Invision Prototype
Open Prototype