Role
UX
Little Tummy
Wireframe/info architecture for baby food start-up.
Process: Accessing user pain points through workshops with CEO and solutioning.
Homepage
Clear brand USP and offer.
Credible pieces of evidence.
Structure ↓
↓ Details
Product page
Understandable product benefits.
Clear subscription offer.
Product listing ↓
↓ Offer selection
Brand engagement
Optional two pages.
News ↓
↓ About
Noughty, E-commerce
Role
UX/UI
Art direction
Agency
Frontroom
Full online shop creation for a shampoo brand.
Canesten online articles
Role
UX
Agency
Mullen Lowe
Goal
- Create a narrative, using existing components, to inform about discharges and product utilisation.
- To be simple, reinsuring and answer questions.
Our users
- Women between 18-34 who experience thrush for the first time.
- They need to understand their symptoms and what to do.
- They need to understand that there is nothing to worry about.
Structure
- Level 1: Discharge introduction with links to level 2.
- Level 2: Discharge during periods with links to level 1 and 2.
- Level 2: Discharge during pregnancy with links to level 1 and 2.
- Level 2: When Discharge becomes colourful with links to level 1 and 2.
Discharge hub
User 1
The user is looking for simple and friendly medical information:
“I need simple and good vibe information”
Gentle pedagogy:
A template to inform: Neutral, easy to update and versatile for creative ideas.
FAQs integrated into content:
§0: Discharge intro.
§1: What is discharge and relevant question(s)/link(s).
§2: Why is there discharge and relevant question(s)/link(s).
§3-4: Discharge evolution (during periods and pregnancy) and relevant question(s)/link(s).
§5: Related article listing (Discharge during pregnancy, Discharge during periods, When Discharge become colourful).
§6: Product carousel.
User 2
The user is looking for specialist guidance and hasn’t seen a specialist yet:
“I want to talk with a specialist rather than reading clinical documentation.”
The friendly specialist ‘chatbot’:
An engaging template led by questions. Those expand into versatile drop-down areas for creative ideas.
Content = FAQs:
§0: Discharge, Canesten specialist introduction and link(s) to the relevant page(s).
§2: FAQs and link(s) to relevant page(s).
§3: Related article listing (Discharge during pregnancy, Discharge during periods, When Discharge become colourful).
§4: Product carousel.
User 3
The user wants to feel normal and reinsured by other women:
“I need to hear real women stories/experiences/tips, as well as, medical information.”
Reinsuring community:
Quotes and video for testimonials.
Creative spaces for social ideas.
SEO friendly (using people’s voice and way to formulate issues).
Content with FAQs followed by FAQs recap:
§0: Discharge introduction and link(s) to relevant page(s).
§1: Statement 1 – What is discharge, testimonials and relevant link(s).
Statement 2 – Why is there discharge, testimonials and relevant link(s).
Statement 3 – Discharge ‘issues’, testimonials and relevant link(s).
§2: Related article listing (Discharge during pregnancy, Discharge during periods, When Discharge become colourful).
§3: Product carousel.
How to use
Narration
Step by step
Function
Product presentation
Lufthansa, the Captain journey
Role
Ux
Agency
Lufthansa
Process
Goal: to create personas and journeys based on journey transcript.
To start with, I did focus on the Captain’s journey, assuming that the First Officier had a similar one. The Crew, Air Traffic Control and devices are, in this project, shareholders. I used a software called Smaply to present the personas and journey.
In addition of the journey transcript, I also read an article called ‘How Airline Crews Work’ and watched the beginning of ‘Two cool ladies piloting heavy MD-11F ultimate cockpit movie’ to deepen my understanding of the topic.
Then, I reshaped the given scenario into a Captain’s persona and journey. I first pulled out the Captain’s goals when flying a plane from Zurich to NY. One of my aims was not to alter the scenario – to be none fictional. To do so, I cut the Captain’s scenario into steps and, for each step, identified needs. They mainly revolved around getting informed and informing. From it, I deduced the questions the Captain had to answer and the touch-points providing responses (apps, devices and people). I assumed that the more numerous were the information points, the more efforts were required and the less satisfying the experience was. I ended the document with some opportunities to streamline information and ease the Captain’s journey.
Personas: Captain Anna Jones & First Officier Elen Hartmann
Journey: Captain Anna Jones files plane to NY
Deckers, UGG and Hoka optimisation
After relaunching its websites with some new UX and design, UGG’ conversion rate dropped by 50%.
Approach
I reviewed the website – using available data (heatmaps) and benchmarking.
The recommendations are currently A/B tested.
Abstract: Homepage
Quantitative analysis / SessionCam observations
During the analysed period, 3865 visits were recorded for the home page.
Device split: 39.8% Desktop/Laptop, 48.9% Mobile, 11.3% Tablet.
43.8% of users didn’t view other pages after visiting the home page.
25% of the users left the website each time they reach a new section of the home page.
Users were also exiting after opening the menu.
–
The desktop heatmap indicates the majority of users are unprepared to scroll beyond the home page break.
100% of users view the page top section when around 75% scroll into the three tiles’ row below (Shop Women, Shop Kids and Shop Men).
25% and less users scroll beyond three tiles’ row to reach the bottom page navigation.
The attention heatmap aligns with the scroll behaviour since the majority of time is spent on the top hero image.
There is little time spent elsewhere on the page.
_
The ‘click’ heatmap also shows that the hero image holds the user attention. The hero image’s CTA (Shop Women’s Casuals) sees little to no interaction.
The hero image’s CTA sees the most interaction of all the page’s CTAs– though the header navigation receives the most interaction.
The hero image’s carousel has engagement forward, but not back.
–
43.8% of users who view the home page view no other page within their session.
Struggle is observed when users click on the hero image – expecting it to be clickable.
Those users potentially want to shop for the products displayed in the picture or for some related items.
Regardless, after clicking multiple times without outcome, users exit.
–
Users were also observed exiting after opening the menu and didn’t navigate elsewhere.
This is the typical behaviour of users who cannot find what they are looking for.
Competitive and qualitative analysis
Website ∝ Customer satisfaction ∝ Purchase intention
“Brands need to provide insight and inspiration – something emotional that customers can take away besides buy our product.” econsultancy.com
Immerse
Be bold
Narrate
‘Bring life’
Clarify rather than repeat
Create a tvo
A/B testing options
Clarify the menu and content.
Inspire to engage/tell stories.
Option 1. Product and lifestyle / fashion magazine
Option 2. Table of content / cherry-pick
Next
Audience definition & persona creation
Benchmarking & expert review
Interviews, card sorting & tree testing
Branding & tov
UI & blur test
Nanos, Budget screen
Role
UX/UI
Nanos is a platform to manage social ad campaigns easily.
The goal was to design an budget management screen for advertising on Facebook, Instagram and Google.
A Visual approach, inspired by domotic apps, using sliders/levels to equilibrate the advertising budgets across media.
An ‘accountant’ interface presenting unitary and global media budgets as an equation.
