SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
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
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
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
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
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
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.
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
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
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
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?
Home page goals
Prototype
• To inform about the company, product or people
• Give people access to general information/ latest info
• Immediately present the main purpose and offering
of the company
“People won’t use your site if they can’t find their
way around it”

-Steve Krug 

Course><About
™ and © of Right Here Inc, 2016.
The only
Intensive
Swiss-
Deutsch
language
learning
course on
your phone
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
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?
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
To test our hypothesis, We have identified
and designed two navigation menus.
• A hamburger menu with a side panel
• An horizontal menu
Home
About
Philosophy
Course…
Contact
Course><About
™ and © of Right Here Inc, 2016.
The only
Intensive
Swiss-
Deutsch
learning
course on
your phone
™ and © of Right Here Inc, 2016.
The only
Intensive
Swiss-
Deutsch
learning
course on
your phone
We identified that there are only
two reasons to visit the website
home page.
Course Introduction
Company Information
Fewer choices:
With two choices there is no need for a
menu. The starting page becomes
simple.
The horizontal navigation gives the
user only two options, go right, or go
left. This makes it more straightforward
and avoids unnecessary distractions
By using horizontal
navigation the user swipes a
large canvas left or right
starting in the middle of the
canvas.
Current page
Home Page
Course><About
™ and © of Right Here Inc, 2016.
The only
Intensive
Swiss-
Deutsch
learning
course on
your phone
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
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
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
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.
Fluent globe sign up and info
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
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
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
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.
About >< Contact
™ and © of Right Here Inc, 2013.
Our Philosophy
About >< Contact
™ and © of Right Here Inc, 2013.
Our Philosophy
Experimenting with different typography
About >< Contact
™ and © of Right Here Inc, 2013.
Our Philosophy
Experimenting with different backgrounds
About >< Contact
Our Philosophy
About >< Contact
Our Philosophy Our Philosophy
About ><Contact
Our Philosophy Our Philosophy
As the new website isn’t live yet we have yet to measure the metrics for the
new design.
Work in Progress

Contenu connexe

Dernier

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Dernier (18)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

Fluent globe sign up and info

  • 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?
  • 11. Home page goals Prototype • To inform about the company, product or people • Give people access to general information/ latest info • Immediately present the main purpose and offering of the company “People won’t use your site if they can’t find their way around it” -Steve Krug Course><About ™ and © of Right Here Inc, 2016. The only Intensive Swiss- Deutsch language learning course on your phone
  • 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
  • 15. To test our hypothesis, We have identified and designed two navigation menus. • A hamburger menu with a side panel • An horizontal menu Home About Philosophy Course… Contact Course><About ™ and © of Right Here Inc, 2016. The only Intensive Swiss- Deutsch learning course on your phone ™ and © of Right Here Inc, 2016. The only Intensive Swiss- Deutsch learning course on your phone
  • 16. We identified that there are only two reasons to visit the website home page. Course Introduction Company Information Fewer choices: With two choices there is no need for a menu. The starting page becomes simple. The horizontal navigation gives the user only two options, go right, or go left. This makes it more straightforward and avoids unnecessary distractions By using horizontal navigation the user swipes a large canvas left or right starting in the middle of the canvas. Current page Home Page Course><About ™ and © of Right Here Inc, 2016. The only Intensive Swiss- Deutsch learning course on your phone
  • 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.
  • 26. About >< Contact ™ and © of Right Here Inc, 2013. Our Philosophy About >< Contact ™ and © of Right Here Inc, 2013. Our Philosophy Experimenting with different typography About >< Contact ™ and © of Right Here Inc, 2013. Our Philosophy
  • 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