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.
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
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
Understanding the problem/opportunity space before primary research
Cirrascale’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 pricing page (below)
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.
Tweak It
Developed Wire Frames
Feedback:
Feedback:
- How can we condesnse the scrolling time of the page? Solution: Dropdown buttons
- Reorganize the content within the expanded buttons - emphasize the most popular option by moving it to the left
- Add visiual indication (Aquamarine color) to user when they’ve clicked on a pricing option
Tweak It
Developed Mobile Wire Frames
Feedback:
Feedback:
- How can we condesnse the scrolling time of the page? Solution: Smaller text that still meets AA standard
- How can we condense the pricing box (right)? Solution: Removing unnecessary labels