Case Study - Contextual Mention Functionality

The Challenge

SuperOffice CRM provided various ways for colleagues to communicate, but lacked a simple, unified method for users to provide context ("the why") behind their actions. This absence created uncertainty and inefficiency, forcing users to switch to external communication channels to explain decisions like discount approvals or task transfers.

The Approach

Using a design thinking methodology, I conducted user research to build empathy with key personas, such as sales representatives and managers. The research identified that users needed "efficient certainty" and a single source of truth to reduce frustration. I mapped stakeholder needs (balancing desirability, viability, and technical feasibility) to guide the ideation process.

The Solution

I designed and evaluated three distinct interface experiments to integrate context and @mentions into the workflow:

  • Modified Action Buttons: Adding text inputs directly into approval flows.

  • Contextual Chips: Using pre-defined tags (e.g., "Within budget," "Strategic client") for quick context setting.

  • Snackbar Notifications: A post-action overlay allowing users to add details immediately after a task is completed.

The Outcome

The case study concluded with a comparative analysis of the solutions based on scalability, flow unity and implementation cost. The final recommendation emphasized a compromise that aligns functional logic with technical feasibility through early collaboration with developers.

Skills

User Research & Strategy

  • Empathy Mapping: Analyzing user emotions and pain points to define the core problem.

  • Persona Development: Creating detailed user profiles to contextualize design decisions.

  • Stakeholder Analysis: Mapping project requirements across Business (Viable), Technology (Feasible), and Human (Desirable) needs.

Interaction & UI Design

  • Prototyping: Creating high-fidelity interactive mockups for various interaction patterns

  • Component Design: Designing specific UI elements like "Contextual Chips" and "Action Snackbars".

  • Flow Mapping: Visualizing user journeys from "Uncertainty" to "Certainty".

Product Thinking

  • Comparative Analysis: Evaluating design solutions against metrics like scalability, development cost and UI prominence.

  • Feasibility Assessment: Identifying the trade-offs between "Small changes" and "Big changes" in the existing system architecture.

Responsive Image
Responsive Image
Responsive Image
Responsive Image
Responsive Image

Result

The proposed solution was presented as part of an interview.

Create a free website with Framer, the website builder loved by startups, designers and agencies.