Aboard

a case study on transforming edit interactions for diverse and complex data on mobile

Aboard is an NYC-based enterprise startup that uses AI to build highly custom software, fast.

Overview

The mobile app's edit interactions treated all data types uniformly, failing to accommodate the complexity of different data types and making the experience unscalable. How can we design consistent yet flexible edit patterns to accommodate various data types on mobile?

Outcome

I collaborated with the mobile engineering team to address scalability challenges, and technical constraints, and redesign + prototype the data editing interactions for the app.

Role

Product Designer

Team

2 Designers
Engineering Squad
Product Manager

Duration

2 weeks (September 2024)

solution #1

bottom sheets for scalability

Bottom sheets exist in multiple states (closed, expanded, half-expanded), allowing progressive disclosure of information - making them scalable and versatile
help indicate clear call-to-actions for more complex editing flows
They maintain user's sense of location within the data module
Are cognizant of thumb reachability on mobile devices

solution #2

one-tap edit for all data types for consistency

this was a hard one to figure out. one-tap would make it easier for users to open links, but fat-finger problems would make it really easy to take unintended actions.
the trade-off: we prioritized consistency over quick actions, which meant some actions would have to be one-extra level nested.

So, how did we get here?

the process

Identifying the Problem

Inefficient Mobile Editing Experience

Aboard's mobile app faced significant usability issues with its mobile app's edit state. The existing system is inefficient, treating all data types differently and having individual edit patterns for each. This approach created friction and failed to accommodate the complexity of diverse data interactions. It also caused confusion because the UX of editing wasn't consistent. -- Users had to enter a separate edit state to edit their data, creating another layer of friction. This wasn't great because for a data and software management platform, editing should be very accessible. -- Inconsistent patterns: eg: bottom sheet is used to edit dropdown fields, but in-line editing is possible for other basic input fields and data types types -- Other minor inconsistencies included some data types being editable inline AND via the separate edit state -- The UI wasn't very inviting.

Goal

How can we create consistent edit patterns on mobile given the complexity and variety of data types?

Initial Proposal

Swipe-to-edit Interaction

We proposed a solution inspired by popular mobile apps: a swipe-to-edit interaction. This seemed intuitive and modern, allowing users to quickly access editing features.

Guerilla Testing Revealed Flaws

After developing prototypes and conducting guerilla testing with colleagues, we discovered

users did not engage with the swipe feature as expected
Instead of swiping, they gravitated towards tapping and double-tapping. This feedback highlighted the need for a more tailored approach, informed by more research

Turning to and learning from Competitors

Attio's approach:

Single tap on data label opens edit state in a bottom sheet.
Auto-save functionality.
No option to cancel or undo changes.

Trello's Card Based UI:

Customizable card structure.
Intuitive title and description editing.
Single tap interactions for editing

Other Common Patterns

Single-tap interactions for editing.
Bottom sheets for edit states.
Auto-save functionality to enhance user experience.
Scrollable pages during editing to maintain context.

Re-evaluation: Breaking Down by Data Type

Recognizing the limitations of our initial proposal and informed by competitor practices, we decided to analyze the various data types individually. Each type required a unique interaction pattern:

Rich Text (Notes)
Ratings (Stars, Priority Pills)
Basic Text Fields
Menu Selections
File Uploads (Images, Documents)
Location Data

Another hurdle: Tackling complex custom data types

how do we balance complexity with consistency?

While laying out possible interaction patterns for editing each type of data, we encountered newer challenges with how to edit complex data type, while also making sure that we're not compromising on the consistency of editing interactions.

Managing Data Relations Effectively

A data relation refers to when data from another table is referenced in the current table. In the context of Aboard, where users are managing tons of data and might need to reference information quickly, a preview of the referenced data is essential. This gave rise to questions like...

How do we balance the interaction patterns for viewing data with editing the data that has been referenced? Is there a way to incorporate both without making either of the two interactions more
Additionally, how do we enable multi-item selection and editing without overwhelming the interface?

Navigating User Permissions and Access Control

Different users would have different roles within an organization, and hence, different permission levels for different databases.

Should users who don't have access to the data in a related database, be allowed to edit the related data item?

Streamlining Web Links and Document Handling

Handling taps on web links within editable fields
Managing document previews and uploads
Implementing a system for attaching multiple documents

New Design Directions

Decision 1: Trying bottom sheets

Aboard builds custom software for businesses using AI, meaning data can take any shape or form. Keeping this in mind, we decided to go with bottom sheets because of how versatile they are. This helped us solve for current complex data types, and account for any future uncertainties in data structures.

We hoped that using bottom sheets would smooth out editing interactions

Scalability: They could accommodate different data types without overwhelming the user.
Flexibility: Clear call-to-actions for data types with deeper, more complex editing flows.
Context Preservation: Users remained aware of their location within the app while editing.
Thumb Reachability: Optimized for mobile use.

Decision 2: Keeping it simple with a one-tap edit state

We prioritized what was familiar and scalable, and focused on an adaptive one-tap edit state that could handle complex data structures:

Intelligent previews for related data types, images, and documents.
Inline editing capabilities for other simple data types.
Seamless integration with more complex editing interfaces for advanced data types.

Iterative Solutions

How we solved for complex data types

Editing Related Data

Initial Scope:

Incorporating multi-relation editing
Allowing full preview of all related data

Prioritized Solution:

Simplified single-relation selection
Minimal preview of related items
Clear visual hierarchy of data importance
Deferred full multi-select functionality to future sprints

Trade-offs:

Reduced immediate complexity
Maintained core user workflow
Created a clear roadmap for future enhancements

User Permissions

Developed a granular access control system that dynamically adjusted edit interfaces based on user permissions. We also implemented a streamlined process for requesting access to restricted data that integrated seamlessly into the edit flow.

Document and Link Handling

Introduced a context menu system inspired by Trello's long press functionality that allowed users to choose whether to open links or preview documents directly within the app. We developed a custom document viewer that integrated with our bottom sheet design, enabling users to review attached files without leaving the main interface.

Final Solution

prototypes coming soon!

Outcome: Transforming Aboard's Mobile Editing Experience

In just two weeks, we transformed Aboard's mobile editing experience:

Consistent edit patterns.
In-line editing capabilities.
Improved usability for complex data types.
Scalable interaction design.

This iterative process taught us valuable lessons about flexibility and user-centric design in the face of constraints. Ultimately, it led us to a solution that significantly improved user experience on the platform while positioning us competitively in the market.