AncesTrip is a mash-up of two popular apps, designed to encourage a connection to one's family history.
Combine two existing apps to create an experience that promotes a new behavior.
Adobe XD, Adobe Premiere Pro, Adobe Audition
Sketching, wireframing, UI design, prototyping, video editing, secondary research, personas, FTUE design, microinteractions
Behavior, Michael Chanover
7 weeks, Fall 2020
A video demonstration of the main AncesTrip features.
A video demonstration of the AncesTrip first time user experience.
The project brief gave me a lot of leeway to choose my direction for this project. Having done a similar project in a previous course, it took a bit of thinking to find the right two apps to mash up in this project.
I started by thinking about what behavior I would want to encourage, and I looked through my phone to take inspiration from the apps that I use. I thought up a few different options and shared them in class.
App mash-up concepts.
I ultimately decided to pursue the Ancestry and Roadtrippers combination.
Ancestry is an app that allows you to build your family tree and access a database of people and documents to discover your family history. My point of view was that Ancestry lets you learn and understand your family history, but what's next? What if you could experience it?
That's where Roadtrippers comes in. This is an app that lets you build a customized road trip plan throughout the US, using a huge database of all kinds of stops and attractions to visit along the way.
Final Ancestry + Roadtrippers mash-up.
HMW . . . ?
Now that my apps were decided on, it was time to start designing the experience. I used a "How Might We" question to guide me.
How might we create an understanding of and appreciation for one's family history?
I conducted secondary research to understand the target audience for this app: people who are interested in genealogy. Here's what I learned:
1. As of 2019, over 25 million people have taken an at-home ancestry test.
2. Family history research is the 2nd most popular hobby in the U.S.
3. Over 90 million family trees have been created using Ancestry.com.
4. There are generally 3 groups of people in genealogy:
1) interested only in some specific ancestors,
2) keeps a copy of a family tree, but doesn’t do any research, and
3) researches and adds to family tree consistently.
This affirmed to me that there was, in fact, an audience for a product like this – a rather large one, in fact. I'd been concerned that this topic might be too niche, but I was pleasantly surprised by how easy it was to find realistic users to interview.
I interviewed 3 people who had varying levels of interest in genealogy. All of them had taken 1 or more home DNA tests. Their motivations were: to find DNA relatives (e.g. biological father), learn about health risks, to learn about ancestry, and simply out of general curiosity.
Insights from my research enabled me to create 3 personas, 1 representing each type of user that my research had identified.
Provisional personas for 3 distinct types of users.
The next step was to determine how to combine the apps. I thought about which existing features might fit together harmoniously, which interface design would best accommodate new features, and how I might be able to leverage functions of both apps to satisfy my goal. I chose to use Roadtrippers' design primarily, and incorporate aspects of Ancestry's when needed.
Sketches for 3 features: trip builder, pre-made trips, and check-ins.
Working in Adobe XD, I took screenshots of my mash-up apps and used them as a guide for my wireframes. I used Roadtrippers as a base, but modified the color scheme and language of icons to suit my needs. Using the existing format for the map and itinerary view, I integrated Ancestry's design into other parts of the AncesTrip app, most notably in the timeline feature.
App wireframes based on existing app designs.
The Final Deliverable
After getting feedback from my classmates and professor on the wireframes, I made some adjustments and brought the screens to a higher fidelity. I also had to design microinteractions to make the prototype interactive. Below are a selection of screens that showcase the main features of AncesTrip.
Final UI design: (1) trip builder feature, (2) family timeline and check-in feature, (3) pre-made trip feature.
First Time User Experience
A GOOD FTUE
The follow-up to this mash-up project was to design the first-time user experience for the app. This was my first foray into this kind of design, so we kicked it off with a group brainstorm about what a good FTUE ought to address.
Group brainstorming activity.
I went back to working solo with new ideas as to what features my FTUE needed to have to be successful. I started sketching out designs for a set of features:
1. Screens that provide an overview of the app's features. These will show the user the value that AncesTrip can offer them, and they will see that they can use AncesTrip to accomplish their goals.
2. Creating an account and connecting to your Ancestry.com account. This allows the user to quickly transfer all of their relevant information into AncesTrip.
3. Enabling location sharing permissions. Privacy is a huge issue to me, and I want my designs to respect it. This feature builds trust with the user by requesting permission and explaining why location details are needed.
4. A guided walkthrough. This helps familiarize users with the app and it's features.
FTUE concept sketches.
FEEDBACK AND TESTING
I reached out to both my classmates and potential users for feedback on my early sketches. I wanted to know if the features I had sketched out and listed seemed adequate. I was also concerned about my FTUE being too boring or unoriginal.
With new ideas in mind thanks to the peer feedback I received, I was able to move on to creating screens for my FTUE. One thing I kept in mind was keeping thee visual style consistent with the mash-up app. Since a lot of the design of the AncesTrip app was based on an existing app, I wanted to try to emulate that style in the design of the FTUE so the experience didn't feel disjointed.
Screens from the first version of the FTUE UI design.
As you can see in the slideshow below, I received a lot of helpful comments from my classmates that gave me a clear way to push the designs forward. Some key things I took from the critique were that the color scheme was far too simplistic and the process as a whole had the potential to take too long for some users.
The next iteration of the FTUE design and feedback from classmates.
I conducted usability tests with 3 potential users to learn what needed to change in the final version of the app. This is what I heard:
1. “The process is easy and intuitive because it all felt natural. I never felt lost, like ‘What am I supposed to do?’”
2. Connecting to another existing app is useful. It’s convenient to not have to start all over for this app, and it’s nice that it saves time.
3. The guided walkthrough is helpful for users who are less experienced
with technology. The option to skip past time-consuming features is appreciated by users who are tech-savvy.
4. The help button is a useful feature for a user who isn’t very
knowledgeable about the app yet.
5. The feature introduction screens make users “excited” to see the rest of
the app and try it themselves.
There were still some things left to address at this point. I fixed some things that had been pointed out to me earlier, but there were still other issues coming up.
1. The color scheme of the FTUE is still too monochrome. There are other colors that I used in the main experience, so they could be integrated into the FTUE, as well.
2. The whole process might feel like it drags on a bit too long for a more experienced , tech savvy user. If users could skip certain parts, it might feel more customized and enjoyable for them.
3. The green cursor used in the walkthrough is confusing. It was intended to show certain interactions like swiping left or right and dragging up or down, but its purpose was not clearly understood by testers.
With a clear vision of what wasn't working and what needed to be fixed to improve the FTUE, I created the final version of the designs.
Final FTUE designs: (1) onboarding, (2) sign up, (3) questionnaire, (4) walkthrough.
Of course, there needs to be a way to gauge the effectiveness of all of these features. I created a list of which metrics to track to ensure that the FTUE was working as intended and whether or not the app was successful in creating a behavior change in users.
WHAT I LEARNED
This project taught me an important lesson about a really important skill in design: brevity. Early on in the mash-up project, I wasn't interpreting the critiques I received from classmates in a useful way. When people suggested new features, I tried to find a way to incorporate them. However, this got out of hand really quickly. I put together a video to submit at the end of the project, and to be honest, it wasn't the quality that it should have been.
I tried to cram all of the content that I could into the video's 3 minute time limit, and the poor editing ended up completely detracting from all of the work I put into the app's design. Everything went too fast, and no one could really understand what my app was about because of that. I learned a hard, but important lesson about exercising more discretion when presenting my work. I realized later that there were things that weren't important and could have been cut from the video, but in the moment, I couldn't see that.
However, I also realized that design is never really "done" just because you've reached the deadline. Unhappy with the way I concluded the project, I reached out to my professor and was able to create a new, revised version of my demo video. Though it was hard to accept what initially felt like a failure, I learned how to turn my lack of success into an opportunity for growth.
This my PDF presentation on the AncesTrip FTUE.