Creating a Consistent Experience — The Image Viewer
Collaborated to design a new image viewer maintained by a single scrum team, creating consistency for users while saving costs and labor.
Overview
FamilySearch is a nonprofit organization and website offering genealogical records, education, and software. The website currently operates 7 different image viewers across the site, each with unique tools and features. This experience has frustrated and confused our customers as we’ve expected them to relearn tools and navigation across the site. This project was a huge undertaking, and after consistent feedback and requests from users, we finally received the budget to move forward.
I teamed up with another designer and took the lead in combining these 7 image viewers, speaking with users to better empathize with their pain points, while collaborating with scrum teams to understand design decisions, eliminating unnecessary or outdated features.
Bite-sized summary
- Performed a design audit and found inconsistencies in the various image viewers, recognizing the wasted cost and effort to manage 7 versions.
- Researched examples of image viewers and recognized regularities that made them successful.
- Listed all the features currently included in the 7 image viewers, and worked with scrum teams to simplify and combine features.
- Designed mobile-first and followed up with a desktop prototype, utilizing testing to get user feedback.
- Iterated designs from the feedback received from users, as well as feasibility concerns from developers and product managers.
- Supported the scrum team building the designs for clarification and feasibility.
My Role
I took the lead researching, designing, prototyping, and running user tests while another designer provided suggestions and feedback.
1. The Challenge
FamilySearch currently operates 7 different image viewers across the site, each with unique tools and features. Designed, built, and currently maintained by individual scrum teams, none of the image viewers have a consistent experience, making it hard for our users to navigate and use each one. This inconsistent experience for our users has also become very expensive to maintain.
While working to combine these image viewers, I also had to plan and design for the future implementation of two new products I was working on with my scrum team. I needed to create an image viewer that would allow later experiences to integrate smoothly into the shared component.
2. Research
In order to better understand the various FamilySearch image viewer designs, I spoke with the original designers and development teams to understand the need for tools and features implemented.
I researched examples of image viewers from organizations such as Google, Facebook, Instagram, and Amazon to understand the implementation of their tools. These image viewers are great examples of how to simplify complex and powerful features of the image viewers into simplified designs and tools.
3. Design Goals & Process
Our goals were to create an easier customer experience, maintaining the popular features our users had grown accustomed to while eliminating unnecessary tools, creating a component that could be built and maintained by a single scrum team.
After the research process, I began to simultaneously design for both a mobile and a desktop image viewer, balancing the number of features and tools needed to complete certain tasks.
The mobile-first approach allowed me to create a more simplistic approach to the desktop version as well. I utilized progressive disclosure to hide and show features based on where the user was and what they were working on.
In order to determine when to hide and show features, I did a design audit on other industry image viewers, and on our new image viewer designs, determining how we could eliminate distractions while still allowing users to complete the task at hand.
A feature we chose to hide and show is the recenter and 100% zoom feature. When trying to closely examine a record, our users will zoom to 500% and pan around an image, trying to read the information. We found that once they were done, they wanted a quick way to return to the default zoom. In the current designs, we always display this icon. With the new designs, we chose to hide it while the user is at the default zoom, showing it once the user has zoomed or panned away from the default state.
Not only did these changes save space, but also make it a more personalized experience by showing the tools as the user needed them. When we tested these designs, the users loved not feeling overwhelmed by the options and the jarring differences from one image viewer to another.
4. User Testing & Feedback
After several iterations and design reviews, I created two desktop and mobile versions of the prototype. One was for viewing records, and the other for viewing memories. I created questions and prompts to test the designs and set up the user testing to get feedback. We wanted to learn if the placement of the tools was easy for our users to find and use, and also asked them to perform tasks to see if they could successfully complete them.
Since FamilySearch is an international organization, we set up multiple audiences to test various ages, ethnicities, and site experience.
After multiple rounds of user-testing and iterating, we created a final mockup and tested it again, making sure to test each feature in the different scenarios across the site to be sure users could still perform the various tasks. After collecting and organizing the results, we presented the new experience to a team of designers and product managers to assure that we met user’s needs for all their products.
5. Documentation
To keep consistency for the future of the image viewer, I documented the research, iterations, and the testing results. I then created documentation of the proper use of the image viewer component to help the developers building it as well as the designers using it for their designs to follow a consistent experience across FamilySearch.
6. Outcome
The image viewer is currently in the development stage, but our testing results showed that we will see an increase in the success rate of users being able to navigate and utilize the image viewer. Metrics we will be tracking include; the number of times users successfully complete index edits, tagging people, highlighting vital information, and inputting data.
7. Project Learnings
The Importance of Consistency
While designing for this component, it was reaffirmed to me the importance of keeping a consistent experience for our users. We have thousands of new registrants visiting our site weekly, and by creating a consistent look and feel, we will better help them navigate the complexities of the site.
Proximity
In previous image viewers, the controls were on the left side of the image viewer going down the page. When I first moved them, I got a lot of pushback from other designers. I AB tested both designs and was surprised by how consistently the users wanted the icons on the top right. The side sheet opens on the right and makes it close in proximity to the icons, and the users noticed when they had to do excess work.
