User-centered Design Process in the Real World

Motorola MC40 in-store Android mobile app
Motorola MC40 in-store Android mobile app

Disclaimer: Due to the sensitive nature of this project I cannot divulge details on the design, functionality or deliverables. This article is purely to illustrate the user-centered process I followed. 

Of late I have been privy to presentations by a number of different agencies and consulting firms on a text book approach to designing a great Customer Experience. While it is great to know most, if not all, the process and methodologies in a user-centered approach, it may not be feasible to incorporate all of them.  Certainly not all the time, or for every project.

Most often, time, budget and nature of the project will determine what methods and process you incorporate.

In the Real World

Reality is, you may not get to do user research to the extent you like. That usability testing session in the lab you were thinking about…uh uh. The focus group session you planned…nope. The eye-tracking…absolutely not.

In the real world, you do the best with what you got.

Designing the In-store Android app

I was given the responsibility of designing the in-store  mobile app for a very well known Australian retailer.  This app would be deployed on 1200+ Motorola MC40 Mobile Computers, used by store staff in 325+ stores across Australia.

The MC40s  would replace an older device that was very different (both in terms of hardware and software) and hence the transition had to be seamless with no disruption to stores.

The one line brief given to me was “Make this better and faster to improve productivity in stores“.

State the Problem. Define Success

Early in my career, while working for an advertising agency, I learnt that “the ad is only as good as the brief“.  This meant taking the one-line brief and doing a deep dive to understand business expectation and the real problem I was trying to solve.

To start of with, I conducted stakeholder interviews with top management and the different layers in store operations. This helped to understand what the business perceived as key issues.

At this early stage, it was critical to set expectations with the business and clearly define what success meant and how it would be measured.

In the user’s shoes

The next step was to immerse myself in store-land and observe users . Initially the intent was to observe users going about their daily tasks. However, after a few days I requested management team to let me be more involved and perform some of the tasks myself.

While user observations provided some valuable insights,  getting involved in performing tasks provided first hand experience of what users were doing in stores. The challenge here was to sift through the various issues encountered by store staff and identify the problem areas that were the main source of all these issues.

User Journeys and Task Flows

Mapping the user journey: Initial sketch
Mapping the user journey: Initial sketch

 

Refined user journey map
Refined user journey map

The User Journey map illustrated the multiple touch points and the series of interactions that users had to perform. This step helped to chart the different ways users achieved their goal  as well as identify any gaps in the process.

Task flow for a specific activity within the app
Task flow for a specific activity within the app

The Task Flow helped to understand the steps users had to perform for a specific activity within the app. It highlighted issues  in the existing functionality and helped to prioritise functionality that was important and discard those that were redundant.

Wireframe. Test. Wireframe

Low fidelity wireframe
Low fidelity wireframe

By this stage I had enough information to create wireframes for the new app. Initial wireframes were sketches in my diary. I frequently conducted quick tests with colleagues who were not directly involved in this project and updated the wireframes based on the feedback I received.

Wireframes are throw away.  Designed and tested to find gaps in the flow. They are not meant to be pretty and wow audiences, but to get the functionality and information architecture  as best as possible.

 

Annotated wireframe in Axure
Annotated wireframe in Axure

After a couple of iterations the rough wireframes started to get well formed. At this stage, I moved on to Axure and involved Store Operations and the Java developers at regular intervals  for their feedback. Axure wireframes were annotated so that I could create a functional specification that the developers could use.

Note: I have used Axure in this project, however, I have also used Illustrator, Photoshop and PowerPoint to create wireframes. The tool should not matter as long as the design and purpose is well communicated.

Prototyping

In-store app prototype
In-store app prototype

More time was spent on prototyping and testing with a couple of pilot stores. Prototypes were based on the Axure wireframes and utilised HTML, CSS and basic JavaScript to mimic actual functionality. These were not  high fidelity mock-ups as they were meant to test functionality and task flows.

Prototypes were instrumented so that rather than asking users I could get real metrics on how the app was being used. (Thank you Google Analytics)

Similar to wireframes, prototypes were tested to get functionality right.  They were used to identify issues and provide answers to how the app could be improved.

Final Implementation

 Note: A new version is now being rolled out to stores using this process.

The first prototype was deployed to two stores. With each iteration, the prototype was refined and deployed to more number of stores. Prototypes went through a few iterative refinements before a suitable version was rolled out to all stores.

Even today, I am monitoring, measuring and refining the app. There is a constant feedback loop to ensure the app is performing as per user expectations. There is no end to Design.

This new app is faster and better in terms of UI design and functionality. A  number of issues faced by store staff were resolved including: faster page load, clean intuitive interface, less clicks and importantly consistent feedback provided to the users where relevant.  Resolving these issues ensured store staff spent less time in the back office and more time on the store floors servicing customer.

Customers don’t think channels, they think brand

In my previous post – Design for your-customers, not for trends,  I mentioned that while the website design we tested provided a richer experience, it was not necessarily what customers expected or wanted from the brand. Playing in a niche market, customers directly compared the online brand experience to the brick and mortar store. The perception was that the rich experience meant  increase in cost of products.

Customer feedback implied that there was a strong disconnect between the online website and brick-and-mortar stores.

Again, to be clear, this does not mean avoid providing a better experience.  What it means is that user experience must add or create real value for the customer without affecting the brand image adversely. Sometimes this can be challenging.

It is this brand that customers interact with and expect the same experience at every touch point. Whether it is researching products online, buying in store or calling customer service.

Customers don’t see these channels as segmented.  Hence, even though there may be multiple touch points, it is important to deliver a consistence experience that is in line with the brand value.

My take on this, customers don’t think in terms of channels, they think brand and the experience the brand provides at every interaction.

Design for your customers, not for trends

About a month ago I launched a website for a popular Australian Discount Variety retailer (ADV). Post launch, I received a number of direct feedback from peers in the UX and Design field.  The most common feedback was that the site was too “simple” and the visuals were not as trendy compared to other popular retailer websites.

A fair comment. However, here is some context to help understand the design decisions behind the website.

Know your brand, know your customers

Prior to the launch, a number of designs were tested with the business as well as customers. While the business were keen to look modern and in trend with the retail world, the same did not resonate with the customers.

Without giving out too much details due to the nature of this re-design project,  majority of ADV customers were unique and shopped differently to those who shopped at other bigger retailers. These ADV customers were also about a year or two behind the latest tech compared to customers who shopped elsewhere for similar items. So think iPhone 4s instead of iPhone 6.

Customers saw the new designs as too modern, too trendy and out of sync with the brand they knew so well. Surprisingly, customer perception was that the new rich experience was at the cost of increase in price of everyday products.

In terms of Social Media, not all channels resonated with customers. Some did very well while others not so much.  This was clearly reflected in the website analytics and social media logs.

Design for a consistent brand experience

Based on customer feedback, the website had to reflect the simplicity and brand image of the brick and mortar stores, providing a consistent brand experience across all channels. Sending conflicting messages online and offline was certainly not desirable.

However, this is not to say ignore the trends and stop innovating. Knowing what the trends are and their relevance to your product/service offerings helps to stay ahead of the competition and make the brand desirable. Push the boundaries and innovate at a comfortable, steady pace and take your customers along on the journey.

Consistency, for me, in this scenario, meant striking a balance between current customer perception and facilitating the change required to stay relevant.

Changing brand perception

One of the issues highlighted during the website refresh project was that customers see the brand differently and this may not necessarily be right or how the business wants customers to perceive the brand. While this in itself is a broader topic and not the focus of this post, it did highlight the need to consistently communicate the message across all channels and ensure that the brand stays relevant.

Going forward, I plan to take customers on this journey, slowly, but surely.  In the following months, the website will certainly evolve and align with the brand as the brand matures.

Will probably post an update on how the website and the brand transitions as we move along.

 Conclusion

In closing, don’t build just another app, another website, another xyz. Smartphones and tablets are loaded with too many apps already. Same goes for websites and desktop applications.

Start by knowing what your customers are really doing, what they need and what adds value. And then design for your customers and not for trends.