Brand Sprint Workshop
Brand values and personality
Where they see Cocos in the short, medium, and long term
Who their audiences and competitors are, and how is Cocos going to position in relation to them
The information gathered in this workshop allowed us to acquire in a matter of hours what could have taken weeks or months otherwise.
The results were the key to creating the style guide, wireframes, and ultimate visual design.
Brand Sprint Workshop
The next step was to run a Brand Story workshop, focused on defining a narrative in which Cocos play a significant role for their audience.
Who’s the ideal Cocos user? What do they desire? What are the problems that they have to face? How can Cocos help them succeed? Exploring these questions, we helped position Cocos as a guide for users to solve the problems they face and achieve success.
We use this workshop to co-create the narrative behind Cocos so the brand can tell its story in a compelling way that truly resonates with the audience.
With Cocos’ values, branding priorities, and story in mind, we designed a rebranding plan for both the new native mobile app and its adaptation to its desktop version.
Full-scale rebranding: the first step in Cocos’s evolution
Cocos needed a rebranding that reflected their values, aspiration, and new personality for the future.
We took everything we learned from the workshops and team discussions to start building the visual direction Cocos would be following. We updated their color palettes, fonts, and illustrations while also revamping their logo to match their solidified values.
We also designed style tiles to provide a visual reference for all the changes made to web site's images and interfaces. Lastly, we provided them with Brand Manual Guidelines and adaptations for future use.
Their rebranding refreshed their image and serves as a visual representation of what Cocos desires to be: a modern brand that is in tune with people's needs and constantly improving for the benefit of its user base.
Color Palette
Primary Palette
Dark Blue
#FA9662
Blue
#0062E1
1000
#FA9662
500
#63AB8F
200
#2867B6
100
#9C6EB6
1000 Light
#FBECBB
500 Light
#ADE5CE
200 Light
#E9FBFC
100 Light
#D7BFE7
Typography
Visual Resources
UI Design
Homepage
Profile Picture
Social Media
Getting hands-on with the entire product design
Simultaneously, we were auditing the current platform, finding instances of UX friction and usability/accessibility issues.
Based on what we found, we had enough information to start mapping the initial information architectures to understand all the functionalities of the product and to gain alignment between all the different team members including the dev team at Celeri which was involved in the entire process from the very beginning!
We proceed with the wireframes, and after different rounds of feedback and iteration, they became a fully-interactive prototype that Cocos could navigate like a real app, with micro-interactions included.
Then, we adapted the current desktop platform in order to reflect the new branding and to improve the user experience to be consistent with this new app and the new flows that were designed to provide the best experience.
The entire process was complex but very successful, giving us a 360 view of their service. This knowledge, combined with Cocos’ feedback made for the perfect combination we needed to optimize the user experience and achieve a brand image that reflects Cocos’ identity and personality.
