I led the Discover and Buy squad design team which was one of 6 squads that each tackled a key milestone of the user journey. Our squads worked in succession over 6 months from kickstart, discovery, solution, and implementation phases to hit our deliver together. Within my squad of 14 that consisted of engineers, product managers, and designers, we worked together from the kickoff to deliver on every asset that led up to a hills playback, playback zero, and release launch. Through weekly design reviews, bi-weekly cross squad syncs, and daily stand-ups, I led the designers within my squad through extreme deadlines, technical constraints, and pivots which ultimately delivered results for our team to be proud of.

Mapping out the as-is end to end flow

The squad leads kickstarted the project by identifying the as-is experience of the end to end flow. Through workshopping design thinking activities, we identified our personas, the milestones, and the user pain points and needs.

Narrowing in on the discover, try, and buy as-is experience

Within my squad, we evaluated the as-is discover, try, and buy experience for each of the 170+ cloud service offerings. This entailed identifying the entry points from marketing to discovery through the catalog to trying out the service with the pricing calculator and to purchasing the service. We distilled the purchasing experiences into 11 common patterns. Identifying the themes and individual experiences of all offerings, we formulated the top pain points to address:

Identified as-is pain points

• Duplicated efforts due to 2 platforms and numerous variations of provisioning pages

• Indirect entry points to provisioning from marketing

• Inconsistent catalog categories and terminology between marketing, documentation, and product

• Inability to fully try out experience due to upgrade paywall or restrictions

We further broke this down into 3 main problems to address:

1. Discover: users were unable to find and understand IBM Cloud offerings

2. Try: users were unable to estimate costs for IBM Cloud offerings

3. Buy: users were unable to configure and purchase an IBM Cloud offering

Pricing calculator

From workshopping an integrated buying experience, we identified that users needed a way to easily see resources that are part of a single solution as well as estimate the cost of any product. Users also needed a way to compare different configurations, pricing plan/options. This led to our explorations of a pricing calculator.

Modal vs side panel interaction

Another painpoint that we still faced with the new layout was needing a way to add or modify a resource at scale. We iterated through designs and ended up with two main component interactions: modal or side panel. We conducted an unmoderated usability test with 6 participants to evaluate the usability of interacting with a side panel to add or modify a resource.

Modal vs side panel interaction user test results

Overall, the side panel behaved as participants expected with a few additional takeaways:

• Participants understood iconography and using color aided in communicating affordances on the page.

• Participants were familiar with notifications confirming a change has been made.

• Participants looked for required fields to have an ‘*’ and non required fields to say “(optional).”

• Participants did not notice the price change but looked for a cost summary after making all their inputs.

Our work on the discover, try, and buy squad led to a set of standards for the 170+ service provider teams to use for their offerings. Our guidelines were then adopted into Carbon, IBM’s design system as a provisioning pattern to be used across the company.

See it on IBM’s design system here.

Additionally, our success shined through in creating a unified discover, try, and buy experience as the number of unified accounts increased from an initial 35 to 400+ accounts within the first week of release.