Role.
UX Research, UI development team lead
Time.
8 months
Tools.
Figma, Android Studio
Methods.
Interview, survey, comparative research, user testing, high-fidelity prototyping, UI development

Background.

A secure communication structure.

Just in 2019, there were massive social media and messaging data breaches threatening millions of users’ privacy. The current hierarchical internet structure makes it powerful yet could leave its users vulnerable.

Under the hierarchical structure, every post and message can be traced back to a number of servers and routers.

Is there a real alternative to help internet users communicate safely without worrying about their data being leaked or scraped?

Our team at the University of Michigan was prospecting an Android microblogging app to allow all communication to be updated along a network of users, with all data kept locally on their devices. This peer-to-peer (P2P) communication is based on Bluetooth and delay-tolerant networking.

P2P technology helps a user connect with another user directly or through a network of users. The user is the server and the bridge.

"Hello, we are Bluetooth Low Energy and delay-tolerant networking (:"

Therefore we came up with

Lyn

22 year-old college student
Active social media user
Currently using P2P communication apps

Needs.

“Full control of my personal information and online chats.”

“Safe, high-quality online community.”

Frustrations.

“This seems secure but I’m not sure how it works.”

”How can I find topics or other contacts?”

“I don't know if I'm currently connected.”

Design goals.

Then how might we help Lyn

01
Understand the app context.
02
Explore interested topics.
03
Manage her connection status.

Early stage design.

We drafted early mockups and asked for feedback from both users and the big team.

Feedback from early tests and internal critique.

Users hope to be communicated about the technology before exploring the app features, and wish for visualized ways to browse through topics.

Large photos and videos are not available due to a limited data rate (from the development team).

What we did?

We tested the early mockups by describing the context to the participants beforehand, and then give them tasks to navigate through the microblogging features.

The goal was to build an intuitive flow covering the key community interactions and to pinpoint users' mental gaps understanding the context.

Sketches example.

Created by Sarah Chan.

We started from creating sketches for the main navigations (left figure) and the common features of a microblogging app (right figure).

Early mockups (key screens).

Made by Tiffany Teng.

The key screens were prototyped in Sketch to cover the fundamental user interactions under good Bluetooth connection -- browsing through topics, participating in discussions through posting new threads, and being updated about new messages.

From early user test feedback, we adjusted the app navigations to keep the best simplicity, and found that users wished for more visualizations to help explore topics.

At this stage, we simulated the Bluetooth context simply through describing it to the users beforehand and learned that users wished to have the same level of communication through app interfaces, especially about starting the Bluetooth, and the reason why we needed to use it.

High-fidelity prototype.

With feedback from early-stage testing, we moved on to build an entire flow. The interactive prototype was tested with 5 students at the University of Michigan to find out usability issues and how well users understand the context with our design. But let's have a preview of the app's architecture first before diving into the iterations!

App architecture.

00 - Onboard

Being communicated the technology right from the start.

01 - Home

Jump in discussions and view connection status easily on the homepage.

02 - Search

Explore trending topics around you through categories.

03 - Notification

Quickly follow up after reconnection.

04 - Profile

Manage profile and chats with a clear timeline.

Design and iterations.

Understand the app context.

Onboard users.

Users are being introduced about the app context when first logging in, and the app will ask for their permission to use Bluetooth. This introduction helps users build a sense of security and trust using our app, and have an overview of the app functions.

LOGIN

Iterations.

Visuals helped us better communicate the key concepts.

BEFORE ->
"The paragraph was too long", "I only read the highlights".
AFTER
Highlighted technology, purpose, and user actions.
AFTER
Added a splash screen at login to communicate the context.

Explore topics.

Jump into the discussion.

We put the newsfeed on the home page to update users dynamically with trending topics nearby. Users can quickly have a glance at the discussions and sort them by top or recency. Since the users are entirely anonymous, we incorporated reputation systems such as up and downvotes to encourage good community behaviors and source validity.

Iterations.

Refined visual elements to better fit user expectations and marked out new updates to support quick follow up.

BEFORE ->
"Does solid orange button mean I have left a reply?"
BEFORE ->
"Is the heart shape 'like' or 'save' ?" "Where can I see my Bluetooth status?"
AFTER
Used proper icons and added visual cues to help users view current status.

Iterations.

Simplified the comment threads' layout for better accessibility.

Would users prefer messages to be displayed in nested threads (like Reddit) or a flat arrangement (like Twitter)? We A/B tested two mockup versions and found that users would like to have a quick overview of the comment area, and then dive into the ones that interested them. Therefore we decided to arrange all the messages in two layers: the first layer shows the comments that directly replied to the main post with an entrance to its sub-comments, and the sub-comments are displayed flatly on the second layer regardless of reply relationships.

This new layout helped users get the gist of a discussion much more quickly.

BEFORE ->
Showing all the nested threads makes it mentally challenging to follow or revisit multiple discussions.
BEFORE ->
We wrapped the sub-threads and simplified the filter to keep the comment area simple and oriented.
AFTER
Refined visuals and moved the up and down votes to give the content more breath.
The sub-threads are displayed flatly in a new tab.

Explore topics.

Browse through trending topics and local events.

Search allows users to explore their surroundings with categorized topics and popular tags right at the hand.

Iterations.

Provided more descriptive and dynamic event categories to orient topic exploration.

"In what situations would you use this app?" We asked this question in user tests and the participants imagined different scenarios from music festivals to public emergencies. At the same time, we found that the categories provided were too general to attract clicks (e.g. "Halloween"). Therefore we displayed local news and events in a more descriptive and visually dynamic way (e.g. "How to Become a Fossil, U-M Museum of Natural History"), and let the search prompts guide users to explore specific tags.

BEFORE ->
"I hope there are more visualizations."
BEFORE ->
"The categories are too general", "The card titles are hard to read."
AFTER
Displayed specific events and used more dynamic visual/ text layouts.

Manage connection status.

Clear connection status.

The connection status is clearly informed by a Bluetooth icon and the top filter bar.

We used colors to indicate different statuses and provided a help button next to the filter bar to guide users when disconnected.

Iterations.

Added visual cues and increased control visibility to help users manage connection at any point.

BEFORE
"The control is too hidden."
BEFORE
"Where is Menu?"
AFTER
Made the Bluetooth control to the top.
AFTER
Displayed Bluetooth and used different colors to inform connection statuses.
AFTER
Indicated where Menu is.

Manage connection status.

Catch up quickly.

New updates can be seen in an instant through the notification center. Users can easily track and retrieve previous discussions and clearly know when and from whom they were sent. This is very important in our context since the disconnection, which is an edge case in general communication apps, becomes a primary case for P2P apps.

Users can also track and manage their own activities on the profile page through a timeline.

Iterations.

Better categorized notifications to help sort new messages, and added a timeline to help track and edit personal activities.

BEFORE ->
"Is this replying to me or from me?"
AFTER
Added sub-categories to help filter messages.
AFTER
Provided entrances for both posts and specific threads.
BEFORE ->
"What does trust mean?"
AFTER
Clarified trust as a community badge. Added a timeline for managing activities easily.

Final comp.

Development and next steps.

Android Studio.

We built the MVP in Android Studio and attracted 100 students at the University of Michigan to register as test participant in 10 days 🏆.

The UI development squad programmed the key interfaces. I worked closely with them and the backend developers to decide final trade-offs before the deadline.

Transition.

I outlined a transition dococument for the new members to onboard the project and finished it with the team.

It was really nice when the new UX member later reached out to me for some details in the document. We didn't leave a gap behind us!

Iterate based on Alpha testing feedback.

The goal of the Alpha testing was to simulate the real communication context and collect data such as how well the messages transmit among devices. The quantitative results will help the design team better understand the specific difficulties users could encounter with P2P technology and ideate more concreate solutions.

Consolidate design decisions through more user tests and research.

Would large images and videos be supported sometime in the future? If so, what new features can be designed to support collecting events around users and to encourage app usage? These are the questions that need to be answered through more research and user feedback.

Growth.

TOP