Creating a design system using screenshots of existing product and designing for scalability.
Type
Contract
Tools
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z M 7.972 22.019 C 7.972 20.077 9.546 18.503 11.487 18.503 L 15.002 18.503 L 15.002 22.019 C 15.002 23.96 13.428 25.534 11.487 25.534 C 9.546 25.534 7.972 23.96 7.972 22.019 Z M 14.979 4.448 L 14.979 11.478 L 18.494 11.478 C 20.435 11.478 22.009 9.904 22.009 7.963 C 22.009 6.021 20.435 4.448 18.494 4.448 Z M 18.494 18.527 C 20.435 18.527 22.009 16.953 22.009 15.012 C 22.009 13.07 20.435 11.497 18.494 11.497 C 16.553 11.497 14.979 13.07 14.979 15.012 C 14.979 16.953 16.553 18.527 18.494 18.527 Z M 7.972 7.963 C 7.972 9.904 9.546 11.478 11.487 11.478 L 15.002 11.478 L 15.002 4.448 L 11.487 4.448 C 9.546 4.448 7.972 6.021 7.972 7.963 Z M 7.972 15.011 C 7.972 16.953 9.546 18.526 11.487 18.526 L 15.002 18.526 L 15.002 11.497 L 11.487 11.497 C 9.546 11.497 7.972 13.07 7.972 15.011 Z" fill="transparent" height="29.995132867132952px" id="w9BTIwivH" width="29.995132867132952px"><path d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z" fill="rgb(0, 0, 0)" height="29.995132867132952px" id="Pt1MrmRxm" width="29.995132867132952px"/><path d="M 0 3.515 C 0 1.574 1.574 0 3.515 0 L 7.03 0 L 7.03 3.515 C 7.03 5.456 5.456 7.03 3.515 7.03 C 1.574 7.03 0 5.456 0 3.515 Z" fill="rgb(36, 203, 113)" height="7.030153846154008px" id="UsTjEgRiz" transform="translate(7.972 18.503)" width="7.02998601398599px"/><path d="M 0 0 L 0 7.03 L 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 Z" fill="rgb(255, 114, 55)" height="7.029986013986218px" id="BjLNftDFH" transform="translate(14.979 4.448)" width="7.03015384615378px"/><path d="M 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 C 1.574 0 0 1.574 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 Z" fill="rgb(0, 182, 255)" height="7.03015384615378px" id="tSGDRBMxX" transform="translate(14.979 11.497)" width="7.030069930069885px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(255, 55, 55)" height="7.030153846154008px" id="CogGJnjiB" transform="translate(7.972 4.448)" width="7.02998601398599px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(135, 79, 255)" height="7.02998601398599px" id="z1wnQ20Xg" transform="translate(7.972 11.497)" width="7.02998601398599px"/></g></svg>)
Figma
At a Glance
Building their design system from scratch using screenshots of their current product
Challenges
Users need a way to easily see event dates
How can I, as a user, glance at it for a few seconds and immediately know where I’m at in the event planning
How to make it quite visual?
Dashboard needs to be scalable and responsive
How can I easily scan a dashboard without being overwhelmed with information
How do we design it for different screen sizes?
How to fit more module cards in the future?
Research
Looked for some reference ideas for timelines, task management software, deadlines and statuses, dashboards and different screen sizes
Explored different visual styles and how to communicate status
Ideation
They wanted us to redesign the content of the cards but keep the same style.
Ideated a few potential versions for the future state, something a bit more visual and had hierarchy to the content.
Minimal viable product
Due to time constraints, they needed something quick to build.
We are still iterating on the cards and how they will look in the future and also the mobile view.