Claytan
Responsive Website Redesign
Role
Solo Designer
Timeline
August - September 2023
Team
UX Analyse
UI Design
Wireframes
Skills
Visual Design
Product Strategy
Storytelling
Tools
Framer
Photoshop
Illustrator
Project overview
Recognizing the need for a modernized online presence, Claytan entrusted me with a complete website redesign. Their previous Shopify site, while functional, lacked the clean aesthetic and contemporary design elements that could truly represent their brand.
This project involved not only a visual overhaul to create a clean and modern user experience but also the development of fresh brand elements to solidify Claytans' unique identity in the digital landscape.
Full website redesign
Copywriting & content writing
Call-to-Action (CTA) Optimization
Shopify API integration
Other design collaterals (banners, etc.)
The BIG challenge
To accommodate the client's request for a phased website redesign, I needed to ensure a seamless user experience while certain pages remained untouched. Implementing redirects effectively to bridge this gap proved to be a rewarding challenge.
The Design Mission
How might we integrate interactive elements and multimedia content to enhance user engagement and accessibility?
SPOILERS
Final recommendations :
Enhanced Brand Identity
Seamless Accessibility
Engaging User Experience
Content for Connection
01
Understanding Client's Bussiness
HOW DID I FIRST APPROACH THE PROBLEM SPACE?
1/ Research
My design process began with competitor research, analyzing local websites in the same industry. Understanding the client's desire for a non-salesy approach, I explored websites like IKEA that prioritize lifestyle branding in their product presentation. This research helped me refine the project requirements, ensuring I gathered essential data without overloading the website with information.
2/ Content Audit
To gain a comprehensive understanding of the existing website and its content, I conducted a content audit. This audit involved meticulously cataloging all available information and functionalities. Through collaborative discussions with the team, we strategically determined which elements to retain, which to remove, and how to integrate the remaining content within a more intuitive information architecture. Based on the audit, I've come out on three major issue of the old website :
1/ Visual Clutter
2/ Inconsistency
2/ Lack of information
There's information where its not needed, and there's no further information where its needed.
3/ Sitemap creation
Developing the sitemap involved extensive discussions. The client's existing sitemap lacked clarity, and some valuable content wasn't effectively integrated into the overall narrative. We collaborated to prioritize product series over product type for product organization, ultimately achieving a well-structured sitemap that aligned with the website's direction.
02
Piecing It Together
DESIGN PROCESS
Content and SEO
Populate site with content – we work with the client to add the agreed content throughout the site.
Creative and User Interface (UI)
High fidelity wireframes – Start to develop more realistic content, fonts, image dimensions or button styles.
UX and UI designs – Begin building content for the site (animations, photography, copy etc.).
Clickable prototype – I 'm able to easily collaborate with clients and content creators, as all parties can review and explore the draft website.
Website Development
Populate site with content – I work with the client to add the agreed content throughout the site.
Cross browser and device testing – we test that the website works perfectly on all browsers, such as Chrome, Safari, Internet Explorer, Edge or Firefox, as well as across devices, including desktop, tablet and mobile (iOS and Android).
LET'S COMPARE AND CONTRAST...
LET'S COMPARE AND CONTRAST...
Home Page
Enhanced Visual Clarity through Balanced Whitespace
The original homepage lacked whitespace, creating visual clutter and hindering user navigation. By strategically incorporating balanced whitespace, I improved the website's overall clarity and user experience.
Content Curation and Brand Alignment
Following client requests, I removed hard-sell product information and curated content that reflects their desired lifestyle brand identity, similar to IKEA's approach. This included incorporating lifestyle-oriented photos.
Before…
After…
Before…
After…
The Claytan Group
Improved Readability
The original "About Us" page featured a dark background with low-contrast text, making it difficult to read. I redesigned the page to ensure clear and easy-to-read content.
Cohesive Brand Narrative
Through content restructuring, I eliminated irrelevant information and strategically merged content from other pages to create a cohesive and engaging brand story.
Before…
Our History Page
Enhanced Engagement
The original history page lacked dynamism and relied on static images that didn't fully capture the content's essence. I incorporated more engaging visuals and subtle animations to spark user interest as they scroll through the company's history.
After…
Product Page
Improved User Journey
The original website lacked a dedicated product introduction page, forcing users directly into product categories. I designed a new product CMS system with a comprehensive introductory page to streamline user navigation and improve the overall product exploration experience.
More Product Pages
Before…
Before…
After…
Contact Page
Enhanced Readability
The original contact page, like many others, suffered from poor visual contrast, making it difficult to read. I implemented minor design tweaks to improve the visual hierarchy and ensure clear readability of contact information.
Additional Pages & Content Integration
Content Expansion
Upon gaining access to the client's extensive branding materials and data, I strategically added new pages to showcase the company's rich content and diverse offerings.
04
Final Design Recommendations
SPOILERS
Enhanced Brand Identity
The website now reflects a stronger representation of Claytan's brand, ensuring a consistent and impactful message to visitors.
Content for Connection
Compelling content was created to effectively communicate Claytan's company ethos, fostering a deeper connection with their target audience.
Engaging User Experience
Interactive features and animations were incorporated to enhance user engagement and create a more dynamic website experience.
Seamless Accessibility
The website was designed with responsive web design principles in mind, ensuring optimal viewing and navigation across all devices—desktop, mobile, and tablet.
03
Reflections, reflections
Claytan Website Redesign: A Rewarding Challenge
1/ Redesigning Claytan's website presented a few hurdles. Organizing and categorizing the product information was a key challenge, as not all existing data was usable. To ensure consistency, I ensured all information aligns with the brochure the graphic designer is creating.
2/ This project also involved diving into the world of CMS (Content Management Systems), a new but valuable skill I acquired. Learning how to optimize product tags for keyword searches was another key takeaway. This will allow users to easily find what they're looking for by entering relevant terms.
3/ Designing for mobile presented a unique challenge. I had to carefully consider how to incorporate the product filter bar without cluttering the limited screen space. Finding a user-friendly solution for mobile users was a rewarding accomplishment.
Overall, this project was a great learning experience that allowed me to develop new skills and refine existing ones. I'm proud of the progress made on Claytan's website, and I'm confident it will provide a positive user experience for both desktop and mobile users.
05
Post Design Commitments
1/ Monitoring and maintenance
This includes keeping the website up-to-date with the latest security patches and software updates, as well as fixing any bugs or glitches that may arise.
2/ Content creation and updates
This could involve adding new blog posts, articles, or other types of content to keep the website fresh and engaging.
3/ Search engine optimization (SEO):
This involves optimizing the website's content and structure to improve its ranking in search engine results pages (SERPs).
4/ Social media promotion
This involves promoting the website on social media platforms like Facebook, Twitter, and LinkedIn.
5/ Analytics and reporting
This involves tracking website traffic and user behavior to measure the effectiveness of the website and make improvements as needed.