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.
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. Complexity, Affinity 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.
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