Cheesy Recipe
ART DIRECTION / UX & UI
Indonesian were falling in love in Kraft Cheese and with the help of Celebrity Chefs,
that love grew and Indonesian started to explore their food with Kraft Cheese and documenting it.
THE BACKGROUND
With the help of Celebrity Chefs, Indonesian all over were falling in love with Kraft Cheese.
Fans of the brand were genuinely trying out the product and incorporating the cheese into their daily meals.
They would document their process and upload them to their social media.
THE BRIEF
Seeing that there’s growth in organic content, the client tasked my team to create a platform
where fans of Kraft could submit their recipes and exchange them with other Kraft fans.
They also added few other need to-haves on the site:
• Product awareness
• Tutorial videos by Celebrity Chefs
• Product Feedback / Polling / Survey
• A community of cheese lovers sharing and interacting through recipes creations
• Help Desk
MY ROLE
For this project, it was consist of a team of three (myself, copywriter partner and developer).
My partner and I shared collective work on usability testing, defining personas, identifying and prioritizing user's needs,
strategizing and planning content and creating the lo-fi paper wireframe together.
Developing the findings into wireframe and Hi-fi design was mainly done by me using tools from
Adobe Creative Cloud and Sketch for wireframing and prototyping.
DESIGN PROCESS
For the design process, we broke it down into 5 sections. The design process and thinking
decisions are very much governed and supported by user research and feedback.
IDENTIFYING PERSONAS
The client provided us with their findings through market and data research and we narrowed down
2 demographics and persona that encompasses the behavior of Indonesian moms.
IDENTIFYING PAIN POINTS
From chatting with client, going through the brand’s market research and chatting with mothers group below are our findings.
After going through all our findings, we needed to put things onto paper to strategize our next steps.
In this stage, we worked closely with the client to identify the content first with both client and mother's needs in mind.
We first started our planning with the sitemap and the information architecture.
After getting the sitemaps and information architecture signed off by the client we then go into sketching mode.
During the process, we also included the client during our workshop discussion in order for them to be actively participating
in the development of the website. Rapid sketching exercises enabled us to generate a large volume of concepts which we would then critique as a group and vote on various features based on the results from our feature prioritization.
LO-FI MOCK UP
In the next step, I converted all the finalize sketches on to Sketch to do up the wireframes to visualize the team's collective vision.
By having wireframe done up on Sketch we were able to again test it out as a group with the client to see if what worked on paper would also translate smoothly during this phase. We also did a quick usability test with moms in the office to see if they found the experience seamless.
THE WIREFRAMING
I jumped into Sketch and Photoshop CC to create Hi-Fi mockups of our proposed solutions and used Invision to create a clickable prototype. We tested the prototype with several new individuals mostly consisting of moms. Insights from the validation test led us to reiterate a couple of screens. Below are some of the final solution in Hi-Fi mockups of pages with most user iteraction.
WEBSITE LANDING PAGE
HI-FI MOCK UP & PROTOTYPING
By having the "Upload Recipe" button being visible upfront and center with it being the only red element on the
landing page enables the moms to easily upload their content in less than two steps. This was proven when we ran the 5-second
test during the validation phase and we saw the moms could easily find the button to upload their recipes.
UPLOAD RECIPE POP-UP
Initially, the client wanted the form for the recipe submission to have a page on its own. Through the validation phase with moms,
we observe that most moms had a better seamless experience having the recipe forms be concise (short info to fill) and appearing as pop up on the main landing page. We also moved login and signup only when they decided to submit their recipe lessening the drop out rate of having the logins or signups at the beginning of the user journey.
Communication:
At the beginning of each day, we prioritized a 15-minute daily scrum to discuss where we each were at, any concerns we had and what we intended to proceed with for the day. We maintained an open and transparent process not just with the internal teams but also with the client themselves. It was crucial to educate and demonstrate to the client the importance of UX within the project by working very closely with their brand and product team via conducting a weekly workshop and sharing them with our rapid prototype every step of the way. This way we were able to manage each stakeholder's expectations at the early stage.
Testing & Validation:
Due to the brand's inexperience in creating a channel of this magnitude, there was some request that wasn't aligned with our findings. Through testing and validation, we were able to debunk or deprioritize some of their requests by demonstrating how each component performed through data and usability tests. This step was the most crucial next to UX research in educating the brand's stakeholders and showing how the team was able to translate people's behavior into a tangible experience.
KEY LEARNINGS