Twos

Upgrading organization efficiency with split view

A cross-platform productivity tool to organize life, write things down, and remember more

Product Designer

Feature add to existing web/desktop app

1 Founder-Developer

Freelance

UX

Product Strategy

6 weeks

Twos desktop app mockup: split view of Today and list
Twos desktop app mockup: split view of Today and list
Twos desktop app mockup: split view of Today and list

Turbocharging productivity and competitiveness with split view feature

Split view feature is expected to significantly improve experience by allowing users to seamlessly view and edit information in two separate panes, boosting efficiency. This isn't just a cool feature, it positions Twos as a strong competitor in the ever-growing PKM, productivity world.

In the first 3 months of shipping the split view, Twos experienced

30%

DAU

40%

WAU

20%

MAU

Launch video

Feature release walkthrough of split view

First reactions from Twosers

"

This is another game-changing update…

This is another
game-changing update…

I use it every day. It's easy to understand and navigate

Wowzer! This is terrific...already lovin' it

Wowzer! This is terrific...
already lovin' it

One of the best new features released recently

"

Twosers' initial feedback to split view from feature release video, Twos' World, and Discord community

Addressing Twosers needs for efficient organization on desktop

Twos, launched in 2015, leverages the singularity of things, individual pieces of information, to empower users to capture information easily and share it privately or publicly. While Twosers, the app's users, enjoy capturing things on the go with the mobile app, the current single-list view in the web and desktop app hinders efficient organization. This research identified the need for better organization features to meet Twosers needs for deep work and managing their captured information.

Final design of Twos' split view feature
Final design of Twos' split view feature
Final design of Twos' split view feature

Split view with Today and "mammoth trip" list

Evolve beyond capture to prioritize efficient organization features

Twos has thrived on prioritizing capture, especially on mobile. However, to truly empower users and unlock the potential of their knowledge, efficient organization features are crucial. Capturing ideas is just the first step. Twos must evolve to become a great tool for not just capture, but also organization.

Key screens from Twos iOS mobile app: Today and Lists
Key screens from Twos iOS mobile app: Today and Lists
Key screens from Twos iOS mobile app: Today and Lists

Key iOS mobile app screens: Today and Lists

User-centric collaboration approach to design a multi-content view to break the single-list barrier

Single-list view limits the experience. While exploring multi-content options in other tools, I realized a problem: the reliance on parent-child relationships. Twos prioritizes the "singularity of things," meaning information functions independently, sometimes irrelevant from others. This requires search capability for the split pane.

Close collaboration with the founder-developer streamlined decision-making, allowing us to prioritize user needs while navigating technical limitations. Through research analysis and exploration with mid-fidelity wireframes, we identified a pragmatic solution: a split view feature for dual-content view. This design directly addresses user requirements and paves the way for a smoother workflow.

Split view FAB options considered
Split view FAB options considered
Split view FAB options considered

Among all the split view FAB options, we agreed on the right-most option with card peek, but FAB appears only on hover to align with Twos' minimal UI

Siebar variations for discussion with founder-developer
Siebar variations for discussion with founder-developer
Siebar variations for discussion with founder-developer

Choosing to keep the original sidebar navigation menu allows for faster build and zero disruption to Twosers' workflow

Twosers embracing split view with soaring usability scores

All Twosers who participated in an interactive prototype testing rated the split view feature a perfect 5/5 for ease of use, usefulness, and expected use frequency. While feedback included minor UI tweaks, Twosers call for clearer in-app guidance and user education on features.

Top: list header before feedback • Bottom: list header after feedback with more distinctive quick action buttons for quick open and add split view
Top: list header before feedback • Bottom: list header after feedback with more distinctive quick action buttons for quick open and add split view
Top: list header before feedback • Bottom: list header after feedback with more distinctive quick action buttons for quick open and add split view

Top: list header before feedback • Bottom: list header after feedback with more distinctive quick action buttons for quick open and add split view

Left: split modal before feedback  •  Right: split modal after feedback with clearer title
Left: split modal before feedback  •  Right: split modal after feedback with clearer title
Left: split modal before feedback  •  Right: split modal after feedback with clearer title

Left: split modal before feedback • Right: split modal after feedback with clearer title

Twosin' with split view

With the split view feature, Twosers are now able to work with two content panes side-by-side. Each pane offers independent navigation and search, maximizing screen space and minimizing context switching. Activate split view. Say goodbye to tab juggling and hello to enhanced information management.

Opening split view by hovering to the right of central pane to access FAB

Hover to the right the central pane for FAB to open split view
Hover to the right the central pane for FAB to open split view
Hover to the right the central pane for FAB to open split view

Hover to the right the central pane for FAB to open split view

Split view modal, which is same as current move modal, opens for Twosers to choose which list to view
Split view modal, which is same as current move modal, opens for Twosers to choose which list to view
Split view modal, which is same as current move modal, opens for Twosers to choose which list to view

Split view modal, which is same as current move modal, opens for Twosers to choose which list to view

Split view with Today and "mammoth trip" list
Split view with Today and "mammoth trip" list
Split view with Today and "mammoth trip" list

Split view with Today and "mammoth trip" list

Adjustable width for view panes

Twosers can drag handle to adjust the split panes' width
Twosers can drag handle to adjust the split panes' width
Twosers can drag handle to adjust the split panes' width

Twosers can drag handle to adjust the split panes' width

Split directly from lists' quick action buttons

Adding split view to the existing quick action buttons for lists and sublists for quick split
Adding split view to the existing quick action buttons for lists and sublists for quick split
Adding split view to the existing quick action buttons for lists and sublists for quick split

Adding split view to the existing quick action buttons for lists and sublists for quick split

Equipping Twosers with feature knowledge to maximize the app's value

To ensure Twosers discover and understand Two's full potential, Twos team should prioritize improving update communication within the app as the next step. The more Twosers know, the more they'll use it, stick around and help Twos grow even bigger. Win-win!

Larissa Oh

Product Designer & Experience Specialist

© 2024 larissaoh.com

• Made in Framer with chocolates and beats

Larissa Oh

Product Designer & Experience Specialist

© 2024 larissaoh.com

• Made in Framer with chocolates and beats

Larissa Oh

Product Designer & Experience Specialist

© 2024 larissaoh.com

• Made in Framer with chocolates and beats