Overview

According to the Post-it® Brand, 50 billion post-it notes are being manufactured annually. While it is an efficient tool, it is not a sustainable one. 3M company launched the Post-it mobile app intending to deduct the usage of physical paper.

The Problem

Post-it® Brand launched its own native mobile app in 2019 to provoke agile thinking. However, the native platform does not support remote working trends that are flourishing, which leads to a low acquisition rate.

The Goal

The design aims to increase user acquisition, keeping the existing functionality with the exception of allowing users to share ideas and chat in real-time to elevate the platform to a more effective collaboration tool.

Role:

Lead UX/UI Designer . UX Strategist

Tools:

Figma . Google Docs . Miro . Zoom . Trello . Slack

Scope:

2 Weeks Remote Project. Me + 2 UX Designers
IOS mobile

Research

Intuitive Flow But Impractical Function

Our team conducted 5 usability testing with participants who have the habit of using physical paper notes to learn their insights on feasibility of the digital version.

Purpose: To reveal hidden pain points

Process: Test were conducted via zoom on shared screen

Task: Add a note to existing “To do” group

Key Takeaways
90% people completed the task
86% people thought the app is impractical
80% people thought the app flow is intuitive

Frustrated Remotely Working Environment

Our team interview 4 people who were working remotely and had the habit of using post-it notes via zoom. After consolidating all research on the Miro board, the affinity map reveals:

80% of people use Post-it note to collaborate with others
80% of people think remote working hinders the productivity of their teamwork

“ Brenda needs an intuitive way to communicate and collaborate with her team efficiently under one platform because she feels remote work restricts workflow and hinders a strong team dynamic. ”

Explore Features Which Support Collaboration

From our user interview, we have learned that most people usually use paper post-it notes for collaboration. As the lead UX strategist, I created a list of companies for the competitive and comparative analysis. Direct competitors are platforms that also utilize the sticky note format. In-direct competitors are apps support project management. We delegated focus on feature design which accelerates team collaborating flow via the audit method.

Competitive Analysis

Comparative Analysis

Design Solution

"If It Ain't Broke, Don't Fix It."

With all the data we collected, our team started to ideate the design. Initially, we created a vast list of features ( calendar, task delegation, video chatting, translator, etc.), aiming to build a project managing platform. While we were brainstorming, we realized we lost sight of the pain points of our persona. We decided to zoom back in to focus on developing the feature of real-time team collaboration, which ties in with designing for mobile where we needed to start small, then leave room for growth when building out tablet and desktop versions.

*My initial sketches. I was looking to convert Post-it app into a project managing platform. Later, I realized I lost sight of pain point of the persona.*

Real-Time Collaboration

Once our team has set focus on the feature of real-time team collaboration, we decided to create wireframes base on our persona’s journey as following :

7. Clicks on “note” icon for note creation
8. Clicks “note” icon to change note color
9. Edits the note and add to group B
10. Selects “Done” to exit note creation
11. Clicks “message” icon
12. Reply message and click “x” to exit

1. Signs in to existing account
2. Selects all boards
3. Selects an existing board
4. Clicks “team” icon
5. Selects a group and invites the group
6. Clicks “x” to exit the confirmation window

Design System

View Prototype

Usability Testing & AB Testing

The A/B test is embedded in a moderated usability test with a total of 4 user tasks. We recorded time, error, hesitation, and observation of each task. Tests were conducted via zoom on the camera.

TASK 2 :

TASK 1 :

As a lead UX designer, you have a new project for your team that needs attention right away as you are out of office. Show me how you would get started on the Post-It App.

Now that you’ve gotten started, it’s time to wrangle everyone together. Show me how you would add a specific group to your new board to begin collaboration.

TASK 3: ( AB TESTING )

Great! Time to start brainstorming. As your team begins populating the board, walk me through adding a post-it to your current board.

TASK 4:

Your team has some feedback and questions it seems. Show me how you would navigate to view their comments and questions

Iteration A : 100 % error on frame

Completed?
100% user complete both tasks Time : user1 - 45s , user2 - 60s , user3 - 65s Number of errors:
user1 - 2 , user2 - 2 , user3 - 3

Iteration B : 66% error on frame

Completed?
100% user complete both tasks Time : user1 - 40s , user2 - 30s , user3 - 35s Number of errors:
user1 - 2 , user2 - 0 , user3 - 1

Streamline Design

Usability testing reveals most errors and hesitations occurred when participants were trying to create a note due to cognitive load. To streamline the design, we decided to collapse post-it notes color when not in use. To further improve user adoption, we will create a tutorial-oriented onboarding process for new users.

Cognitive load Revised Design

Reflection

Collaboration
Working with a new team with little under two weeks was a challenge. To optimize individuals' competency for the project, we started with a round of networking. We learned everyone’s schedule and working method preferences and created a feasible project plan. In the end, while challenging, this determination to learn and deliver our working dynamic harmonious, which shone in the presentation. Another key takeaway from working in a remote team is being cohesive in both copy and design. During the early-stage usability testing, users pointed out that certain frames felt different people designed them. This has really re-emphasized the importance of having a comprehensive design library and system, which I believe is critical as working remotely has been trending.

Growth
This design challenge really pushed me to develop a more cautious approach behind intentional and advanced UI decisions due to limited screen space. This is especially true with mobile design, starting small then extending as the design progresses to tablet and desktop format. I also learned how easy it could be to get lost in features and details. It is important to refocus efforts on user’s needs and research.