NuttiMelli
Project Type
Landing Page
Multidisciplinary Team
Timeline
2019
3 days
Role
UXUI Designer
Key Skills
Customer Findings
Storytelling
Visual Identity
Web Design
Interaction Analysis
Project Overview
NuttiMelli is a marketing landing page concept that allows coffee enthusiasts to join the monthly speciality coffee subscription. The objective is to create a minimum viable landing page, which has been designed using insights from user research. This is intended to help the business attract a customer base through both initial views and potential conversions within a one-week marketing ad campaign. We reached 137 users and have 31 sign ups.
As for the design and research process, took about 3 days to complete. Details and designs are submitted to the Startup Talent Factory, Singapore.
Timeline
3 day design sprint and research process, 1 day analysis.
User Research
It is critical for us to understand the problems and needs of our prospective customers facing before we start building a solution. Other information that would be critical will be details such as their existing lifestyle habits, purchasing habits, and future aspirations help to define the main problems we need to find a solution.
Therefore, this was the list of assumptions we want to validate and conducted the questionnaire via WhatsApp. Given I have prior knowledge in terms of collating the findings for us to understand, I suggested putting in affinity mapping based on these categories: mindset and pressures user face.
Define
Persona
With the insights gathered from user research, we have identified the main personas. This allows the team to be aware of who are we designing for, and a good reference whenever we need to decide and make any design/interaction decisions.
Hero Journey Mapping
It involves visually charting a character's journey, encompassing adventure, challenges, growth, and transformation—commonly employed in storytelling.
Here, we outline each hero journey stage and how the coffee subscription business engages users emotionally and experientially.
Additionally, it pinpoints business opportunities aligned with each stage of the journey.
Design
We made an assumption to build mobile first approach, since our campaign will lead to the single pager landing page.
We are also prepared to change accordingly after pre-launch stage.
Flow of the landing page
Considering the customer's perspective, they would be inclined to explore more details about the company's range of products.
Discovering this information, coupled with customer testimonials, particularly from those who have firsthand experience with the coffee, would bolster the trustworthiness of the assertions and ensure alignment with their expectations.
Key Solutions
Usability Testing
For this approach, we use Hotjar App to analyse since we did the mockup on a web design tool. We are able to use the features such as device evaluation, clicking and live recordings, and heat map evaluation to understand the user behaviour and interaction on the page. However, due to project constraints, we can only do this one cycle. Otherwise, it will iterative process to further improve.
Validation
Was the order of content and placing the input on the hero content was it accurate?
Tool Analysis: Heatmap evaluation
Validation #1
Was the order of content and placing the input on the hero content was it accurate?
Tool Analysis: Heatmap evaluation
Based on the heatmap results, it was accurate in terms of both the content and also the decision to put the input on the hero section since after that section the % of the visitors gradually dropped.
Validation #2
Was Mobile first approach accurate?
Tool Analysis: Device Evaluation
Based on the results, 66% of the users are using mobile device to view our website.
Validation #3
Is the fixed headers utilise to help user to go to designate section
Tool Analysis: Clicking and Live Recording observation
Based on the results, the header has the most number clicks. "What We Offer" has the most clicks, which also shows the users actually interested in the product offerings.