Background

What started as an app to aid an amateur genealogist, kin/ish blossomed into a reimagining of what the family tree can look like. Research indicated there was a hole in the family tree market, a hole that ignored inclusion and creativity. The big players in this market rely on invasive data collecting and pose stifling limits on what the user is allowed to share in their community, kin/ish was created as a playful alternative. Add who you want, connect how you want and love who you want.

Role

UX Designer

Timeline

4 weeks

Goal

Design an app that lets the user create a family tree that resembles how their lives and relationships really look.

Step 1: Research

Market Trends

Family history and genealogy companies had been on a steady rise since 2000, initially offering users a way to research relatives and their lineage via public records. When DNA test kits came on the scene in 2012, these companies shifted focus and by 2017 they saw huge numbers flocking to their sites, pairing their DNA results with their family histories. However, in the past few years kit sales have declined and larger companies are going back to their roots, introducing new or updated apps for creating family trees and researching ancestry.

Since most of these companies had spent years marketing DNA testing, they missed opportunities to engage users who didn't opt in. Plus, most relied on the user giving up a lot of their privacy to use the app. This opened some doors for smaller companies to enter the market, but their scope and functionality felt very narrow. This is where I originally saw the app positioned, but upon digging deeper I uncovered another opportunity in the market.

The companies at the forefront of the genealogy game are owned by or have affiliations with the Mormon faith, a faith that views alternate lifestyles unfavorably (to say the least). These apps didn’t feel inclusive (or totally intuitive for that matter). For instance, one app had male, female or unknown as the only choices for gender. What about those who are non-binary, cisgender or transgender? Another app, under their image guidelines, did not allow images of cross dressing or kissing on the lips. And more than one app made it confusing and difficult to show parents as divorced. Plus, how would a user feel knowing the app they use is owned by an entity that views their lifestyle as a sin?

This opened up the field for a product that promotes inclusivity and gives people an opportunity to create a family tree that is representative of their lifestyle - letting them define what that family looks like while providing a safe place to do so. Families are complex systems and not all are 100% biological, why not embrace this and market it accordingly? Imagine a place that lets you safely add partners, best friends and step parents; where you can connect with friends and see their family trees and how they relate to yours. A social platform with a different vantage point.

Competitive Audit

Although my research showed there was a niche that could be filled, I understood that it would be the marketing of the product that would really differentiate it. The app still had to function like a family tree, so I did a deeper evaluation of competitor's assets, motivations and weaknesses. Kin/ish had to be robust, but easy to use; fun but also valuable. I also saw it should be self contained and not rely on DNA tests or public records - it would solely be a creation of the user.

Provisional Personas

With this first batch of data, I created three persona sketches I felt encapsulated potential users. These would also aid in formulating my interview questions.

Interviews

The initial interviews I conducted centered around the functionality of the app and not the niche I discovered. I knew before marketing the app as an alternative product I first needed to be certain it was functional and viable to everyone. I set out to gain insight into how people currently construct family trees, collect familial artifacts and share their findings.

I interviewed 1 male and 2 female participants, aged 36-49. Patterns immediately started showing. Like how everyone used their phones to take photos, but all used different platforms for saving them - their phone, the cloud, Google photos, Shutterstock, Dropbox, Facebook. Or how none of them organized their photos. Or they all searched for photos on their phone the same way - by scrolling, scrolling and more scrolling.

I used their answers to create an Empathy Map to clearly outline similar behaviors.

Empathy Map

Persona

I now had enough data to really hone in on a potential user and create a model I could use to continue developing and testing against. Adrienne was now the litmus test all my further design decisions had to pass.

Empathy Map

With my persona created I could dig a little deeper into her motivations to understand how to design the best experience.

Feature Roadmap

Based on the information collected so far, I created a hierarchy for the product features to help keep us on track for release.

Step 2: IA, Journeys and Wireframes

Sitemap

I wanted the product to appear simple, but contain robust functionality under the hood. The initial IA for the home screen was tricky to layout for this reason; I had to decide where most of the functions would reside while still keeping the app intuitive. After many iterations and "testing" I landed on this model.

User Flow

To aid in visualizing a user's journey, I outlined the steps a user would take to register, create a profile and add a connection. I could see where a user might experience frustration or possibly exit the app as well as what a successful journey might look like.

Sketches

Armed with the persona, research and some site examples from the owner I was ready to start drafting the first ideas for the site.

Wireframes

I did some quick sketches to get an idea of basic screen layouts and then jumped into Figma to create my wireframes. I laid out the pages to give a sense of structure, flow, content and functionality. Can the user easily understand how the app flows and functions? Can the user correct mistakes and backtrack? Is my proposed IA working or does it need to be updated? How does this model fulfill my persona's needs? These were some of the questions I kept posing to myself during this process.

UI Design

Moodboard

I had a few conversations with the owner about how the site should look and feel, but I still wanted to comb the the web for images that would help solidify the tone and visual direction of the design.

Step 3: UI Design

UI Toolkit

Once my wireframes were functional, I jumped headfirst into the UI design. Since the main page would be a family tree populated by photos, I felt it should be toned down and subtle, but still pop where it needed to. I opted for an off-white background, but used shapes and shades of color to keep it interesting. While looking through images of trees and nature to get inspired, I found a deep green shade that evoked growth, peace and security. To contrast, I opted for a red that would add a bit of fire to the design. This gave me the pop I wanted and was perfect for the main action button. With colors chosen, I tested for accessibility to ensure everyone could use the app.

Homepage Iterations

The homepage would dictate the rest of my design, so I knew I had to get it right. I started with a hero containing copy and a CTA that pointed to the wellness section. I then recalled my earliest contact with the owner and remembered that selling products was her initial objective. The next couple of iterations weren't hitting the mark, so I tried an animation. The owner liked it, but we ultimately agreed it wasn't necessary. We both felt the site should look professional, but still maintain an element of DIY ethos.

Pages

I started the UI design with just a few pages so I could get a feel of how the shapes, colors and fonts were working together. The design is minimal, but using form and color I created an environment that had depth and movement. The UI is simple and understated, but still a little bubbly. Happy with the design, I moved into prototyping.

Step 4: Prototyping

Making Connections

I built out the rest of my pages for usability testing. I added some micro-interactions to give the testers a more realistic experience and created back buttons and some menu dives for added functionality. The flow felt right and initial "light" testing came back positive. I felt this portion of the app's functionality was ready for real usability testing.

You can check out my original prototype here.

Step 5: Usability Testing

Background

I recruited three participants to take part in my Usability Testing. Testing was used to gain insight into the app’s basic functionality - signing up and adding a connection. This would be an in person, unprompted test, so I asked the participants to take notes and save questions for the end of testing. After a brief explanation of the app and its intended functionality I had each participant run through the scenario.

Scenario

Your name is Adrienne and you live in San Jose with your wife, adopted son and dog, Huxley. You just downloaded this new family tree app that your coworker turned you onto and you’re going to create a profile and then add your wife as a connection.

Tasks

• Create an account

• Add a connection
‍

Participant 1
Age 46
Vintage Shop Owner

Participant 2
Age 39
Senior Buyer

Participant 3
Age 59
Jewelry Designer

Outcome

Feelings about the UI and the app’s intended functionality were very favorable. Two of the participants were tech savvy and didn’t have any issues setting up their initial profiles. The third had a bit of hesitation during this process, but was eventually able to complete her profile without prompts. After their profile setup, 2 of the 3 participants were confused about how to add a connection. Once prompted, both were able to create the connection easily since it mimicked the profile creation process. All three participants noted that there was no way to differentiate friends and family. Post testing discussions about the app’s future functionality were met with peaked curiosity and excitement.

Positives

• Over all feelings on the site were positive. All of the participants thought it was cohesive and responded in ways they anticipated. There also was a positive response to the look of the Shop and the product pages.

• Although no one entered into the Shop the same way, everyone thought the navigation made sense. One participant even commented on how easy it was to get around.

• Copy, especially in the Coaching section, got positive feedback. All of the participants noted at one point that it made the process understandable. This was an especially good note for when we design the final implementation.

• The checkout funnel was also a win. I tried to keep everything accessible at every step rather than going page to page which seemed to have worked well.

Opportunities
‍
• Participants had no way to add or save an item to a Favorites section. I intended to add this, but forgot during the design process. Adding an icon or button on the product page should remedy this.

• There was a callout from one participant to add a link to the Philosophy section while learning about coaching. She felt it would help a user to quickly learn about the owner before she makes her decision. This will be included in the next iteration.
‍
• The Ingredients/Directions/Benefits section on the product page was confusing to everyone. How they function wasn't intuitive. A noticeable hover state may fix this issue.

• Two participants made note of the image on the coaching page saying it looked "young". There were also minor comments about some images being "boring". Even though most of the images are place holders, it was good to note how important image choices will be.

Step 6: Iterations and Next Steps

Iterations

1st Iteration: Based on the feedback I received from testing, I went back and added two prompts - one after the user creates their account and the other when they enter their profile for the first time. The first prompt fixed the issue of users not knowing how the home page functions and the second let users know how to add Connections, Photos, etc.

I then iterated on the end home page which demonstrated what a populated tree might look like. Users were confused about differentiating connections - who are friends and who are family? Using color was an obvious choice for a fix, but proved trickier to design. I wanted to keep the UI clean, so I didn't want a lot of colors vying for attention. While working on this issue I also started to rethink the lines attaching the connections. Rounding the connections helped make the colors appear more subtle. The two pieces together, color and shape, helped solve the confusion and added to the UI.

2nd Iteration: For the next iteration I took my design from Figma and imported it into Framer. I chose to build it there because I wanted more robust prototyping with better micro-interactions and also wanted to create a more real-world feel for testing. If the product felt more playful users would hopefully learn faster and I wouldn't have to prompt. Now, instead of going to the Home page after you create your profile, you go directly onto your profile page which has a red button that is screaming to pushed. I also created more interactions within the profile section to let the users play around and get acquainted with some functionality.

Where to click to add a connection becomes more apparent. Plus, I have now given the user a way to interact with the product, letting them explore and learn how it functions on their own. Initial quick and informal testing yielded much better results. Users learnability improved and they seemed to be more engaged with the product. Of course, there is still more to do, but these design choices positively impacted kin/ish's usability.
See below for the 2nd prototype iteration.

Next Steps

Kin/ish has a lot of potential to disrupt the current view of family tree and ancestry apps. Positioned as an alternative to traditional offerings, as well being inclusive and less invasive, it has an opportunity to give people ownership over their definition of what a family can be. I plan to continue developing aspects and functionalities of the app, with the hopes of seeing it come to fruition. I would like to add a share function to link trees between friends, have messaging, introduce the ability to create family or friend groups and eventually build out a desktop version. This is a traditional product with a new vantage point and it will be challenging and inspiring to see what comes next.