Anonymouse App Design.
An app designed to support safe and vibrant communication among smartphones without reliance on cellular or Wi-Fi.
Anonymouse App Design.
An app designed to support safe and vibrant communication among smartphones without reliance on cellular or Wi-Fi.
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
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.
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.
Iterations.
Visuals helped us better communicate the key concepts.
Explore topics.
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.
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.
Explore topics.
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.
Manage 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.
Manage connection status.
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.
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.
Cross-functional team.
I was actually on a hardware research squad for my first 3 weeks 🛠. At that time the large team needs to determine a hardware solution quickly, and therefore I volunteered to do the research with two other EECS students.
The short experience of learning how the backend works benefited me a lot later in the design process as I was able to have a better understanding of the real context.
Step back.
We weren't the first generation and therefore the previous members have left research and wireframes for us. When looking back I realized that there could be more opportunities if we step back and brainstorm from certain early stages. For example, we could've done more sketches or low-fi prototypes to test our ideas from new research, which would make it easier to make quick iterations.
Being a team lead.
Being a lead made me think of my way of doing design, and how to effectively communicate my thoughts and get help from the other subteams.
I needed to remind myself to keep getting feedback from both the internal team and the outside. I also learned that making trade-offs is very important for a real product. This project experience truly helped me grow as a designer.
