Truss - UX and UI Case Study

Truss

An app for staying meaningfully connected with the people you care about the most.

View Truss Protoype

Concept

There are currently many, many options for people to stay in touch with each other; we all know about texting, Snapchat, Skype, Facebook Messenger, Gchat, and the numerous other communication apps. These apps are excellent at facilitating superficial interactions - but what they are lacking is an intent to maintain and create more susbstantial bonds with the people that matter most to you.

My Role

Developed the concept, conducted market research and user interviews, defined market opportunity and target audience, developed personas, iteratively refined the feature inventory and feature prioritization, made user flows, sitemap, low fidelity and high fidelity wireframes, created logomarks, designed comprehensive high fidelity UI mockups and basic screen flow prototypes.

Product Development Process

Initial User Research

After preparing a discussion guide, I conducted a series of user research interviews with male and female users, aged 25-41. I arranged the key findings from the interviews into an affinity map, which proved to be very influential on the ultimate outcome of Truss.


The areas that users proved to be most concerned with were:

  • Frequency of interactions
  • Content and quality of interactions (what is actually discussed)
  • Methods used to interact
  • Barriers to quality interactions
  • What it means to feel connected
  • Satisfaction with current levels of conncetion
  • Duration of interaction
  • Initiation of interactions and what it means if unevenly distributed

Why do we need a new messaging app?

  • Users said they feel far more connected to people that they interact with in person; users do not feel truly connected to the people they interact with almost entirely via apps.

  • Feeling connected has a strong relationship to the authenticity of interactions and feeling in the moment; essentially, users would feel more connected if they were using apps to discuss what they would be talking about in a face to face context. Users feel that the flow and "language" of messaging apps is inherently different than face to face interactions.

  • Users like the volume and ease of use with messaging apps, but would feel meaningfully connected if the content of the conversations was better.

Market Research

I looked at every app mentioned in the interviews as well as others that research revealed to be in popular use. I made a feature inventory from all of the important and common features found in these apps to assess what was critical and if there were any opportunity spaces.

Defining the Product

Taking the user interview and market research findings into account, I wrote personas for some different likely users. This app has a pretty broad appeal - people across a wide range of ages and backgrounds seem likely to want to feel more connected to the people they care about the most. The most common user trait would likely be "tech savvy users who currently frequently use messaging apps on their mobile devices." 

From here I began to visually brainstorm some app functionality that went beyond what people already expect in their messaging apps, including some "this might actually be good" ideas as well as some "impossibly bad" outcomes that paid no regard to actual technological limitations.

Insight from the interviews, personas, and brainstormed user scenarios allowed me to formalize a problem statement:

People who want to feel more connected need a way to have meaningful interactions with their Tier 1 friends and family, because the interactions they have now feel largely superficial.

We believe that creating an experience that increases the quality of the small interactions that people are used to from texting and social media will achieve a larger feeling of connectedness to the people we care about the most.

Once the problem was clearly defined, I was able to set down a prioritized feature list.


The features in the High Impact + Unexpected quadrant were the ones that would be the biggest product differentiators. In particular, I felt that limiting the friends list would be effective in keeping the app focused on "meaningful connections to the people you really care about" and not "just another messaging app." Furthermore, the user research led me to create a new feature called Topics, where periodically when a user opened the app, she would be seamlessly prompted to add a Topic about whatever was on her mind, something she would love to discuss with her friends or family if they were having a face to face conversation. It is my hope that integrating Topics into the chats will be the feature that inarguably differntiates Truss, and that quantifiably elevates the feeling of connectedness in Truss users.

User Testing

At this point I moved into creating an initial sitemap, and then charting some user flows.

I made a list of all the navigation items I thought I would need and did a card sorting exercise with my test users to see if the groupings I had in mind were logical. I first asked them to do an open sort, where they orgainized the features into groupings that made sense to them.

I then gave them the categories I had in mind and asked them to sort the features into my categories in a closed card sorting exercise.

The biggest takeaway was that there seemed to be some friction between what I was envisioning with Topics and Chats and how the test users wanted to organize them, although this was not entirely unexpected because the idea of Topics is not a familiar one in messaging apps. I used these findings to make an adjusted and more detailed sitemap that was aligned with what the test users said was more intuitive.

The next step was to make low fidelity paper prototypes to test against basic user task scenarios, and asked users how they would complete specific tasks as they handled the paper prototype screens. Adjusting from this feedback, I moved to digital low-fidelity mockups in InVision that I once again tested with users for given task scenarios.

User feedback from the low fidelity prototypes was extremely valuable, leading to usability improvements in the "Sign Up" helper screens, the "Invite Friends" screens, the "Add Friends to Chat" screens, and the "How to Use Topics" helper screens. 

High Fidelity Wireframes

The final step before jumping into actual UI design was to do one more round of user testing with high fidelity wireframes. Below are some of the more complex screens, although I made high fidelity wireframes for every app screen.

Feedback 

When I collected the feedback and plugged it into a Plus/Delta format, some more nuggets surfaced. I noticed that the feedback was becoming less about features and navigation and more about visual layout stuff, which I took to be a good sign. The most notable UI changes were to the Topics and Topic-specific chat. screens

UI Design

The first thing I set about doing in this phase was attempting to define a color palette. I had received multiple pieces of feedback that the Topics should be colored differently from each other, and I also wanted each chat to have its own color theme - there were going to be a lot of colors in this app and keeping things looking organized would be a challenge. I did want the app to feel intuitive and inviting, and landed on a UI color system of orange + blue + green that I could dial back to be very soft if needed, while the tags for the Topics would be very saturated and high contrast to encourage interaction. And because orange + blue + green were all "system colors" that were intended to have equal hierarchy, I needed a color that I could use for highly visible, high priority UI pieces like CTA buttons and links. I landed on a bright purple, which not coincidentally, isn't a primary branded color for any of the competitor apps on the market.

From there, it was a matter of designing all the components and defining styles in Sketch while maintaining a clear visual hierarchy and thinking about the various interactive states. Below are some of the key screens:

Prototyping

Using the high fidelity UI screens, I made a fully functional screen flow prototype in InVision, which can be viewed in a browser or on a phone here. As a further step, I am currently working on some screen transition animations in Principle.