Embedded Files
Initially built in 2017 for the retailers' community in Nordic countries, OPEN platform is aiming to be a communication channel for retailers and PMI (Philip Morris International). Here on OPEN, retailers are expected to find news and knowledge about tobacco and activities they could participate in. I worked as the digital infrastructure intern who redesigned the information hierarchy, created visual interfaces, and published the first design system for OPEN platform.
2020.01 - 2020.07
THE GOAL
As OPEN grew and developed, a new consistent and clear design language of unifying content on OPEN is needed to efficiently and accurately communicate the smoke-free idea and vision with the retailers.
Achieve business goals on OPEN
Enhance general usability (For all Nordic markets)
Design new user-friendly visual interfaces
Improve internal workflow
MY ROLE
I am the intern in the UX & platform infrastructure team who lead the OPEN redesign project.
Infrastructure team: 2
OPEN team: 7 (Infrastructure team + Content team)
Major stakeholders:
Premium brand team (Marlboro, L&M), Below premium brand team (Chesterfield & others), IQOS team, the commercial team in Sweden, Denmark, Finland.
14 DAYS
TO FIND PROBLEMS
The Potential Problems
By applying various discovering approaches, including interviews, in the wild observation, heuristics evaluation, and brainstorming, I pinned down the problems that were hidden behind the transcripts and comments from the Nordics team members and OPEN platform users.
1st PROBLEM: FRACTURED INTERNAL WORKFLOW
There are no documented files on previous iterations:
OPEN team is currently building the platform by using the Salesforce community tool. According to the previous iteration history, it shows that previous colleagues who have worked with OPEN have set different rules such as naming standards for webpages, data sets, articles, etc. without any documentation.
There are no formalized briefing templates for the content team:
The most challenging part to work with OPEN is to equip it with an inclusive attitude for different tobacco brands from Philip Morris International. There used to be a messy styling combination of materials from different brands delivered by various design agencies on OPEN.
2nd PROBLEM: POOR USER EXPERIENCE
Because of the first problem, from the user perspective, retailers were experiencing a bad user experience for two major reasons:
Inconsistency of material styles across OPEN:
Difficult to create a brand identity for OPEN from a user perspective
Non-information hierarchy on OPEN:
Difficult to discover and find information on OPEN which lead to a lack of proper user flow
14 DAYS
TO RETHINK ABOUT OPEN
LET'S THINK ABOUT THE VALUES OF OPEN
Facing the problems OPEN had, before redesigning OPEN user flow, I need to know what structures OPEN and what limits OPEN.
Instead of trying to harmonize the current ongoing materials on OPEN, I suggested that my team figure what are the core values and pillars for OPEN in their eyes.
This is one of the pictures of OPEN values discussions.
Since the common values of OPEN are still uncovered, I shifted the interviewing questions to OPEN team members, managers, market stakeholders from
"what are the problems you think that OPEN has or you have experienced when working with OPEN"
to
"what do you do with OPEN or what do you want to do via OPEN".
Reviewing the user feedback at the same time, we found out the core values of OPEN by shaping the ideas from stakeholders and OPEN team. From here, I started to build a new OPEN user flow with Adobe XD and carry out the first low fidelity prototype.
28 DAYS
TO DISCUSS UPON THE IDEA AND FAST ITERATE
Internal "Roadshow"
To get every team member on board, I have summarized the vision of OPEN my team has built from the previous interviews and then defined the design principles for OPEN which can play as cornerstones for future modification. Along with the explanation of better ways to categorize information on OPEN, I made a proposal of OPEN restructure and made speeches about it. I have collected quite a lot of insights and bits of advice for the proposal. My team has fast iterated the idea into a constructible plan.
Design principles
The most unorganized part is the old way of managing information on OPEN. Due to the chaotic information on the home page for various brands and activities, users normally will only click two buttons on OPEN, one is the home button and the other one is the daily task button. Other than that, the navigation bar and other pages are not fully utilized.
VISIBILITY
No matter how great the content is, if it is not visible to the users, then it will not complete its best value. The visibility of the priorities comes first.
CONSISTENCY
Each page, from structural, content organizing, visual style, feedback system should be built more consistently.
COHENSION
Attach, glue, cluster relevant functions and content into one place.
MINIMALISM
All the repeatable, redundant information should be cut off. Instead, from the user flow perspective, complementary information channels should be built across the platform.
How to categorize information
The most unorganized part is the old way of managing information on OPEN. Due to the chaotic information on the home page for various brands and activities, users normally will only click two buttons on OPEN, one is a home button and the other one is a daily task button. Other than that, the navigation bar and other pages are not fully utilized.
I divided the information into three major blocks:
Core information is the fundamental information that we want to deliver via OPEN which will be shown on the home page in order to notify the latest news and latest activities to motivate users to participate. The content on the home page will be usually updated.
Bonus information indicates the additional information that will be led by the navigation bar which includes more detailed and in-depth knowledge of the brands and activities for those who are interested in learning and exploring more staff on OPEN.
Necessary information includes user information and the shop information which will be placed in the top bar.
User flow
User Flow refers to a series of correlative actions that we expect users of OPEN would like to take. The new user flow we designed for OPEN has obeyed the following two organizing methods.
INFORMATION COMPLEXITY
The load of the information, categories, quantity
INFORMATION CORRELATION
The influence and the potential correlations among information
Following the design principles and the way to organize information, I drew the low fidelity prototype by using the current content that was happening on OPEN. At the same time, I put the missing modules that OPEN currently doesn't have but are desired by users and stakeholders into the category. To be more specific, what OPEN needs as its structural bones are
To enhance site learnability: Home page as a navigation center to most recent news and promotions.
To enhance site efficiency: Decide the navigation bar via collecting bonus information by theme.
To enhance memorability: Put archives of historical materials in the bottom bar.
Low-fi idea of home page
REFLECTIONS
The new way of clarifying platform structure and content materials is clear and easy to be understood.
On each page, the new challenge of how to reduce cognitive working memory load appears. One of the benefits of the new way of organizing information is that more ideas could be fit and dwelled into one or several pages. This caused a brainstorming within the team of what kinds of new content are expected to be placed on OPEN, such as visible performance tracking of the users and introducing more kinds of gamification activities.
Due to legal issues, we don't have enough resources to do user tests on each prototype. Instead, we invited the team members and stakeholders to evaluate and give out their opinions. Among them, we particularly valued the suggestions from sales representatives because they have collected first-hand feedback from the daily interaction with the users.
28 DAYS
NEW CHALLENGE APPEARS
"A design system" VS "A style guide"
While making the high fidelity prototype, the team encountered lots of doubts about how to fit OPEN materials in the new structure. Not to violate the design principles, my team thought a style guide should be delivered to guide the process of producing content.
Working in a big team is challenging. Concerning the problems I have defined in the first two weeks, I am thinking of how to structure the information flow inside the teamwork while making the style guide. My team lacks design management for a long time. Instead of a simple style guide is needed, a design system for each member in the team to understand the future, vision, basics that OPEN equips is important.
A useful design system that will help them to work with OPEN from sharing the values, creating the content, cooperating with stakeholders, and working with the Salesforce backend should be customized. The whole workflow and design rules have been divided into four parts: design principles for everyone, a visual & brand guide for everyone, an editorial guideline for the content team, and an implementation guideline for the infrastructure team.
DESIGN PRINCIPLES
The design core values and directions of OPEN iteration.
VISUAL & BRAND GUIDE
The strict description of design elements that compose OPEN container itself and OPEN components.
EDITORIAL GUIDELINES
The instructions for content team and agencies to produce materials that will be displayed on OPEN.
IMPLEMENTATION GUIDELINES
The instructions for the infrastructure team to work with uploading and updating content on OPEN, creating and maintaining functionalities on OPEN.
Identity hierachy
The biggest misunderstanding on the style guide is to see it as a pure collection of rules. It does constrain creativity to some degree but for the purpose of creating a consistent feeling of the brand and all the objects, components, content. Thus, it could help to form a kind of style. The biggest challenge to writing the style guide was to convince my team members of what role OPEN is playing when they have worked with other stakeholders and many other brands to create content and materials for them since OPEN has been created.
To create an identity for OPEN itself, which should be inclusive and supportive for other tobacco brands, but independent as well, a style guide should work as a container to explain the color palette, typographic settings, and most basic elements. Based on the basics which are provided by the container, OPEN will have its own components such as a dropdown list, buttons, input form, etc which shouldn't vary from one activity to another, from one campaign to another. Apart from these rules, OPEN won't be aggressive to limit the creativity for the materials for Marlboro, self-made tobacco, IQOS, etc. Even though these materials can be in totally different styles which could be 3D illustrations, drawings, photorealistic style, etc.
OPEN CONTAINER (bottom)
The basic rules on OPEN include color palette, typographic settings, grid system, logo usage and border, shadow using. Together with OPEN components, they will form the visual identity of OPEN.
OPEN COMPONENTS (middle)
the components that are built by using basics in the OPEN container, such as dropdown list, input form, buttons. When designing new materials for OPEN, content team members need to brief design agencies on the aim and content of that materials. Agencies must follow the instructions in the style guide and utilize the OPEN components when making it.
OPEN MATERIALS (front)
These included the rules of making pictures, creating paragraphs that are floated upon OPEN infrastructure which have flexibility and freedom to be different artistic styles.
Visual & brand guide
It will cover all brand elements–logo, colors, typefaces as well as the styles of assets and components for OPEN in order to keep consistency on the site. Please reference the document detailedly to become an expert when it comes to designing the content for OPEN with Philip Morris.
Editorial guidelines
For improving the convenience of communicating with the agencies to deliver proper and consistent materials on OPEN, editorial guidelines clarify the templates and the right usage of images and headers. Here are parts of the rules for imagery, headers, and banners in the editorial guidelines
Implementation guidelines
To help my team to understand the Salesforce backend and faster the speed of publishing contents in different forms, implementation guidelines clarify the procedures of setting up different forms. Here are parts of the rules for implementation guidelines
28 DAYS
NEW INTERFACES ADAPTATION OF NEW DESIGN SYSTEM
Current OPEN
Here are some example pages developed by using a new design system.
Learnings
Open talk
An inclusive and open attitude towards conversations and discussions is crucial to carrying out a big project since opinions from various stakeholders need to be taken into consideration.
During this project, my supervisor and I have encountered lots of enthusiastic participation, both internally from OPEN team and brands team and externally from agencies and colleagues from other markets.
The right attitude towards all the suggestions no matter supportive or disruptive is to try my best to absorb, understand, reflect upon each point and convey, express, consolidate the value behind the points.
Design management
I learned fast while working with my team. At the stage of transforming from a brand-oriented tobacco giant to a consumer at the core company, it is important to build a design management system to let the information flow inside the team, to collect, emphasize with consumers' needs as much as possible.
The aims to build a smoke-free future require a human-centric research methodology. During the whole redesign project, my team has applied theatrical user research methods and prioritized the user needs at every step.
I am confident that it will be much easier to work with internal teams and agencies more professionally and efficiently based on the improvements my team has made during the redesign project. This project provided an opportunity for all the team members to participate and give their own suggestions and reflections on how to work with OPEN platform and its users.
Defination
This is my first full-time job working in an English-speaking environment combining Swedish, Finnish, Danish occasionally. My team has taught me how to articulate my ideas and take a decisive move when multiple directions to work towards showing up.
To be honest, I have encountered millions of times challenging myself and doubting the directions that have been taken is not perfect enough.
However, quoting from my supervisor, "It's needed to make a decision and define something at some point. With one direction, we will know what is wrong and what is right."
Believing and trusting is what I have experienced most in the team which enabled me to touch things beyond my limitations to express myself in my evaluator's personality.
Page updated
Google Sites
Report abuse