My Role
Design Lead
Timeline
3 months
Team
Technical Lead
Web Developers
Responsibilities
Design System
Component Library
Visual Design
Wireframing
Responsibilities
Design System
Component Library
Visual Design
Wireframing
Overview
As a freelance designer, I contributed to the redesign of the Event Cinemas website, focusing on creating a fully responsive experience.
By collaborating closely with a remote development team and a technical lead, I developed a component library —a relatively novel approach at the time—to guide the website’s rebuild.
This component-based design created a unified visual language, streamlined testing, and facilitated seamless coordination with remote developers, even within a tight deadline.
high-level Goals
My Design Approach
To meet a tight deadline with a remote development team and no quantitative research, I prioritized clear communication and a shared design language. We quickly established shared design objectives and implemented effective collaborative tools (e.g. bug reporting and management tool, Bugherd) and procedures.
Utilizing Brad Frost’s atomic design principles, I developed a structured and consistent design system. This framework facilitated informed decision-making for both myself and the development teams, thereby optimizing workflows and ensuring efficient handoffs for testing and development.
01
Design & Refine
Interactive Hi-Fi Mockups to Address Challenges
To address challenges with deadlines and remote work, I used interactive high-fidelity mockups instead of traditional wireframes.
These realistic mockups, including design elements and sample content, provided a preview of the final product. This sped up decisions and minimized misunderstandings, fostering alignment. The interactive mockups also bridged design and development, creating a foundation for a scalable, responsive design system.
Clarity Through Intentional Design Decisions
In managing the project, clear and purposeful design decisions were essential, particularly when working with a remote team responsible for both the visual and functional aspects. To ensure smooth collaboration, I prioritized communicating design intentions in a way that developers could easily understand during development. This involved explaining the “why” behind design choices and presenting components across different viewports (like desktop, tablet, and mobile) to ensure consistent implementation. This comprehensive approach facilitated effective communication and streamlined the development process.
Standardized Spacing
Developed a standardized spacing system using intuitive, shared naming conventions. This ensured design consistency and simplified collaboration, enabling quick and targeted adjustments when disputes arose. This approach streamlined the design process and facilitated efficient problem-solving.
Deliberate Use of Interactive Elements
The interactive elements of the design, including buttons and forms, prioritize clarity and ease of use. These elements were optimized for touch devices, ensuring consistent usability across different screen sizes. To enhance the user experience, various feedback mechanisms were implemented. These include hover states (visual changes when a mouse cursor hovers over an element), focus indicators (highlighting the currently selected element), and other visual cues that provide users with a clear understanding of their interactions with the interface. This careful attention to detail ensures intuitive and responsive interaction.
Streamlining the Navigation Menu
We prioritized simplicity and clarity in the navigation, ensuring users could quickly access the primary functionality—purchasing movie tickets. This approach minimized distractions and supported a focused user experience.
Embracing Efficiency with Component-Based Design
I advocated for a component-based design system to ensure scalability and responsiveness. This approach established a consistent yet adaptable framework, facilitating seamless collaboration with the remote team and maintaining design cohesion across all devices. By building the system from fundamental components or building blocks, we created a solid foundation for rapid iteration and adaptation. This allowed the team to efficiently refine and expand the design without deviating from its core purpose.
To ensure the team effectively adopted the new component-based methodology, we implemented frequent communication and feedback loops. Through iterative testing and adjustments, we optimized the design for various viewports, guaranteeing clarity and responsiveness.
02
Final UI
Simplified and Clarified
We created a polished, adaptable design system for Event Cinemas by streamlining navigation, standardizing design, and using a modular structure. This fulfilled current project needs and built a base for future expansion.
03
The Outcome
Results
The final design of the Event Cinemas website successfully created a responsive and user-friendly platform that seamlessly adapts across devices. Despite a tight timeline and limited initial research, a component-based design approach allowed efficient content organization and presentation, resulting in a smooth and intuitive user experience. Close collaboration with the development team ensured challenges were effectively addressed, delivering a visually appealing and functional solution that met business needs and was well-received by the client.
04
Learnings
Design with Intention and Communicate it
Design needs to be rooted in reasons and intentions. Even if those reasons are flawed, clarity and actionability are established.
Adaptability Drives Progress
A flexible approach was key to overcoming tight deadlines and communication issues. I successfully addressed these challenges by suggesting and deploying a modular design. This resulted in a scalable solution that met the website's current requirements while also accommodating future growth.
Typography and Legibility
To enhance the legibility of often lengthy movie titles, narrow-width typefaces with large x-heights were chosen. This ensures clear text display across various devices, maintaining a polished and professional appearance. Additionally, pure white and black were avoided in the text to reduce eyestrain and further enhance readability.
Event Cinemas – 2016
Enhancing Clarity and Usability through Modular Design
01
Enhance user experience through streamlined navigation and responsive design across devices, establishing a scalable framework.
02
Collaborate with a remote development team (relatively inexperienced in front-end development) to integrate new design elements while maintaining existing visual identity.
Back to Other Projects
Go Home
Next Project