cresta's design system
building cresta’s design system
as the solo designer for cresta’s ui, I needed to solidify visual and interaction patterns so our product was consistent across our interface as well as build it in a way which allowed for expansion in the future. I knew that the functionality we had when designing the system would be minimal compared to 6 - 12 months from now. With this in mind i needed to create a simple, effective and efficient system to apply to the product.
screenshot of the
ui i inherited
starting from the previous design
when I first started at cresta, there was already an interface in production. at that point we wanted to focus on quick fixes and easy wins to improve the experience. to simplify things, many of our design decisions were based on basic material design. i had made small tweaks to reduct clutter and help the agents
screenshot of the material design interface
building the visual building blocks
taking the current interface as the starting point. i worked to test different elements of the main chat interface, knowing it was the most important part of the product, i wanted to make sure I had questioned each visual element without changing it too drastically to make it difficult to transition over. i knew that implementation would be a challenge and due to our fast pace we would not have time to stop and focus solely on implementation of the new ui.
some examples of my type, spacing and shape explorations
simple mental model
one of my concerns for the interface and something i wanted to consider was that our agents would be looking at it 8 hours a day, for that reason, i softened the color palette and increased contrast of the messages themselves to stand out among the ui. using strong stroke weights and a consistent grey palette I was able to create a soft but strong system for our new ui.
a fluid system
when i had finished with the chat agent redesign i knew that there would be pieces that would need to change in the future to ensure consistency across other parts of the product. as i set to design other new features and workflows if there was a pattern or style that did not work i designed one that did and updated the chat agent to follow suit. the system was flexible enough that i was able to keep the building blocks the same but added and edited as needed.
