Case Study: Defining and evolving a North Star vision to unify products

Angélica Rosenzweig
Mar 24 · 8 min read

Overview

Challenge: Integrate acquired products to create a cohesive, modern and functional experience for users of an enterprise software solution.

Solution: Designed a North Star product concept and framework to consolidate product acquisitions based on user workflows and complementary capabilities. Defined strategies for executing towards this vision.

Duration: 2 years on and off.

Team: 3 core designers, 1 visual designer, larger UX team during workshops and design sprints. Product management.

My contributions: Co-lead designer, facilitated co-design workshops, defined interaction models, global patterns and re-usable page templates, created a design prototype, provided design pattern guidance to other designers. Evangelization and communication across the organization.

Outcomes

  1. Defined a North Star vision concept for integrating product acquisitions into a unified, contemporary product experience that focused on user workflows.
  2. Defined a framework to help teams assess and justify different paths to execute on a vision driven by value.
  3. Identified approaches for applying a Design System to improve consistency, learnability and usability of the application.
  4. Drive organizational alignment on vision

Context

The portfolio offering grew through acquisitions, as a strategy to fill gaps in the solution blueprint. While this provided for lots of rich capabilities, this also created overlaps, discrepancies in behavior, and a myriad of tools that were not integrated with each other, and users were noticing the experience segmentation.

Users expectations of enterprise software were being set by mobile apps, other SaaS offerings, and consumer software they use in their day to day lives. In parallel, the sales team was reporting loss of customers because the application was not appealing to users and the perceived usability of the product was low.

The Design System team had just created a whole refresh on the design patterns and styles, to help modernize the visual language and support the sales process.

Process

Generating interest & gaining initiative champions

The UX team created a sales concept car to help engage with executives in the organization and get buy in for efforts to better harmonize the products focusing on user workflows. The concept leveraged the design system and proposed re-usable page layouts to reduce the cost to build and maintain the application. I worked with 2 other designers to define the hero workflow we wanted to showcase, the design concept, and the presentation.

Sample of deliverables

Integrated workflows identification & cross-function partnership

The next step was to identify our hypothesis integrated workflows. Since we were integrating two different applications, we focused on extracting the key users and their goals, decisions, workflows, objects they interact with how the different capabilities could help. To do this work we facilitated workshops with the cross-functional team and fleshed it all out.

Fleshing out the hypothesis workflows

This approach helped create better understanding of the capabilities of the products we were looking at integrating, and a shared mission for team members who were part of the acquired product team.

These became the hero hypothesis workflows used in later phases.

Sample persona and high-level optimized workflow hypothesis

Design Sprints

The next phase involved defining how the product should start coming together and what the experience could be like. We knew our efforts should not only focus on the visual appearance of the product, but behavior, the value it brings to our customers and their business, and ways to address known issues with the product.

I co-facilitated a 2 week design sprint workshop to identify key product wide problems and goals to be addressed by the concept vision. Through the day we had sessions with the PM team and subject matter experts to bounce off some of the key concepts, which we continued to flesh out throughout.

Ideation session

We then fleshed out higher fidelity concepts based on our key target themes:

  1. Help users find focus: through flexible navigation, surfacing key contextual information and system recommendations, and smart lists
  2. Persona driven views: display relevant data for a given user role and jobs to be done
  3. Flexible data organization: based on objects, processes, or time.

I orchestrated the creation of the different pieces of the concept into a prototype, provided feedback and direction, and designed various parts myself to put it all together. I then presented the concept to the larger product management team.

Sample early iteration of vision prototype

User feedback and iteration

We had a two pronged approach for getting feedback. The first was 1:1 sessions with users that spanned the whole spectrum of user personas the product supports. These were designed to assess if the proposed navigation and workflow changes would help users on their daily tasks and the contextual out of the box content we proposed made sense to them.

The second approach involved collecting market interest at the company’s yearly user conference. While this focused mostly on administrators and company representatives looking to learn more about how our product could help them achieve specific outcomes, this served as a good test bed to gauge interest and perceived value.

We synthesized the feedback and iterated based on the feedback.

Breaking it apart into smaller pieces

While the concept vision resonated within the organization, existing customer commitments and lack of resources meant we lost momentum to get into execution. The engineering teams were also struggling to see how we could execute on a vision that was “too big”. The expectation was always that this would be an incremental journey, but picking where to start was challenging.

So we broke down the key value adding elements of the vision design into 4 different categories:

  1. Global unifying features (like navigation, aggregation views, notifications)
  2. Workflow simplification for high-use product areas
  3. Ecosystem simplification and resolution of overlapping capabilities
  4. Visual and interaction standardization via common components

This breakdown helped make the work more consumable and identify clear focus areas to incorporate into the product roadmap. For example, I worked with the product manager, technical lead and another designer to identify the MVP of the new navigation that would still make a meaningful impact towards user efficiency. I ran usability studies and feedback sessions to ensure the design was optimal, and worked with the team to implement this one unifying feature.

Early explorations of navigation MVP for multi-device support

To help narrow down the scope of UI standardization efforts, I identified the key UI controls that were used across the board and prioritized which of these would make the biggest impact towards making the product behavior and look and feel more unified (like data tables, charts, buttons, and modal windows). A big win towards standardization was designing and creating a robust, shareable data grid component and applying it across the board. This got us coverage to about 90% of the product in one go, and consistent table actions and behaviors to support learnability of the product.

Sample of data grid used to get consistency of table actions

Making the business value for the updates

Depending on the product area, underlying infrastructure, technical debt, and other business priorities, the different teams had to sort out how and when to evolve their product area into the vision while: at a minimum from a visual consistency perspective, and ideally from a workflow simplification perspective.

Each team had different constraints. So I created a framework to help the teams slice further the problem and understand the cost/benefits of potential approaches they could take:

  1. New Apps / New Product Areas: New capabilities and apps use the new design system from the get go and build for user centered solutions.
  2. Incremental Product Area Refresh / Refactor: Legacy applications can incrementally (through various releases) transition out of legacy styles into the new look and feel.
  3. Big Bang Approach: Legacy applications invest effort up-front to re-write and refactor the whole product area and leverages the new look and feel and workflow enhancements.
  4. Global Features and high-impact portfolio wide unifying changes: Applying portfolio wide unifying changes that drive consistency across the application (ex: Branding, global navigation, notifications, etc)
  5. Better Together Workflow: Revisiting workflows to better integrate cross-portfolio capabilities applying the Design System. Remove redundancies and integrate complementary capabilities.
Cost vs Impact of different product unifying approaches

In order to define the value of upgrading a specific product area or the larger portfolio, it was key to partner with product management to estimate the value of making these changes, identifying risks, and what level of effort something might take, benefits to sales, marketability, competitive advantage, cost of documentation or training, etc. The framework included a set of questions about these value assessment dimensions to help determine the path that made sense for that team.

Fragment of Value identification worksheet to fill out with Product Management

I also defined a Urgency of Upgrade Score to help teams assess value of updating and the cost of doing nothing. The score includes dimensions for training time and effort, ranking against competitors, redundancy and integration, loss of sales, product documentation and learnability, customer support, customer satisfaction and technical debt and system maintenance.

Sample of Urgency Upgrade Score Assessment

The framework was successful to help teams identify the benefits and risks of taking one approach over the other. It also helped make the case for different aspects if the vision start coming to fruition in the implemented product.

My takeaways

Executing on vision work requires a lot of pieces to fall into place: the work has to be appealing, it needs to help drive business objectives, and there needs to be an organizational appetite to pursue these opportunities.

While vision work can help inspire organizations and drive innovation, it is essential this does not solely come from the UX team. Partnering with others in the organization and bringing them along in the journey to define the vision helps build better momentum and advocacy.

While the initial concept pitch was effective to generate executive buy in and sponsorship for the initiative, it was a UX driven and UX initiated pitch. It lacked involvement from Product Management who would ultimately be the key partners to get it built out. Later efforts had better cross-functional involvement and this made them more successful.

Angelica Rosenzweig | Case Studies

UX Case Studies and lessons learned

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store