Role
UX
UX
Wireframe/info architecture for baby food start-up.
Process: Accessing user pain points through workshops with CEO and solutioning.
Clear brand USP and offer.
Credible pieces of evidence.
Structure ↓
↓ Details
Understandable product benefits.
Clear subscription offer.
Product listing ↓
↓ Offer selection
Optional two pages.
News ↓
↓ About
UX/UI
Art direction
Frontroom
Full online shop creation for a shampoo brand.
UX
Mullen Lowe
Goal
Our users
Structure
The user is looking for simple and friendly medical 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.
The user is looking for specialist guidance and hasn’t seen a specialist yet:
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.
The user wants to feel normal and reinsured by other women:
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.
Step by step
Product presentation
Ux
Lufthansa
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.
After relaunching its websites with some new UX and design, UGG’ conversion rate dropped by 50%.
The recommendations are currently A/B tested.
During the analysed period, 3865 visits were recorded for the home page.
Device split: 39.8% Desktop/Laptop, 48.9% Mobile, 11.3% Tablet.
–
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.
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
Clarify the menu and content.
Inspire to engage/tell stories.
Option 1. Product and lifestyle / fashion magazine
Option 2. Table of content / cherry-pick
Audience definition & persona creation
Benchmarking & expert review
Interviews, card sorting & tree testing
Branding & tov
UI & blur test
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.