Case Study: UX Methodology & Design Process – XXL | UI UX Designer

Case Study: UX Methodology & Design Process

posted in: Post, UX | 0

This post is a summary of design methodology and design process that I’ve been exploring during the last two years. I’ll touch on subjects such as Research, Modeling, Design, and Testing with a case study of a cross platform instant messenger.

What Is User Experience?

The first time I learned about user experience can be dated back to 2009 when I took a user research course at Sun Yet-san University. The professor introduced us Donald Norman, who coined the term in the mid-1990s while he was the vice president of the Advanced Technology Group at Apple.

You can watch Don Norman explain the origin of the term “UX” and what he thinks about the way some people use it these days in the following 2 min video:

 

So what is user experience? The international standard on ergonomics of human system interaction defines user experience as,

A person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service. (ISO 9241-210:2010, subsection 2.15)

According to this definition, user experience is about how user think and feel of the product. Users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviours and even accomplishments that occur before influence their experience. In an interview in 2007, Norman discussed the widespread use of the term and its imprecise meaning as a consequence thereof.

I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose it’s meaning. – Don Norman

Why Norman said it’s starting to lose it’s meaning? As we know, nowadays there are more and more people who advocate for the use of the term “User Experience” as an umbrella under which many different disciplines collaborate to create products. Designers of all stripes hope to manage and influence the experiences people have, but the fact is, designers can only manipulate the whole process of an experience rather than design a specific experience.

A graphic designer creates posters by using an arrangement of color, fonts and images to help manipulate a visual information communication experience. A product designer works on furniture by using materials, construction and manufacturing techniques to help manipulate an experience. An interior designer uses space layout, lighting, color finishes, materials, and even sound to help manipulate the whole living experience.

What is Good User Experience?

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. – Don Norman

Good user experience has become an admirable and attractive goal for different industries. While Don Norman’s broad concept does not directly settle the core matter of the design for digital products: how specifically to design the experience of complex interactive systems. I think it’s useful to consider the similarities and synergies between creating a customer experience at a physical store and creating one with an interactive product.

Another course Interaction Design introduced Alan Cooper’s methods to us, which is more appropriate to designing for the world of bits and pixels. According to Alan Cooper’s About Face 3, I find it more useful to think that we influence people’s experiences by designing the mechanisms for interacting with a product.

From his point of view, one can think of user experience design of digital products as consisting of three overlapping concerns: form, behavior, and content. In the world of digital products, user interface design is focused on the form of products, but also must ensure that their form supports use, which requires attention to behaviour and content. Interaction design is more focused on the product behavior, but is also concerned with how that behavior relates to form and content. Similarly, information architecture is focused on the structure of content, but is also concerned with behaviors that provide access to content, and the way the content is presented to the user.

Form, behavior, and content corresponds to Norman’s three levels of cognitive processing: visceral, behavioral and reflective. Designing for the visceral level means designing what the senses initially perceive, before any deeper involvement with a product or artifact occurs. Designing for the behavioral level means designing product behaviors that complement a user’s own behaviors, implicit assumptions, and mental models. Of the three levels of design Norman contemplates, behavioral design is perhaps the most familiar to interaction designers and usability professionals.

What does UX Designer do?

So part marketer, part designer, part project manager; the UX role is complex, challenging and multi-faceted. As UX designers, we translate business and product requirements and also customer needs into clear description. We collaborate with other disciplines to oversee the iteration of the product to drive a consistent user experience from conception to launch. Ultimately our aim is to connect business goals to user’s needs and satisfy both sides of the relationship.

Here is a cliff note example of a UX designer’s responsibilities. It is targeted at development of digital products and is mainly applied to systems development life cycle (SDLC).

The process above is designed to be run by user experience designers. It’s like an individual version of Google design sprint process. As we know Google’s design sprint includes 5 phases: Unpack, Sketch, Decide, Prototype and Test.

In Unpack stage, we UX designers do research and modeling with other functional teams to define the problem first. In Sketch stage we work on ideation to come up with a detailed solution to the problem. We proceed Decide and Prototype stages as a whole design phase, we review assumptions, make decisions and then pick up great ideas forward to prototyping. In the test stage, we involve end users to do the prototype testing one-on-one to get feedbacks in order to decide what needs iterating and improving.

The details of each stage will differ depending on the type of design but the approach will always be similar. Let me introduce a case study that focuses on the process which I will use to illustrate the profession.

Case Study: Cross Platform Instant Messenger

I’ve been involved in this project since Aug 2014. And now it has been launched to public and is still on going developing.

We started by defining the problem first. As Steve Jobs said, if you define the problem correctly, you almost have the solution. In this early stage, we talked with stakeholders to gather the overall product vision, budget, schedule, technical constraints and opportunities, business drivers. We agreed with the initial objective of this project: to engaged staffs in Dragonce cloud-based platform, enhance the operation efficiency and encourage corporation internal communication.

Finally we came up with a tactic: a cross platform instant messenger. Due to the higher accountability and shorter response time, instant messenger for internal communication has higher engagement and accessibility than other solutions. In addition, messages sent via mobile devices are usually opened within a few minutes, so the information delivery is much more efficient for enterprise operation and internal communication.

RESEARCH

In the research stage, we started with comparative analysis first following with user research.

Comparative Analysis

The initial research focused on understanding the competitive landscape of the popular cross-platform messenger applications, including their global reach and feature spectrum.

The direct competitors are products that offer real-time team chat cross platform. The biggest competitor comes to Slack, which reached a $2.8 billion valuation in less than two years. Indirect competitors are products that approach the same problem—making communication. Most of them are some consumer competitors, which are free (or very cheap) messengers usually operated by industry giants.

According to the research result, WhatsApp has dominated most of the global comsumer messenger market by June 2013 with less powerful features than others.

User Research

The primary research goal was to understand the user preference towards cooperate communication tool via a survey (40 respondents) and 4 user interviews.

Interview Takeaway
  1. Staff in Hong Kong uses WhatsApp for internal communication and Wechat for collaberation with colleagues and clients from mainland China. While oversea communication are mainly conducted via Skype.
  2. Common user pains: disclosure of phone number, lack of colleagues staff info, unavailability of daily operation task status monitoring.
  3. Common user goal: efficient communication without disclosure of phone number

 

MODELING

After synthesising data from survey respondents and user interviews, we affinity mapped all key takeaways to discover commonalities and inform the construction of our 3 personas in creating a customer journey map including use case. The motivation, behaviours, and contexts of these archetypes facilitate our information architecture (IA), content, and design priorities.

Persona

Customer Journey

A customer journey is a visualisation of the process that a person goes through in order to accomplish a goal. It helps highlight customer needs and pains.

 

IDEATION

Finally came out a cross platform soltion, an instant messenger enbeded with tailor-made business application, such as HR system, reimbursement System etc. This product was called Rainbow at first launch in August 2014 and renamed as Dragonce in September 2015.

 

DESIGN

Version 1.0

Version 1.0 included some key features that prioridized from our personas like chat room, notification, company resources, company applications, action items etc.

The focus in this phase was to nail the navigation. Three sets of navigation solotions were designed including tabs, signle side menu and double side menus. Finally, version 1.0.1 with tabs won unanimous.

Version 1.1

Version 1.1 focused on tasks flows enhancement including login, chat room creation, adding different types of messengers and posting different types of social feeds.

Version 1.2

Version 1.2 focused on the customisability and extendability of this application, including identification of customisable part of the functionalities, method and configurations to customise.

TEST ITERATIONS

Validation Testing

To create the Minimum Viable Product (MVP), paper prototypes were created to begin testing at early stage. It’s more easy to iterate in low-fidelity before moving on to high-fidelity wireframes.

Online prototype application Fluid UI was used to rapidly develop some interactive wireframes for some key process flows.

This interactive prototype can be played both on Android and iOS with touch gestures. It’s an efficient way to quickly go through key scenarios, collect feedbacks, and then guide the product iteration.

Information Architecture

After more than one year’s iteration, here comes our information architecture diagram with new features like circulars, drawing, polls and discussion etc. This diagram was created in OmniGraffle, and always keeps up-to-date during the whole development cycle.

Information Architecture (iOS version)

PRESENTATION

From research to MVP, the first product was launched in August 2014. After seven months’ development, the first Android application was launched to Google Play in March 2015. And iOS application was launched to App Store in May 2015. The web-based version was released in December 2015.

Final User Interface (iOS version)

Web versionFinal User Interface (Web version)

Android v.S. iOS

Two different sets of Android and iOS user interface are designed to ensure best native user friendly experience.

Design at 1x

To speak the same language with mobile developers, 1x user interfaces are designed with the resolution of 360×640 for Android and 320×568 for iOS.

Webview Applications

Dragonce Applications were embedded in our messenger with WebView. Different web-based widgets were designed to provide a similar experience across platforms.

Animation

Flows Behind a Page

Tons of annotated documents were created to describe the visual forms and operation process flows behind every single page and action.