My attempt to create a connected experience for the users by providing more than one touch point throughout different pages so that many tasks can be done whenever they feel needed. I believe It’s not redundant to allow users to finish the same task in many different ways.
[FYI: Those pages are not public-facing and only accessable by verified business owners on Tripadvisor.]Goals:
The project’s primary goal was to seamlessly migrate all features from the old management center to a newly upgraded platform while enhancing the overall user experience and interface.
Context:
The B2B management center (MC) is undergoing a substantial transformation, transitioning to an upgraded platform that guarantees improved technology and an elevated user experience. In the context of this migration, this project was to design the Media Management capability for the new MC. The initial MVP was launched in 2021, featuring the main gallery and primary photo selector. Subsequently, in 2022, the team initiated the second phase (this project), focusing on advanced and/or paid features.
Challenges:
- This project involved not only transferring features from the old platform to the new one but also pioneering the exploration and establishment of new design patterns that had not previously existed.
- Addressing flaws and shortcomings in the MVP migrated from 2021 posed a challenge.
- With limited resources and availability, managing collaboration with two different project teams for the migration in two separate phases was demanding yet ultimately rewarding.
What did I do?
Work Process
01
Identify features for migration
Not all features were included in the first round. I worked with product managers and engineering leads to decide what to include.
02
Identify core user flows for each feature
Given the complexity of this project, I started with defining a high-level structure to determine the overall user flows.
03
Prioritize deliverables
Determine what to be initiated first to establish key design patterns; and what to be delivered first to enable the engineering team to commence building while other designs are still in progress.
04
Create a bunch of comps
That includes a media uploader, a media viewer, a photo selector, and 3 separate pages. All the above also need unpaid state, paid state, web view, and mobile view.
05
Design spec documentation
Given the sheer amount of brand-new designs and complex product logic involved in this project, I had to provide extensive design documentation for engineers.
Highlights
Be there when it’s needed
Embraced an approach that resonates with users at various stages and addresses their specific needs when it’s needed.
Fostered a cohesive experience
Revised some recent work that was done initially for the phase 1 migration, and made the whole user journey much more connected and seamless.
Deliverables management
Successfully coordinated deliverables across distinct phases with separate engineering teams.
Additional Achievements
Success toast
Pioneered the introduction of the “Success toast” to the B2B design system.
Sticky Bottom Action Bar
Established the “SBAB – Sticky Bottom Action Bar” as a fundamental interaction mechanism for the B2B design team.
Upsell strategy
Explored and implemented an effective “Upsell strategy” for the platform.
Photo gallery with a cover photo
Designed a responsive “Photo grid” featuring an enlarged highlight image organically blended within a 4-col grid.
bonus
Extra screenshots
Being a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
The Ultimate Guide of Photo CTAs (a super long screenshot)
