You Decide Web Campaign; Collaboration among the agencies.
Disclaimer
The project I wrote in this case is the first version of Marlboro.id. In the last one year, Marlboro.id has changed the vendors and there are some changes in it, but not 100% changes.
Visit the web on www.marlboro.id
The project I wrote in this case is the first version of Marlboro.id. In the last one year, Marlboro.id has changed the vendors and there are some changes in it, but not 100% changes.
Visit the web on www.marlboro.id
👩💻 Role
Single UX/UI Designer supervised
by design leader
Single UX/UI Designer supervised
by design leader
🪄 Tools
Sketch, Miro, Invision
Sketch, Miro, Invision
⭐️ Key Contribution
- Visual design
- Developer hand-off
- Usability testing and interview
- Visual design
- Developer hand-off
- Usability testing and interview
⏳ Duration
2018-2019
2018-2019
Challenge
The number of regulations determined by Indonesian government on the cigarette campaign greatly affected the creative process of developing the Marlboro.id website. Here, my team and I work together to develop a website that suits campaign goals and user needs within existing regulatory boundaries.
The number of regulations determined by Indonesian government on the cigarette campaign greatly affected the creative process of developing the Marlboro.id website. Here, my team and I work together to develop a website that suits campaign goals and user needs within existing regulatory boundaries.
The client
PT Hanjaya Mandala Sampoerna Tbk for Marlboro web campaign, is an Indonesian tobacco company owned by Philip Morris International.
PT Hanjaya Mandala Sampoerna Tbk for Marlboro web campaign, is an Indonesian tobacco company owned by Philip Morris International.
Project status
Confidential data
Confidential data
Overview
Marlboro.id is a web platform with the goal to campaign Marlboro brand; You Decide. This website raises a concept of collecting points that can be redeemed with prizes, terms and conditions are applied. Every certain period, the campaign and concept will be changed to create variations and new challenges for the users.
Marlboro.id is a web platform with the goal to campaign Marlboro brand; You Decide. This website raises a concept of collecting points that can be redeemed with prizes, terms and conditions are applied. Every certain period, the campaign and concept will be changed to create variations and new challenges for the users.
What we did
We carry out four phases in the process, which in the process we develop collaboration and cooperation between the internal team, clients and third parties.
Project alignment > Ideation > product design > usability testing
We carry out four phases in the process, which in the process we develop collaboration and cooperation between the internal team, clients and third parties.
Project alignment > Ideation > product design > usability testing
Project Alignment
The involvement of the third party and the client's internal division is the background of the project alignment became the first phase to do, the goal is to align the understanding of the requirements and regulations of the project.
The involvement of the third party and the client's internal division is the background of the project alignment became the first phase to do, the goal is to align the understanding of the requirements and regulations of the project.
Ideation
After all parties were aligned, the third party and my team conducted ideation process to determine
(1) the concept of the web and
(2) the content for the first campaign.
This phase was very challenging because apart from the regulatory constraints, we have to move fast within the time limit. Several parties involved in this project demanded we be more communicative and collaborate well so each of us can deliver maximum results.
After all parties were aligned, the third party and my team conducted ideation process to determine
(1) the concept of the web and
(2) the content for the first campaign.
This phase was very challenging because apart from the regulatory constraints, we have to move fast within the time limit. Several parties involved in this project demanded we be more communicative and collaborate well so each of us can deliver maximum results.
Product design
Using the results and instructions from the ideation, we then continued to product design step. We did this in four steps:
(1) Planning
(2) Wireframe & prototyping
(3) Visual design-Web developing
(4) Usability testing, and
(5) Enhancement.
Using the results and instructions from the ideation, we then continued to product design step. We did this in four steps:
(1) Planning
(2) Wireframe & prototyping
(3) Visual design-Web developing
(4) Usability testing, and
(5) Enhancement.
(1) Planning
We started building information architectures and explored some visual designs that fit the concept and ideation results. In this process we combine our designs with third party content.
(2) Wireframe - Prototyping
The results of the visual exploration that best suit our needs, then we pour it in the form of a mid-fidelity wireframe, followed by a prototype and ending with an approval request to the client.
We started building information architectures and explored some visual designs that fit the concept and ideation results. In this process we combine our designs with third party content.
(2) Wireframe - Prototyping
The results of the visual exploration that best suit our needs, then we pour it in the form of a mid-fidelity wireframe, followed by a prototype and ending with an approval request to the client.
In the approval request phase, the client provides some feedback on content and designs that do not match the campaign message, then we fixed it.
(3) Visual design - Web developing
Due to time constraints, we skipped the wireframe testing and move to the visual design phase. After client approved the visual design, we proceed to the developing stage.
In the development phase with the developer team, we are always ready to direct and discuss so that the design results are in accordance with the initial concept and do not burden the developer's work. We are always on standby until the website is launched.
(3) Visual design - Web developing
Due to time constraints, we skipped the wireframe testing and move to the visual design phase. After client approved the visual design, we proceed to the developing stage.
In the development phase with the developer team, we are always ready to direct and discuss so that the design results are in accordance with the initial concept and do not burden the developer's work. We are always on standby until the website is launched.
(4) Usability Testing
We did usability testing when the first campaign period ended, here we tested two things:
(1) Web platform and
(2) Content campaign
We processed the informative insights and feedback that we got to improve results and performance in the next campaign.
We did usability testing when the first campaign period ended, here we tested two things:
(1) Web platform and
(2) Content campaign
We processed the informative insights and feedback that we got to improve results and performance in the next campaign.
Learning
This is my first time doing usability testing, and the learning I get is:
1. Exploring sentences when communicating with participants. This will help the bridging process from task 1 to the next task to be less rigid.
2. Master the product and prepare the worst scenario when participants cannot answer/perform the assigned task.
3. Control the usability testing atmosphere to stay relaxed. It helps participants not feel tense or stressed, so that the answers/things assigned to participants are more natural.
This is my first time doing usability testing, and the learning I get is:
1. Exploring sentences when communicating with participants. This will help the bridging process from task 1 to the next task to be less rigid.
2. Master the product and prepare the worst scenario when participants cannot answer/perform the assigned task.
3. Control the usability testing atmosphere to stay relaxed. It helps participants not feel tense or stressed, so that the answers/things assigned to participants are more natural.