Tabitha Tsai
the previous card design on the left; the new card design on the right.

Problem

The Submit button on the bottom is embedded among other similar-color, actionable parts. Therefore, this button is not salient.

three cards; the first card, on the top, shows a green bar on the left side with 40 states checked; the second the third cards have the same content but with red and grey bars.
The original card

Discovery

Originally, we were thinking to use a different color for this button to catch attention. However, it would be inconsistent color usage across internal systems.

After getting context of use scenarios, rather than seeing this button needed a different color, the problems were:

  1. the state buttons in each card should be unselected by default, where the Submit button (blue) stands out from the state buttons (grey);
  2. unnecessary information stays in the screen, which competes with important messages.

Ideation and Validation

Additionally, I made some changes to:

  1. move action buttons to the right side, so users take less physical effort to move their mouses;
  2. move related components in close proximity, so it reduces users' cognitive load to match related information;
  3. change clickable parts into the button look, so users know those are clickable areas.

In order to make sure the changes were within the implementation schedule and align with user needs, I talked to developers and stakeholders with a paper wireframe.

A hand drawing with two cards; the top card has 40 grey rectangles showing the disabled state for states by default; the bottom card shows 12 blue rectangles chosen for the acceptance action.
The hand drawing shows the ideas and opens disucssion with developers and stakeholders

Polish

I used Axure to create the interactive prototype, which shows stakeholders the final look and feel and interactions.

three cards; the first card, on the top, shows a green bar on the left side with 40 states checked; the second card is marked red on the left and a dropdown for the rejection reason and edit button on the right; the third card is with 40 grey states unchecked and light green and red for disabled accept button and reject button.
The most updated card look

Reflection

  • Understand teams’ working styles. While working with multiple teams, the first thing is to understand how each team cooperates, how my role fits into their processes, and where the resources are. For example, I talk to the person who usually makes decisions when I get some design ideas.
  • Start with low-fidelity crafts. It saves me a lot of time by providing design ideas with hand drawings in the beginning. However, sometimes it’s necessary to create high-fidelity wireframes to visualize the ideas with stakeholders.
  • Build the trust. I usually ask stakeholders what their goals are and what they expect from me. Then I’ll let them know my role is to help them achieve their goals. Usually, it’s easier for stakeholders to perceive and accept ideas when there is trust.

© yi-shan tabitha tsai