Revamping Publish
Revamping a legacy product while maintaining compatibility with other products in the ecosystem.
- Revamped design
Role
Product Designer
Team
Duration
2023 - 2024
Activities
User research
Building the product vision
Planning & scope
UX Design & Strategy
Interactions
Role and Impact
Getting started
I led the end-to-end design for this initiative from discovery, problem framing to design strategy, wireframing, design system contributions and final shipping of the product. My key accomplishments include:
Conducted discovery, derived insights for defining the problem and what to focus on.
Collaborated with the Product Manager to write user stories and prioritize product roadmap and frame a design strategy based on the roadmap.
Improved usability of Publish, leading to an increase in task completion rate from 12% to 100% and a significant reduction in customer churn rate.
Documented error handling methods for all Flowbox products and modernized outdated components. This initiative facilitated clear understanding within the engineering and product teams regarding our rationale behind choosing specific approaches and components over others.
The business need
Improve Publish to reduce customer churn rate and migrate all users to the latest version.
The process
Getting started
At Flowbox, we typically follow the Double Diamond Theory. However, due to the complexity of this initiative, we adopted a Triple Diamond approach along with a Lean UX process. This decision was influenced by the need to address issues with a legacy system, compounded by a knowledge gap as none of the original team members were still with Flowbox.
- Triple Diamond theory
Understanding the problem
Research
Publish functions as a complementary product to Flowbox's primary offering, Visual Marketing. It serves as a one stop solution, enabling our e-commerce clients to distribute user-generated content collected and moderated in Visual Marketing across all their social media channels simultaneously.
Two years ago, Publish was revamped to tackle several usability challenges, but many customers still preferred the older version due to additional features and ongoing usability issues in the latest version. Now, the business wanted to enhance the latest version to migrate all customers successfully.
In order to unearth the actual problem and determine what needs to be built, I undertook a multi-level approach to gather insights. My research encompassed:
conducting user interviews with both internal stakeholders such as CSMs and developers as well as our customers to understand their needs and goals
uncover pain points in existing user journey
determine the success of the tasks measured
Gathering insights
Research
After conducting the interviews, the product owner and I started grouping the problems uncovered into common themes using affinity mapping.
- Deconstructing existing designs and uncovering pain points in existing user journeys
- Using affinity mapping to group the gathered insights to themes
Severity framework
I incorporated a data-driven approach known as the severity framework to prioritize which usability issue to resolve first. This framework assesses the severity score of a usability issue based on three variables:
Task criticality x impact x frequency = severity
Task criticality: How important is the task to the user? (1=low, 5=critical)
Impact: How does it impact the user? Is it a one-time issue or does it stop the user from completing the user journey? (1=suggestion, 5=blocker)
Frequency (%): How often does the problem recur out of total participants?
- Severity framework
Prioritizing issues to solve
Based on the severity scores, my team and I categorized the issues into low, medium, and high priority levels. We then subdivided these under epic user stories based on individual user journeys. This approach facilitated a clear understanding of the key usability issues we were addressing and simplified the process of shaping the product roadmap for the quarter.
The product and tech team decided to kick start with the Epic - Facebook user journey due to its high severity score and the resources required to build it.
- Prioritizing issues using impact-urgency priority matrix and kanban
Key problems
Scope
Based on these insights, it became apparent that the key problems were the following:
Inconsistent form validation
71% of users encountered issues completing the form, whether to schedule the post or save it as a draft, primarily because of inconsistent behavior in form validation.
Incomplete steps in user journey
In certain user journeys, there were incomplete steps, leading to additional confusion for the user. These missing steps and interactions must be incorporated to clearly outline the process for the user.
Dependency issues
Publish is dependent on other Flowbox products for content collection, storage and analytics. These dependencies have to be tested and fixed in order to optimize the overall usability of Publish.
Design. Test. Iterate
Ideation
My initial focus was on developing an effective form validation design, recognizing its priority. This phase entailed rapid ideation and close collaboration with frontend developers to assess the technical feasibility of proposed solutions. Subsequently, these designs were tested with users and feedback were incorporated to refine and iterate upon them. This iterative process was continual, with numerous rounds of validation testing conducted to ensure a seamless user experience and achieve a 100% form completion rate.
Form validation: A case of asynchronous UX
The initial approach to form validation for post scheduling involved inline validation triggered by clicking the 'Schedule' CTA at the end of the user journey. However, testing revealed that users frequently overlooked inline errors in the vertical settings panel. Additionally, backend calls to the frontend were asynchronous, leading to instances where scheduled posts failed to publish later.
- Initial design
As a result, we pivoted to a different approach to address the asynchronous UX challenge. We transitioned all inline validations to on-click validations, except for character count or form within form. To enhance user awareness of errors, we implemented an overall error summary triggered by clicking the 'Schedule' CTA at the end of the user journey.
- On-click validations and error summary
- Comprehensive user journey mapping for media validation and subsequent error messages in Figma
Bridging the gaps in user journey
One challenge with Publish was the lack of information regarding already scheduled posts. Clicking on scheduled posts automatically redirected users to edit mode, resulting in publishing failures. This was overcome using multiple steps:
Disabling edit mode for already published and failed posts
Introducing view only mode
- Disabling edit mode for already published and failed posts
- Introducing view only mode
Enhancing media library usability
One user pain point involved insufficient information in the media library, making it challenging for users to upload media that met the form's requirements. This issue was addressed by enhancing media details in the library such as including clear differentiation between image and video media types.
- Enhancing media library by displaying more media details
Connecting to data analytics
The majority of users expressed a preference for an ability to determine the optimal time for content publication for growth as well as to save time. This functionality was integrated into the redesigned design by linking Publish with the Flowbox analytics dashboard.
- Determining the best time to publish content
What happened next?
Impact
The initiative significantly enhanced the overall usability of the product, leading to a 100% form completion rate and a notable decrease in customer churn rate.
Additionally, it facilitated the creation of comprehensive documentation outlining error handling methods across all Flowbox products. This documentation effectively bridged knowledge gaps within the product and tech teams, resulting in improved work efficiency and reduced shipping time for subsequent initiatives.
We decided to take a relook into the complex form (in order to further reduce user’s cognitive load), potentially breaking it into a multi-step form or separate journeys for the future.
Reflecting on my
Learnings
1. Design systematically
Firstly, I learnt the importance of digging deeper to understand the multidimensional nature of a problem. This approach not only helps in determining prioritization but also guides the design process towards achieving outcomes rather than merely addressing superficial features.
Secondly, although introducing new components as a solo designer would have been easier, I found that opting for the reuse of existing components proved to be a time saving strategy during development. Additionally, this approach contributed to maintaining consistency with the rest of the products within the Flowbox system.
Thirdly, I realized that Publish is not an isolated product but an integral part of a larger ecosystem. Understanding dependencies and anticipating consequences became pivotal in each design decision. For instance, when tackling errors in forms, it was imperative to assess if a similar approach made sense in different forms across other Flowbox products.
2. Replan and adapt
Addressing a legacy system connected to multiple products proved challenging. It took several weeks of in-depth investigation by both front-end and back-end developers to comprehend the logic and take effective actions. That’s why one of the biggest challenges was the ability to quickly act and replan in case we face a wall. I lost count of how many times our team had to brainstorm to get out of a rabbit hole and move forward.
- You may also like -