Estrutura Card.png

STANDARD CARDS

Estrutura Card.jpg

Standard Cards

Flexible and dynamic cards.

 
 

It all started when.

The client needs to improve all the cards on his website. It has more than 20 different types, some of which are used for the same proposal. 


Emphasize Phase

The first step in the process was the Emphatize Phase, during which I analyzed all the existing cards using different tools, such as Business Analysis and Visual competition. This allowed me to understand the various needs for each type of existing card.

Analysis of all the existing cards and their needs.

Analysis of all the existing cards and their needs.

Define Phase

Then came the Define Phase  (the most complicated one), which has some points to care about like:

  • Are used in different scenarios

  • The content changes continuously

  • Are used by some content editors

  • Has to take care of Brand Attributes

  • Create a simple and intuitive way to Implement due to deadlines

I use essential tools like the Value vs. ComplexityAffinity Diagram, and Brand Attributes to make this possible. 

*Throughout this phase, I constantly interacted with the teams: Back Office, Front End, Back End, Quality Assurance, Project Management, and User Interface Team.

Ideate Process

It's time for the ideating process. After much benchmarking and brainstorming, I finally arrived at the final idea. Then, there is just a little more work to do.

Prototype

Prototype time! I made some wireframes to represent all the different variations of the same card and to define the macro interactions. I delivered this information to the UI team.

Different options of the same card.

Different options of the same card.

Specification Part

Functional - Technical Specification, then I made a specification with all the information about the product; this document has to have all the needed information for all the other teams, has:

  • Structure of the product

  • Access to Design Archives

  • Variations

  • Responsive behaviour

  • Mobile behaviour

  • Front-End Acceptance Criteria

  • Back-End Acceptance Criteria

  • Backoffice

  • User Stories

  • Guidelines

  • Recommendations

  • Use guide

Spec Interactions.jpg

It’s time to accompany the development, implementation, and testing of the product and, if necessary, create bugs or improvements.

And it's done :).

For me, it was a fantastic project. It was super interesting and very challenging. I enjoyed and suffered simultaneously, but I'm delighted by the results. It was a project to learn.