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 that was tested provided a richer experience, it was not necessarily what customers expected or wanted from the brand. Being a niche market, customers directly compared the online brand experience to the brick and mortar store and perceived 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 don’t provide a rich experience when and where you can.  What it means is that user experience must add or create real value for the customer without affecting the brand adversely.

My take on this, customers don’t think in terms of channels, they think brand. Customers interact with brands and the various channels are only a means to do so. Even though there may be multiple touch points, across multiple/different channels, customers see it as interacting with the one brand.

 

 

Design for your customers, not for trends

About a month ago I launched a website for a popular Australian discount variety retailer. 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 get some understanding behind the design decisions.

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.

Customers saw the new designs as too modern, too trendy and out of sync with the brand they knew so well.  Without giving out too much details due to obvious reasons,  majority of customers were unique and shopped differently to those who shopped with other bigger retailers. These 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.

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

Customers associated the change with higher cost  even though there was none.

Design for a consistent brand experience

Based on customer feedback, the website had to reflect the same simplicity of the stores and provide 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. 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.

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 progress.

 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 do they need and what adds value. And then design for your customers and not for trends.

Passwords – Usability and tips to remember them

Sometimes you come across articles that make you go “Huh! Wish someone told me that earlier” . Here are two that will help you create highly secure, usable and easy to remember passwords.

Hope these help you to create usable, secure and easy to remember passwords ;-)

Audience Based Optimisation – The better way to SEO

You may have already heard or read on numerous blogs and online portals the various methods to increase ranking on search results. Most of these articles, if not all, focus on SEO and optimising pages or content for search engine spiders. While some of these do a good job on touching various aspects of SEO, they fail to address a key element – the User.

While optimising for these Search Engine Spiders or Web Crawlers or Google bots makes sense in the marketing world, the real ROI is driven by your users – your target audience. Here is what I call, Audience Based Optimisation (ABO), comes in.
Continue reading

Installing lower version of Flash player

Finally succeeded in downgrading flash player from version 10 to flash player version 9. I had reached a point where I was pulling my hair out and then I found this gem on Adobe’s website – Technote kb402435 .

I tried the following steps to install a lower version of the flash player

  1. Uninstall all flash player versions using the flash player uninstaller
  2. Rebooted the computer
  3. Disabled access to the internet/network
  4. re-installed an older version of the flash player
  5. Rebooted the computer again

All browsers, except for Internet Explorer 7 (IE 7), accepted the flash player. IE7 as usual gave me a hard time. This was primarily because of the ActiveX used by IE.

To resolve this, all I had to do was type the following in the command line

uninstall_flash_player.exe /clean

A detailed explaination can be found at Adobe’s website – Technote kb402435 – Safe versions security restrictions when installing Flash Player (Internet Explorer on Windows).

Additional resource that may help

Technote 14157
How to uninstall the Adobe Flash Player plug-in and ActiveX control

Technote 19166
Troubleshoot Adobe Flash Player installation for Windows

SixthSense – integrating information with the real world

‘SixthSense’ is a wearable gestural interface that augments the physical world around us with digital information and lets us use natural hand gestures to interact with that information.

Quote from wired.com

Students at the MIT Media Lab have developed a wearable computing system that turns any surface into an interactive display screen. The wearer can summon virtual gadgets and internet data at will, then dispel them like smoke when they’re done.

Watch video of  student Pranav Mistry who is described as the brains behind the project. Mistry wears the device on a lanyard around his neck, with coloured Magic Marker caps on four fingers (red, blue, green and yellow) which helps the camera distinguish the four fingers and recognise his hand gestures with software that he created.

More at the SixthSense website.

iPhone 3G – Send a text message to multiple people

In my earlier post I mentioned that it is not possible to send multiple text messages from an iPhone 3G. I stand corrected. Sending SMS/Text messages to multiple contacts is possible on the iPhone. The user interface is not intuitive, leaving users perplexed when trying to send SMS/Text messages to multiple contacts.

Here is how you can send SMS/ Text message to multiple contacts/people:
Continue reading