Re-design fluentglobe.com home page for scenarios:
1) Get general info on company or people
2) Specific product info and sign-up
Using a horizontal left - right navigation.
1. The Audience
The typical user will be casually browsing the website while talking to a
friend or acquaintance. Perhaps the acquaintance just told them about
Fluent Globe. They are not in an office and they are probably not at
home, so they are most probably browsing the website on a mobile
phone.
Fluent Globe Website Project
2. Original website better on desktop than mobile
60+% of visitors used an iPhone
Separate layouts desktop/phone a nuisance
Too much content per page - Hard to digest info
Navigation doesn’t suit the sign up process
The Problem
3. The Brief
Re-design fluentglobe.com home page for scenarios:
1) Get general info on company or people
2) Specific product info and sign-up
Using a horizontal left - right navigation.
Assume less information/page catering to users short
attention span mainly for mobile portrait mode.
“On engagement, we're already seeing that
mobile users are more likely to be daily active
users than desktop users. They're more likely to
use Facebook six or seven days of the week.”
- Mark Zuckerberg
4. Design Process
What is
wanted? Analysis Design
Prototype
Implement
&
Deploy
Evaluation
Heuristics
What is there
vs what is
wanted
Personas
Journey map
Responding to
real user
feedback
Define the initial strategy
5. User Research and Personas
For this project, we have brainstormed personas that are
representative users of Fluent Globe’s website.
Before creating the personas, We have collected data
from a wide range of people that might represent the
typical user (expats who moved to Switzerland because of
work or family and wish to settle or stay in the country
long-term)
I’ve contacted a handful of volunteers from sites like
meetup.com and internations.org who agreed to
participate in the study
We interviewed people in-person and recorded the
outcome
6. Emily Davis (36)
American expat, living in Zurich for 2 years
Demographics:
Marketing assistant
B.B.A Business Administration
Key Characteristics
• Mother of 2, works 80%
• Has an A2 German level
• Moved to Zurich with husband
and children
Goals
• Wants to learn swiss-German to
get more job opportunities
• Wishes to get a better paid job
with more responsibilities
Description/user story
Moved to Switzerland with family. Returned to work
now that the kids entered school. She has only
managed to get a job as a marketing assistant while
she used to be a marketing director back home.
Frustrations
• Can’t get the job she wants due to language
limitations.
• Can’t attend classes twice per week, due to work
load. Sometimes she can attend classes on
Mondays, other times on Thursday only.
7. Key Characteristics
• Plans to move to Basel soon
• Doesn't speak any German/
Swiss German
• Wishes to move in with future
Swiss wife
Goals
• Wishes to understand the
basics before meeting his
future wife’s family
• Study everyday intensively so
he can move ASAP
Description/user story
Plans to move in to Switzerland soon having met his
future Swiss wife. Before moving he wants to get some
basic language skills.
Frustrations
• Can’t find enough swiss German material available
outside Switzerland.
• Can’t find a local course that teaches Swiss-German
Christophe Monet (41)
Lives in Lyon, France but hopes to move to Switzerland soon
Demographics:
Underwriting Operations Manager
M.B.A Statistics
8. Robert (34)
Plans to move to Zurich on a 2 year stint with his current company
Demographics:
SAP Technology Consultant
M.B.A in Logistics and Manufacturing
Key Characteristics
• Plans to move to Zurich soon
on a project
• Doesn't speak any German/
Swiss German
Description/user story
Going to Zurich for a 2 year stint with his current
company. The company pays for his language training
as part of the relocation starting upon arrival
Goals
• Being able to understand and
participate in discussions with
future colleagues in business
meeting
9. 9
Journey Map Canvas
Journey title:
Persona:
Notes and Annotations:
Scope of the Experience:
Touchpoints
and Devices
Thoughts
andFeelings
Value to
Customer
Value to
Organization
People and
Environment
Customer
Actions
Phase Before AfterLooking for a language learning course
“Shall I look online or find a language school in Zurich”?
“I want to learn fast”
“Shall I hire a teacher or find material and learn it by myself ”
Searches for swiss language learning courses online
Searches for schools in Zurich
Checks out books and other material at the local bookstore
Asks on forums for recommendations
Duolinguo
Books with CDs
School receptionist
Fluent Globe website
Forums
Gets closer to finding what she wants
Finds FG Website
“Not sure what they are offering me”
“I see two language books but none for learning Swiss”
“Do they offer an online course”
???
Signs up to free presentation out of curiosity
It’s for free anyway!
Sign-up
Free presentation with info about living in Zurich,
might learn something new
Email
Browses around to find more info
Browses around find more info
Too much to read, looses focus
FG
Sign-up
“I might as well, maybe I learn something new”
It’s for free anyway!
Nothing to lose
10. Stakeholder Perspective
• Communicate simplicity
• Favour visual over text
• Main target users - Mobile phone
• The product sign up funnel is super important
• Traditional web pages scroll vertically but phone horizontally
• When will people favour horizontal?
• Scroll bar - discoverability problem?
12. Obvious implementation of the
Home page
• Should be clear to the user what the company/ website is
all about
• Can link to other pages or landing pages
• The user has to search for more information on multiple
subpages
• Less content per page based on 1 minute attention span
• Should contain the the most essential pieces and exclude
unnecessary pieces
13. The purpose of the landing page
• Present a single offer
• All the benefits and important information are given
to the user
• Mailing list/ sign up product or service
• Use a clear call to action
How does it
work
Try a free
Lesson
I want to try
How does it
work?
14. Usability Testing
For this project we want to test if the following is true:
• Do users accomplish tasks better/faster with horizontal navigation
version vs the hamburger menu version?
• Will people are used to vertical scrolling but will find intuitive to
navigate horizontally using navigation buttons or swiping gesture?
• Frequent users on mobile will try to use swipe gestures to navigate
• Some users will still not know how to use the menu for navigation
• Sign ups increase if asked for mobile phone rather than email
address (We want to test this at a later stage)
WORK in PROGRESS
17. The only intensive
Swiss Deutsch
language course
for expats
We currently offer the course for you to study
over 1 to 3 months to learn Swiss German.
Study everyday and improve your
understanding of the language by playing
games!
The course is yours to keep so you can repeat it
at any time you want
Improve your understanding and
learn the local dialect
Learn by doing and playing!
We identified that landing pages
are even simpler than the home
page as they only have one flow.
Course Information
&
Course Signup
Having only one flow there is no
central navigation. The content
can have links but there is no
navigation paradigm.
The content is arranged as a
single scrolling page
Current view
Landing Page
18. We currently offer the course for you to study
over 1 to 3 months to learn Swiss German.
Study everyday and improve your
understanding of the language by playing
games!
The course is yours to keep so you can repeat it
at any time you want
Try the Course
Name
Phone No
Get App
Improve your understanding and
learn the local dialect
Learn by doing and playing!
We identified that landing pages
are even simpler than the home
page as they only have one flow.
Course Information
&
Course Signup
Having only one flow there is no
central navigation. The content
can have links but there is no
navigation paradigm.
The content is arranged as a
single scrolling page
Current view
Landing Page
19. Play as you learn
Learning a new language should be
engaging and never boring!
We believe that the best way to learn is by
doing and that is why games and exercises
are a core part of our teaching approach.
At the end of each lesson, you can put all
your new knowledge into practice by
solving puzzle games
Main><Philosophy
We are building an online educational
platform that employs audio, video and
games to help expats understand and
communicate in the local language. We aim
at using technology as a learning tool but
with human and personalised feedback.
About US
Since mobile screens
are much smaller
than desktop, I tried
to keep actual text to
a minimum and with
a lot of negative
space.
More room is better
for clarity and better
readability
20. The Second Brief
Re-design fluentglobe.com sign-up process that spans
website, App Store and Fluent Globe Today App.
Include visual variations as needed.
22. In terms of visual
design, I’ve opted for
a flat and functional
design, with simple
images that convey
messages more
quickly than detailed
illustrations
Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try the course
Contact >< Course
Rather than start
from scratch
the design
is loosely based on
Google Material
Design
to leverage the
existing web
components
23. When signing up the user
may be on the phone or
desktop, but the process
must continue on the
phone.
The user receives a
SMS with a unique link
to the course
If the App is installed the link
will open the App otherwise a
web page will open explaining
how to install the App.
Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try the course
Contact >< Course
Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try the course
Send
Hello Katty, Your new course is
ready at http://fluentglobe.com/
today/abc/def. Go there to start.
Sun, Sep 22, 4:18 PM
Fluent GlobeMessages Contact
App
Welco
me
Screen
24. Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try the course
Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try the course
Get text with link
GET INSTALL
FG
APP
25. If the user wants to do the
course on an iPad it will
still be possible as
Messages are shared with
the phone. So the link and
App can be opened on
the iPad the same way.
27. Experimenting with different backgrounds
About >< Contact
Our Philosophy
About >< Contact
Our Philosophy Our Philosophy
About ><Contact
Our Philosophy Our Philosophy
28. As the new website isn’t live yet we have yet to measure the metrics for the
new design.
Work in Progress