Custom Website Template
Makers Unite / United Repair Centre
My client, managing two distinct companies — United Repair Centre (URC) and Makers Unite (MU) — approached me to revamp their outdated websites. The existing websites had fallen out of sync with the growth and evolving messaging and branding of both companies. Over the course of six months I worked on the end-to-end experience to design and develop a custom website template using Framer, that I could use and reuse for different channels. I focused on creating an extensive design system that is scalable, easy to use, and reflects their playful and impactful brand identities.
Year
2023
Contribution
User Research Design Strategy Journey Mapping Information Architecture Design System Framer Template Development Website Development
Role
User Researcher Product Designer Developer
Challenge
To indenity the pain points and challenges of the current websites, I organized a collaborative workshop involving key stakeholders. Utilizing various UX methodologies, such as user journey mapping and UX strategy blueprint mapping, I gathered insights from different perspectives. Businesses' growth required updates for the latest information on product offerings, impact, workshops, and news. However, the current design and content system were challenging to use and update without technical expertise. Simultaneously, the outdated websites had a fragmented information architecture, holdign back users' access to important information.
Goals
The workshop laid the groundwork for project design decisions. Recognizing the need for a unified and visually appealing website template, I implemented an extensive design system, guided by three key pillars. This UX process ensured a cohesive approach to the project's visual and functional aspects.
Modulair Design
By combining user and desk research with brainstorming sessions, I pinpointed essential sections for the template that aligned with the three pillars. The objective was to craft a modular and flexible sections, enabling a user-friendly drag-and-drop experience for the client. Client involvement in this process guaranteed that the template met their specific requirements and empowered them for easy adjustments in the future.
Resonsive Web Design
Integrating a responsive approach into the design system ensured seamless adaptation of the template to various devices and screen sizes. This responsiveness was crucial for delivering an optimal user experience on desktops, tablets, and smartphones alike.
Design System
To meet the client's desire for an easy-to-use system, I created a comprehensive design system, allowing effortless customization through a drag-and-drop interface. This empowered the client to modify content without technical expertise while ensuring consistent branding across both websites. I designed highly customizable elements and cards for at least three scenarios, following an atomic design approach. By dissecting product cards into replicable elements, I revamped their structure from scratch, accelerating the design process for entire page sections and small details.
Animations
I added subtle animations to each template section, guiding users through the content with fluidity and coherence. The aim was to boost the websites' visual appeal without compromising loading speed or accessibility.
Dual website launch
With the template in place, we successfully developed two distinct websites for the client's separate companies. The drag-and-drop functionality allowed the client to personalize each site according to their unique needs. Both websites are set to launch in Q1 of 2024, providing the client with modern, responsive, and easily maintainable online platforms. Through a comprehensive UX process, including workshops, research, and design system development, we addressed the client's specific needs for two revamped websites. The result is a visually appealing, user-friendly template that empowers the client to manage and update content effortlessly, ensuring a seamless online experience for their audience.