Aboard: Mobile Edit
2024 - INTERACTION DESIGN + SHIPPED
Overview
During my contract role at Aboard last year, I worked with the mobile engineering team to redesign edit interactions, addressing the app’s one-size-fits-all approach to data types for a more scalable experience.
Team
2 Designers
Engineering Squad
Product Manager
Duration
Sep 2024
Role
Research, Interaction Designer, Testing, Mobile Design
Problem
How can we design consistent yet flexible edit patterns to accommodate various data types on mobile?
Bottom sheets looked very barebones and the UI not inviting
A separate edit state creates an unnecessary layer of friction
Inconsistent patterns: eg: bottom sheet is used for some fields but in-line editing for others
Solution
Treat all data types independently, but standardize certain steps to create a more consistent and cohesive experience for users.
solutions #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
solutions #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.
Goal:
How can we create consistent edit patterns on mobile given the complexity and variety of data types?
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
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.