Information
Selected credits
Denis Didenko
Alexander Malinovskiy
Overview
Creating a dynamic website that captures the unique vibe of North Star's arcade and enhances business opportunities
Client
North Star offers fun and immersive pinball machines, arcade games, and photo booth experiences. Located in the North Star warehouse in Montreal, this private free-play arcade features a curated selection of games and a relaxed lounge with a jukebox for added enjoyment. Ideal for kids' birthdays, corporate retreats or weddings, North Star is available for rental by the hour or for the entire night, delivering a fun experience for any occasion.
Solution
To meet the North Star team's request, we developed a modern online presence that effectively showcased their background and services. We unified their three separate websites into a single, cohesive platform, enhancing navigation for user-friendly access. The design featured vibrant colors and a bold font, reflecting the brand's personality while engaging visitors.
Challenge
The North Star team - wonderful to work with - approached us with the request to create a modern business online presence that would showcase their background and services in an engaging, fun, and informative way.
Research
Context & initial steps
1. Context & initial steps
At the start of the project, the client's online presence was fragmented across three separate websites: one for the bar, one for arcade rentals, and another for arcade sales. The first step was to hold several collaborative meetings with the client, during which we mapped out the site's structure on paper. Together, we identified which pages to keep and which to eliminate to create a cohesive, user-friendly experience.
3. Key insights
- Lack of Optimization: Competitors' websites were poorly optimized for different devices.
- Complex Navigation: Customers found it difficult to complete the rental or purchasing process due to confusing navigation.
- Poor Mobile Experience: Limited mobile optimization led to frustrating user experiences.
- Boring Design: Despite offering a unique product, the existing site lacked excitement and engagement.
2. Research process
Once the structure was defined, I conducted detailed research including:
- Competitor Analysis - Identifying strengths and weaknesses of competitors in the industry.
- Audit of Current Websites - Evaluating the usability and performance of the client's existing sites.
- Analysis of Successful E-commerce Websites - Gathering insights from industry leaders.
- Customer Feedback - Analysing customers across Canada.
4. Solutions based on research
- Unified Website: Consolidated all three sites (bar, rentals, and sales) into a single, cohesive platform, eliminating fragmentation and improving user experience.
- New Branding: Introduced a fresh, modern identity with vibrant colors, a sleek, contemporary font that reflects the brand's personality.
- Conversion-Driven Design: Applied effective marketing techniques, such as strategically placed animated call-to-action buttons that catch attention and encourage interaction.
Design
During the wireframing and sketching phase, hundreds of sketches were created, carefully mapping out user journeys and thinking through key functions. Each page's structure was composed, refined, and approved to ensure alignment with both business goals and user needs
Stylised graphics
For membership digital cards, we took inspiration from the charm of old arcade games and adapted their covers to give them a fresh twist
Visual language
In the process of defining the right creative direction, the stylistic approach was defined. With a strong focus on typography, we prepared a simple yet effective repertoire of blocks & compositions that allow for featuring the various content of the website in its natural flow. The arcade website is full of vibrant atmosphere, characterized by vivid images and large, bold elements
Color palette
We spent a long time choosing colors and eventually found a really cool palette in a Japanese color book (thanks to a client)! Given the vibrant imagery of the arcades and warehouse, we used a rather simple color palette, focusing only on essential hues. This approach ensures that the bold visuals stand out without overwhelming the user, allowing the videos and posters to take the center of the stage.
Typography
For typography, we chose a masterfully crafted Monument
Grotesk
by ABC Dinamo. We were pleasantly surprised and honoured by the comment of Johannes Breyer,
co-founder of ABC Dinamo:
“WOW!! the website looks super super cool. just spent a good amount
of time on it. so well designed, and the content of course … mamma mia, i love it!!!”
Handoff to development
The design handoff was professionally prepared for the developers. The developers were so happy about the file they even shared it with their colleagues!
Pixel-perfect Figma file | adaptive screens
We prepared a pixel-perfect design using a spacing system based on 5-pixel increments, optimized for three breakpoints: Desktop, Tablet, and Mobile, ensuring consistency and responsiveness across all devices.
Annotation system
To ensure clarity, we provided detailed annotations wherever needed. These included precise descriptions of animations, link destinations, button behaviors, and edge cases - such as how elements adapt if a block becomes wider or text shorter.
Well-organised UI kit
We began by consulting with the developer to determine exactly what was needed for a smooth development process. Since the site was being built on Shopify using a theme, we identified that a simple, essential UI kit for the key elements would be sufficient.
Client support
Comprehensive instructions were provided to the Client in case they wish to independently add or update products, adjust prices, change text, and more. Additionally, the Client can always reach out to us for any updates or adjustments
Results
Results
Inbound leads increased by 500%
The team excelled at project management by delivering on time and within budget, communicating effectively, and managing expectations well. Their talent for branding and design was a highlight of the project.
Honors & e-commerce nominee
The North Star website was recognized by Awwwards, earning both an Honorable Mention and an E-commerce Nominee distinction. These accolades highlight the site's exceptional design, usability, creativity, and innovative approach, placing it among the top-rated projects in the global web design community.
