This case study aims at illustrating the complexity of the workflow behind a UI / UX design process at Wildstyle Network. It is based on a 2018/19 client case of developing an ecosystem that helps consumers and companies to apply the “Right to Know” about substances of very high concern in consumer goods.
The process of creating a “Scan4Chem” application and service is only a fraction of the original process.

The following 2019 Case Study will take you through the UX design project, which is inspired by the development of an application for the European chemical industry. It can be best described as a journey through user flows, surveys, interviews, user data, value proposition design, comparative analyses, endless wireframing, user testing, and prototyping.

During the development of this App, our team relied on the British Design Council’s Double Diamond process with its four phases: Discover, Define, Develop and Deliver. Each of these four steps will be consistently described in this case study. After applying this process, the team then follows an iterative (lean) process of build-measure-learn.

The UX Problem Statement: Substances of very high Concern must be communicated to users upon request, but have no educative way to do so.

Substances of Very High Concern (SVHC) refer to e.g. carcinogenic substances, endocrine disruptors, or substances deemed of special concern for the environment. The European Chemicals Regulation stipulates duties to communicate information with regard to SVHC. If an SVHC is present in an article above a concentration of 0.1%, this information must be communicated to every commercial recipient by every supplier in the supply chain. Therefore consumers are also entitled to this information upon request and can thus use it to make well-informed purchase decisions.

The UX Task: Turn a EU regulation into a Chance to educate Users.

Step 1: Discover the full Spectrum and Relationship Consumers and the Industry have with each other

DATA COLLECTION: The Wildstyle Network UX team found that the European Union has developed an initial database for such substances of very high concern. The database is already well-scheduled and allows API calls from registered domains.
The database’s goal is to grow by leading to a substantial increase in information requests to the suppliers of articles.

BENCHMARK: Every Project begins with understanding our client’s goals and the user persona. This competitor research has focused on scan-functioning Apps in the health and food industry. The team found out that there are plenty of Apps like the ones researched here.
There are Apps for nutrients and chemicals in foods, chemicals in cosmetic products, or researching data for a conscious living while shopping with scanning functions, all of them are related to scanning things in your surrounding in one or another sense.
So Wildstyle Network’s business intel team downloaded 12 of them and used them under various circumstances. As a result four of them were direct competitors, offering both an angle on chemicals concerning personal health and scanning functions: Detox Me, GoodGuide, Chemical Maze, Think Dirty, and Yuka.

COMPETITORS: The WSN Competitor Framework helps business intel teams to explore the data and use cases of all relevant competitors. This list was presented and well discussed with the clients.

INHOUSE PROJECTS AND KNOW-HOW: WSN Angels & Startups invested in the NY-based venture Project Hugleberry in 2011. This intense know-how was added to the sources. If you like to know more, check out the About video (YouTube).

General Conclusions from the Discovery Phase:

• Apps of this category are still very basic
• AR systems and gamification are touched but not fully leveraged
• Going social is a plus
• Reasons for chem-scan: health care, improving information flow on SVHC, safer alternatives in the supply chain, raising the supplier’s awareness
• Gamification is not so common yet in this segment

UI Conclusions:

• Onboarding Screen Menu
• Tutorial overlay common
• Social Login
• AR optional
• Personal Profile and Saving Scans recommended
• Progress Features implementation
• Different Resultscreens
• Healthy colors, simplify

Step 2: Defining Jobs, Pains, Gains, and learning about a User’s Motivation

Influencers as additional User Persona

In the chemical industry, “key opinion leader” or “influencer” is the somewhat Orwellian term used to describe the Senior Experts or Scientists or even Managers who perform the role of a middle court between a producer and a consumer and have a large reach of influence. These influential employees or independent experts are engaged by the industry to advise on marketing, evaluate and test products and sometimes to help boost sales. Of course, the most important task for them is to spread an honest and unbiased opinion. In the chemical industry, it is very important, as it directly reflects on people’s health. Hence these people are a very important part of creating the image of the app and of the process of attracting users.

 

Step 3: Synthesizing the Findings of the Discovery Phase

Above all, we found out that gamification increases user motivation and reduces premature crashes. By completing tasks and small rewards, the feedback on app usage is more positive. Numerous gamification elements can be integrated into the user journey:

Step 4: Define Personas and corresponding Features

Personas: Stepping Into Our User’s Shoes

From our findings, we created personas of Kristina and John. Doing so allowed us to keep the user at the centre of the design process, ensuring we met their goals. Consequently, we created two scenarios in order to frame the problem and focus on the user needs as we moved forward.

Build A Customer Journey Map

A customer journey map is a visual representation of every experience a customer has with the product/service. It helps to tell the story of a customer’s experience with a brand from original engagement and into, hopefully, a long-term relationship.

Step 5: Idiation

Idiating with rough Wireframes

Conducting two rounds of design studio, we explored ideas for the scenarios, subsequently using a feature prioritization matrix to refine what should be included in the MVP. This showed there were unwanted features that were very time-consuming and costly.

Improving Navigation

First of all to improve the app navigation, we decided to add a bar that consisted of three main tabs: “Profile”, “Scan” and “Info”.

We identified that users found the “Your Scans” and “Project Info” tabs in the bar very confusing. In order to clarify the app, we removed these, modifying the information architecture of the app to either move this content into other more logical areas or remove the content entirely.

Improving Rapidly

From the design studio process and the app’s first rough wireflow, we created a more detailed journey and wireflow.

We developed this into a paper prototype, conducting usability tests, iterating, and testing repeatedly. This showed the “Onboarding Journey” — our initial idea for helping users to understand the app —  was incomprehensible. So we modified this part and added more schematic explanations to it so that users can easily understand the principle of using this app.

Step 6: Testable Interface Design and User Journey

Step 7: Iteration and Validation lead to an almost final Product, but smaller

While the first MVP in the market already hit the assumed KPIs after only two iterations, the team then continued to provide a solution at an even smaller feature scale. With the goal of just learning if there is a need for it and how big this need is.

The here described process of creating a “Scan4Chem” application and service is only a fraction of the original process. However, it should help to support your User Experience Design and MVP-process. If you you like what you saw, do not hesitate to get in touch with the UX team at Wildstyle Network.