Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Audience
The typical user will be casually browsing the website while talking to a
friend or acquaintance. Perhaps the...
Original website better on desktop than mobile
60+% of visitors used an iPhone
Separate layouts desktop/phone a nuisance
T...
The Brief
Re-design fluentglobe.com home page for scenarios:
1) Get general info on company or people
2) Specific product ...
Design Process
What is
wanted? Analysis Design
Prototype
Implement
&
Deploy
Evaluation
Heuristics
What is there
vs what is...
User Research and Personas
For this project, we have brainstormed personas that are
representative users of Fluent Globe’s...
Emily Davis (36)
American expat, living in Zurich for 2 years
Demographics:
Marketing assistant
B.B.A Business Administrat...
Key Characteristics
• Plans to move to Basel soon
• Doesn't speak any German/
Swiss German
• Wishes to move in with future...
Robert (34)
Plans to move to Zurich on a 2 year stint with his current company
Demographics:
SAP Technology Consultant
M.B...
9
Journey Map Canvas
Journey title:
Persona:
Notes and Annotations:
Scope of the Experience:
Touchpoints
and Devices
Thoug...
Stakeholder Perspective
• Communicate simplicity
• Favour visual over text
• Main target users - Mobile phone
• The produc...
Home page goals
Prototype
• To inform about the company, product or people
• Give people access to general information/ la...
Obvious implementation of the
Home page
• Should be clear to the user what the company/ website is
all about
• Can link to...
The purpose of the landing page
• Present a single offer
• All the benefits and important information are given
to the use...
Usability Testing
For this project we want to test if the following is true:
• Do users accomplish tasks better/faster wit...
To test our hypothesis, We have identified
and designed two navigation menus.
• A hamburger menu with a side panel
• An ho...
We identified that there are only
two reasons to visit the website
home page.
Course Introduction
Company Information
Fewe...
The only intensive
Swiss Deutsch
language course
for expats
We currently offer the course for you to study
over 1 to 3 mon...
We currently offer the course for you to study
over 1 to 3 months to learn Swiss German.
Study everyday and improve your
u...
Play as you learn
Learning a new language should be
engaging and never boring!
We believe that the best way to learn is by...
The Second Brief
Re-design fluentglobe.com sign-up process that spans
website, App Store and Fluent Globe Today App.
Inclu...
In terms of visual
design, I’ve opted for
a flat and functional
design, with simple
images that convey
messages more
quick...
When signing up the user
may be on the phone or
desktop, but the process
must continue on the
phone.
The user receives a
S...
Try the Course
Name
Phone No
Get App
The course is available on iPhone and iPad.
You will receive an access code to
try th...
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...
About >< Contact
™ and © of Right Here Inc, 2013.
Our Philosophy
About >< Contact
™ and © of Right Here Inc, 2013.
Our Phi...
Experimenting with different backgrounds
About >< Contact
Our Philosophy
About >< Contact
Our Philosophy Our Philosophy
Ab...
As the new website isn’t live yet we have yet to measure the metrics for the
new design.
Work in Progress
Fluent globe sign up and info
Upcoming SlideShare
Loading in …5
×

of

Fluent globe sign up and info Slide 1 Fluent globe sign up and info Slide 2 Fluent globe sign up and info Slide 3 Fluent globe sign up and info Slide 4 Fluent globe sign up and info Slide 5 Fluent globe sign up and info Slide 6 Fluent globe sign up and info Slide 7 Fluent globe sign up and info Slide 8 Fluent globe sign up and info Slide 9 Fluent globe sign up and info Slide 10 Fluent globe sign up and info Slide 11 Fluent globe sign up and info Slide 12 Fluent globe sign up and info Slide 13 Fluent globe sign up and info Slide 14 Fluent globe sign up and info Slide 15 Fluent globe sign up and info Slide 16 Fluent globe sign up and info Slide 17 Fluent globe sign up and info Slide 18 Fluent globe sign up and info Slide 19 Fluent globe sign up and info Slide 20 Fluent globe sign up and info Slide 21 Fluent globe sign up and info Slide 22 Fluent globe sign up and info Slide 23 Fluent globe sign up and info Slide 24 Fluent globe sign up and info Slide 25 Fluent globe sign up and info Slide 26 Fluent globe sign up and info Slide 27 Fluent globe sign up and info Slide 28
Upcoming SlideShare
Glide Volunteer Experience - When Needed
Next
Download to read offline and view in fullscreen.

Download to read offline

Fluent globe sign up and info

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Fluent globe sign up and info

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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.
  25. 25. 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
  26. 26. Experimenting with different backgrounds About >< Contact Our Philosophy About >< Contact Our Philosophy Our Philosophy About ><Contact Our Philosophy Our Philosophy
  27. 27. As the new website isn’t live yet we have yet to measure the metrics for the new design. Work in Progress

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.

Views

Total views

45

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×