casa studio website
ROLE: (THE ONLY) UI UX DESIGNER AND DEVELOPER
DURATION: 5 WEEKS
I attended a panel discussion titled 'How to become a creative entrepreneur' and one of the panel members was JASMINE, the founder of Casa Studio. After the panel discussion, I casually went up to her for a chat and told her I can build websites. Cut to a few weeks later, I got the opportunity to design and develop the studio website!
VIEW LIVE WEBSITE
VIEW LIVE WEBSITE
VIEW LIVE WEBSITE
What is this project?
Website design for a small ceramics studio based in Canada who wanted to showcase their portfolio.
Skills I used and learnt
Skills used:
Wireframing
UI Design
Asking the right questions
Skills learnt:
Format.com
Creating a brand language
Time management
Email writing
Educating about and involving stakeholders in the design process
My takeaway from this project in one line
Learned how to design and develop a brand-aligned website using a no-code tool even within a really short timeline.
JASMINE, THE FOUNDER SAYS:
"Working with Kunal was a fantastic experience. He guided us through each step, helping us capture our unique style with clear communication, regular check-ins, and insightful design advice. Kunal’s work on our portfolio and online store has given us a website that perfectly reflects the aesthetic of our ceramics business. It’s clean, professional, and user-friendly, beautifully showcasing our work and telling our story. We couldn’t be happier!"
CONSTRAINTS
The timeline
As an international student with a 20-hour work cap every week, I had only 7 hours per week from Casa Studio to complete the website within a tight three-week timeline. This urgency was driven by an upcoming workshop they planned to host, so I had to quickly master a new development tool while designing the entire website from scratch!
Speaking development before design
Format.com was to be used as a tool for developing this portfolio website. The reason for this was that the client was already familiar with this tool and it would be easier to make updates to the website herself, even after the website is set up.
This tool has limited capabilities in terms of layouts, page types and interactions which had to be studied and taken into consideration before designing the website.
Format focuses on using pre-designed templates over making things from scratch.
There are only a limited number of elements one can add to their Format website
USER FLOW
This website was going to be pretty similar to a ceramics website, but with a few changes:
The Gallery is a holistic page that accommodates anything ceramics that Casa studio puts out into the world and not just in-house work.
The footer acts as a gateway to content that is secondary in the information hierarchy so that new users don't miss out on any pages.
BUILDING THE LAYOUT
Home
Navigation
Feature image
Category wise gallery
Work philosophy/process statement
Merch gallery
Footer
Gallery
Navigation
Photo gallery
Link to custom order form
Collaboration 1
Link to About Casa
Footer
About Casa
Navigation
Founder thought / phrase
Founder photo
About sentences
What do we do? Work categories/types of clay/etc
How do we do it - process of making
Link to Gallery
Footer
Contact
Navigation
Information about offline store / working hours if needed
Contact form
Custom order form link with button
Footer
WIREFRAMES
Home
The home page mainly consists of images of the ceramic works by the studio. The flow of the images is broken by a quote to make the page interesting and non-repetitive. This quote also grounds the website to the studio's work philosophy.
Gallery
The Gallery page is minimal (less functionality and a passive experience), with an exhaustive set of all images of the studio's work and some breaks in between to disturb order.
About
This page has a different layout than the rest of the pages. This page has an in-depth paragraph about the studio, some key aspects of it, and a video illustrating the process followed by artists to make clay objects. Information regarding the studio is conveyed in different formats.
Contact
The contact page is a basic one that also displays a link with contacting the studio for a custom pottery order.
THE THREE QUESTIONS
Translating brand values into visual design
How would you describe Casa Studio in just one word?
What is a song that describes Casa Studio?
How would you describe Casa Studio as a person?
DESIGN DIRECTION
Words were extracted from the answers to the questions above to introduce a visual direction
HIPPIE
HANDMADE
COMPLETE
HOMELY
MEANINGFUL
SHAGGY
RAW
WARM
COLORS
The images showcase a mix of natural, handmade textures and bohemian aesthetics, while the words such as hippie, homely, raw, and warm, capture the essence of authenticity, comfort, and artistry. Drawing from these inspirations, the earthy, dusky color palette reflects the organic and handmade quality of the ceramics and the grounded, meaningful style of the brand.
FINAL UI DESIGN
This project was a resounding success, delivering a website that perfectly embodies the ceramics business's unique style and vision. By deriving a basic brand language through client conversations, I ensured the design aligned with their aesthetic and values. The clean, professional, and user-friendly platform not only beautifully showcases their work but also supports their growth by enabling an online e-commerce business and an online events marketplace.
FIN
