Refresh & Revamp
Design sprint
to develop an extensive rebrand and state-of-the-art websitebuild for Cirrascale, with full completion and launch by the end of Q1.
Cirrascale
Client Project Mar ‘24 - Apr ‘24
Project Focus: UI and Interaction Design
Skills:UI Design and Visual Design
Tools: Figma and Illustrator
Reflection:
Working in tight deadlines requires distinct steps and communication to succesfully completes. Working alongside people more talented than you always leads to self-improvement :)
https://www.cirrascale.com
Overview: Cirrascale is all about empowering and advancing responsible AI technology to make the world better, and they wanted a refresh to reflect these values. A huge focus in this project was to simplify navigation for an overall improved user experience.
Challenge: Deliver a new website for Cirrascale using their new brand system, while improving user flow and information architecture.
Solution: Define consistent layouts and design a strong design system using new brand guidelines to create a consise experience.
Highlights: I focused on the creation of a design system for the site.
Process
Understand It
Understanding the problem/opportunity space before primary researchCirrascale’s site was complex for users to navigate through. The website’s design was outdated and did not reflect a modern design system (don’t believe me - check out the before).
Think It
Primary and Secondary research plus the key insights learned
Key Audience (Whose opinion do we care about?):
Well-funded Generative AI startups. Easier to speak their language with sales and marketing efforts. These startups are trying to provide AIS services to train models and deploy chatbots.
Who are we speaking to? Founders, Co-Founders
Privately-funded labs that are actively doing AI research and AI safety research.
Who are we speaking to? Founders, Co-Founders, Chief Strategy Officers, Data Scientists
Retail, finance, and ecommerce businesses. A bit more aspirational with this audience, but we are starting to place emphasis on this area.
Who are we speaking to? Chief Technology Officers, Data Scientists
Build It
R1 & Initial wireframes sent to the client
ROUND 1:
The first round of design had to be completed within a week. There were four key pages that had to be delivered: the home page, pricing, AI innovation, and products & services. Mid-fi UI screens were created based on references from the moodboard created by both me and my manager.
PM Feedback:
ROUND 1:
The first round of design had to be completed within a week. There were four key pages that had to be delivered: the home page, pricing, AI innovation, and products & services. Mid-fi UI screens were created based on references from the moodboard created by both me and my manager.
PM Feedback:
- Reduce the number of options for clients
- Condense the information for pricing tables - reminder that it has to work for mobile users
- Incorporate a variety of dark and light sections for story telling
- PM was happy with the thinking behind the interaction of the highlight page
Highlights:
This case study will primarily showcase the process of the pricing page. The left showcases the process made within the first round.
The first iteration featured a clean “Apple” inspired coloured pallete and a “centered” layout. The colour was later changed and card components were added to keep the page compact and easy to scan.
This case study will primarily showcase the process of the pricing page. The left showcases the process made within the first round.
The first iteration featured a clean “Apple” inspired coloured pallete and a “centered” layout. The colour was later changed and card components were added to keep the page compact and easy to scan.