Tackling design challenges with the 5C framework

I joined IBM as a UX designer in July 2020. I felt prepared after graduating from a user experience (UX)-focused program at the University of Michigan, yet the jump from student to “real world” designer was intimidating, especially designing for large enterprises with complex personas, unique business requirements, and technical constraints.

The iconic IBM Rebus Logo

Starting my career during a global pandemic was an exciting, scary, and extremely confusing transition. It was challenging to feel like a mature professional while working out of my childhood bedroom; it didn’t help having my bright green walls and twin-sized bed visible on meetings and my parents knocking on my door every 30 minutes with technology questions. Nonetheless, dressed in a professional turtleneck work sweater and fuzzy Harry Potter pajama pants (out of sight of the computer screen, of course), I was eager to dive into a real design and development implementation handoff. Even with my academic foundation, I found myself asking where to start, especially during the implementation and developer handoff phases of the design process. As I journeyed through implementation phases, I documented what I was learning. After a recent reflection, I noticed that my observations fell under several similar categories (always on the lookout for some good data trends!) that I believe can be reused to help new and experienced designers. I’ll walk you through what I’ve coined as the 5C framework.

Without further ado, I now deliver them to you:

1. Context — What is most important to our users at the time of the experience, and what are their goals? How do their goals fit within the larger system? Are there related goals? Are there dependencies with other goals? Other users and stakeholders? What are the environmental factors?
2. Cases — Have we considered all of our cases? Think: happy path, edge cases, and error states (oh my!).
3. Concept — Is there a standard for the interaction(s)? Can we leverage existing patterns within internal or external products? Can we leverage existing mental models—software or otherwise?
4. Content — Is this content necessary, or can/should we modify the interaction to guide our user? Is it clear? Does it provide enough information in the context of how the user is utilizing it? Will users know their next steps and have enough details to make informed decisions? How can we help them get unstuck?
5. Constraints — What is technically feasible and realistic given our time frame for execution? Are there limitations that may impact a design implementation?

I will now explain how I applied the 5Cs to a use case in my current role at IBM. I’ve also included specific design implications to keep in mind when adopting this framework.

Scenario: I’ve been tasked to improve the user creation flow so company administrators (admin) can rapidly create users and give them the access they need to get to work.

1. Context

After conducting research, we identified several informational fields that were rarely ever used. Instead of displaying all the inputs upfront, we progressively disclosed information and only surfaced the required fields to prevent information overload. We shifted the secondary informational fields into accordions where an admin could input additional user details if needed desired.

Context implications

• Ensure designers account for proper screen sizes and responsiveness.
• Influence decisions about user interface (UI) affordances and detailed visual elements.
• Determine information hierarchy and progressive disclosure patterns of primary, secondary, and tertiary information to encourage specific behaviors, help users accomplish their goals, and prevent information overload.

2. Cases

It was important to map out and address use cases to ensure the proper feedback and guidance was embedded in the design to help admins troubleshoot and proactively handle errors. For example, what happens if an admin forgot to enter a required field? What if they inputed unsupported characters? What if there was an error during user creation?

Cases implications

• Set the tone for the rest of the product experience. The default state and first time use leave lasting impressions.
• Identify edge cases to avoid unnecessary redesigns to your happy path. (Tip: Map out the errors or unexpected paths a user may encounter during the design process—not after the design is complete.)
• Encourage inclusion of interactions that guide the user to reduce errors and recover when they happen.

3. Concept

User creation is a ubiquitous pattern; I looked at internal IBM patterns across the product portfolio for brand consistency, as well as external competitors’ user creation flows (Microsoft, Google, SAP, and Infor) to guarantee we aligned with user expectations.

Concept implications

• Avoid unnecessary reproduction of work. It’s likely that other applications have solved or are working on similar problems — see what exists first before trying to create something from scratch. Design is a balancing act of crafting familiar experiences, reducing the learning curve, and integrating your own style without immensely broadening a product’s learning curve.
• Provide a foundation for design standards and principles, which can be used to create design systems or libraries with reusable assets.

4. Content

In the application suite I work on, we charge customers based on users and usage. We needed to explicitly inform a customer how much it costs to create a user. I decided to use an informational tooltip to explain where the cost comes from and its impact on a customer’s consumption, which may not be clear upon first-time use.

Content implications

• Prioritize documentation and translation impacts.
• Restrict duplication of copy to only include necessary information in the UI.
• Establish the voice and tone for your product/brand’s personality. Read the Norman Nielsen Group’s study on The Impact of Tone of Voice on Users' Brand Perception to learn more.

5. Constraints

Given our time constraints and the fact that the user creation flow already existed, we leveraged our current page layout design for the changes in our MVP release. I designed a north star proposal with a new page layout that we can aim towards in future releases when we have time to implement visual enhancements of the page. The north star also represents a more efficient, easier to use experience.

Constraint implications

• Enable delivery of realistic solutions.
• Suggest examination of limitations and risks to allocate resources appropriately.
• Determine scope to keep teams grounded during ideation. However, when diving into a visioning project or conceptualizing future goals, start with addressing user and business needs, don’t lead with the “how.”

Whether you’re a recent graduate with limited implementation experience or a proficient design specialist, I hope you can employ this framework to translate ambiguous requirements and tasks into user-focused experiences that drive business value. I’m excited to iterate on the 5C framework and my approach to UX challenges as I continue to learn, read, listen, explore, and expand my mind as a designer.

How do you approach design challenges? Do you have your own processes similar or different to the 5Cs? What do your favorite fuzzy pajamas, hidden from the Webex (a video platform similar to Zoom) screen look like? Feel free to connect with me, and share your ideas—send me an email, or connect with me on LinkedIn.