Using Information Architecture to gain more message real estate
Redesigning the UI of an email view on mobile to gain back screen real estate for the actual message.
My role and impact
My Role
UX Researcher, UX & UI Designer, Product Designer
Navigation
Easier navigation by moving a common tapping area to the bottom of the screen
Height
Gaining back 27% of the screen real estate to read messages
Measuring success
Mixpanel
Tracking number of taps and time spent in each section of the message
In Person
Speaking to customers directly at conferences
Overview
Context
Emails in Sedna have tons of meta data and sharing actions. In addition to the message itself, the email contains:
Tags
Verification logo
Attachments
Actions
Problem
Imagine trying to read an email on mobile to realise most of the message is covered... The message view contains a lot of message related data and meta data that pushes the email down.
Solution
What if you could still have all the info you need and read the message with less scrolling? By gaining 27% of screen space back, the message is now better distributed across the screen.
Users have more ease to navigate through the meta data thanks to the navigation happening mostly at the bottom of the screen.
The process
Picking up a roadmap conversation with Product
Although customers had been reporting this issue for a while, the project was parked in the roadmap.
Opening up the conversation with Product Leadership, I was able to start a plan and propose a design solution to go about this problem.
Identifying major Information Architecture issues
Vertical Space shortage...
Breaking down what could be improved in vertical space.
Using Progressive Disclosure on new Navigation
Showing the user what's relevant.
Instead of showing all of the actions fixed at the top, by creating a bottom bar users can grasp an understanding of what meta data the message has and claim back space to read the message.
Based on Research insights from Dovetail, I decided to make the attachment button a single unit.
Bottom bar variants
Designing by user behaviour.
Defaulting the bottom bar to show icons that contain updates allows a contextualised view of the meta data.
Users can easily open tags without extending their thumb to the top of the screen on every message.
I ensured planning of all variants in the design system.
Feedback and Scoping
Feedback
Collecting Feedback.
After testing prototypes with users from different persona types, I ended up validating the designs with overall good feedback.
Some concern was expressed about changing the navigation to the bottom, but I made the call to allow more time and gather feedback to address at a later stage.
Sprint Planning
Dividing the work in Jira in few different milestones:
Verified Logo change
Tag removal
Navigation bar change (always expanded by default)
Navigation bar collapsable
Conclusion
Completing designs and collecting feedback, I learned that you can still think outside of the box within limitations. Some key results:
Improved the UX of one of the core features of the product (reading emails)
Took this as an opportunity to improve the navigation
Added new elements to the design system that can be scaled in the future
