FamilySearch Navigation - Research and Design Proposals (2017-2019 version)
Tablet and Mobile Main Problems
Preface
FamilySearch used to have a carousel on their homepage, that would show all of the different parts of the website. In 2016 we redesigned the logged-in homepage and got rid of the carousel to make the page more user friendly and give users more tools to do their family history. This change effected the mobile and tablet experience more than we thought it would. Following are the main problems and complaints that we found.
Problem 1:
Users, once the carousel was gone complained that they couldn’t navigate the website anymore. We kept reading comments such as:
"There is no direct link to my family tree. When I am on a home page I expect to be able to navigate easily."
"Not having the links like before on the home page makes it a lot more difficult to get to the family tree page. Frustrating!"
"This is too hard for the average person, can't find where to sign in and do work. Go back to the other sign in. Love FamilySearch"
"unable to pull up my family tree"
"There needs to be a my family tree, memories, record search and indexing on the homepage when I log in..... When I'm at a hope page I expect to be able to navigate."
"When I log on to a website I expect to be able to navigate from the home Screen.... This is a family history website. The most important thing my family tree NEEDS to be one click away."
"Well simple put I hate this set up. There NEEDS to be a button to get directly to my family tree. From a home Screen you should easily be able to navigate to the rest of he website...."
"The most important Button on this page is now gone. IT SHOULD TAKE ONE CLICK TO GET TO MY FAMILY TREE NOT MORE THEN THAT."
Then we got comments like these that didn't make any sense:
"Clicking on the FamilySearch logo in the top left corner only reloads the page. Sad"
"very hard to return to home page"
"I liked the old tabs better E.I. Temple, memories, search, indexing, etc."
As we were reading comments and feedback my manager came to the conclusion that we had to create a solution that would alert users that the navigation was still available on the top of the page. It was hard for me to believe that users didn't see the navigation, but I came up with options for my manger anyway.
Here are some quick mockups I created to solve the problem:
The more I read the comments and the more I thought about the problem I was solving, the more it didn't feel right. I felt like I was solving the wrong problem, it was amazing to me that users didn't see the main navigation! As I kept reading comments, there were a couple that caught my attention.
"There isn't a link to my family tree, memories, searching records, or indexing as there should be. When I am in a home page I expect to easily navigate even on a tablet...."
07 December 2016 - Tablet
"I miss the links at the top of the page that allows you to also click on Family Tree, Search, Memories and Temple. Had to look to find it buried under the 3 horizontal bars in the top right corner. I'm using Windows 10 and the browser is Chrome. I would still recommend the site, just don't like things hidden."
17 December 2016 - Mobile
"I am a blind person, and definitely not a computer jockey. I do appreciate your adding more information about my family members, but the site is confusing to me now as to where to locate the tabs I primarily use; Family tree, research, and temple. Please replace those tabs or tell me how to navigate this new page to other areas within this site."
17 December 2016 - Mobile
"Where the heck do I find my family tree so I can do genealogy?”
07 December 2016, 11:42:09 - Tablet
" Very hard to navigate”
27 November 2016, 14:12:25 - Desktop (866x380)
"I usually start off my search by going to my family tree. Where is that option on this page? When I do my research I prefer to have all the tools I need accessible”
26 November 2016, 08:05:15 - Tablet
I realized that ALL of the comments came from users that used mobile and tablet. All of a sudden all of those comments made sense!
I figured out that the mobile and tablet users never used the hamburger menu, but they used the carousel, uniquely as a navigation bar! Every time they would have to go from a page to another they would tap on the big FamilySearch Logo, and tap to the next section of the website they wanted to go to. That was the reason for this specific comment:
"Clicking on the FamilySearch logo in the top left corner only reloads the page. Sad"
The main problem we had in the mobile and tablet version of our website was that the main thing in the nav bar was the logo. And a hamburger menu in the top right corner. At that time our audience included mostly older people that weren't super familiar with technology.
This was our homepage on mobile before it was re-designed:
Problem 2:
Even those that figured out that they needed to use the hamburger menu to navigate, they were presented with different versions of the same menu, depending on which part of the website they were in. The hamburger menu and sub-navigation needs to be intuitive, consistent and work the same across apps. At the moment we didn't have a consistent experience as shown by these screenshots:
Hamburger Menu (before redesign)
depending on the section of the website the user was on, a different navigation drawer was available. Every team recreated the drawer instead of sharing a component. At that time we didn't have a solid style guide with components and shared library like we do right now.
Sub-navigation on tablet (before redesign)
Problem 3:
Weight of the code and speed. The way the hamburger menu, header and footer worked at the time, added a lot of weight and loading time to the site:
In order to work at that time the hamburger menu and the navigation:
used 274 DOM elements
weighted 375kb
took up to 3s to render on 3G (including all analytics)
Solutions and changes made:
NAVIGATION
1. Icons and words versus just an hamburger menu
2. The FamilySearch logo “only mark” version is used instead of the full logo (only on Logged -In)
3. A “More” icon has been added, to access the sub-navigation, help and account information.
4. Switched the order of the apps, from: Family Tree, Memories, Search … to: Family Tree, Search ,
Memories, since the search section of the website was more used than memories.
5. Changed the name of Family Tree to Tree for space purposes. Because the website was translated
in 10 languages at the time, Family Tree was taking too much space when translated.
6. Help Others moved out from the sub-navigation and placed inside the Hamburger Menu
7. As device size gets smaller, the icons move out of the navigation bar but are available in the
hamburger menu
8. On Logged Out, the sign in and create a free account are inside the drawer, the icons are shown
next to the full FamilySearch logo as many as they fit in the space available to a min of 2 icons
besides the FamilySearch logo and the "more" icon.
HAMBURGER MENU
1. Removed Footer
2. Simplified UI, with collapsable menu
3. Removed section division
4. Added Help Others and Volunteer to Help menu
5. Highlight in bold to know where you are
6. Added Icons to the menus to keep consistency with the navigation
Breakpoints
The breakpoints were the same as the FamilySearch style guide breakpoints, instead of being custom breakpoints just for the navigation.
Speed and code difference:
Changes (Visually shown)
Invision prototype (mobile):
