Role    Product Designer (UI/UX)
Industry    Commercial Interior Design & Construction
Website    arkandmason.com

Redesign website changing exposed menu for slide menu animation. Mockup gif in Figma.

Ark and Mason is a Vancouver-based firm specializing in commercial interior design and construction management. Their portfolio includes a diverse range of projects, from healthcare clinics to beauty bars. The challenge was to create a digital presence that reflects their expertise, showcases their portfolio, and facilitates client engagement.
Their website was designed by me in 2023 and Is being redesigned right now and the team of hardworking architects doesn't have much time to collect signs of their creative process. So as the other companies in the umbrella, I am taking care of join all details in their process to reinforce the their storytelling.
Graphic Assets Production with AI

Creating consistency through graphic assets using Nano Banana AI and Figma

Design Challenges
Complex Content Presentation
Effectively displaying detailed project information, including scope, location, and services.
Covering 
User-Centric Navigation for Different Personas
Designing an intuitive navigation system that caters to potential clients seeking specific services.
Client initially focused on other small business and wanted to over explain processed also reinforcing SEO with the goal of being online authority in Vancouver. 
Brand Alignment
Ensuring the website accurately represents Ark and Mason's brand values and aesthetics that expended along the years becoming authority not only in design creation but also legal process from permits to start building to enter the building.
Design Process & Solutions
1. User Flow Optimization
Persona Development: Identified key user personas, including potential clients, partners, and industry professionals.
Journey Mapping: Mapped user journeys to streamline navigation from homepage to contact.
Information Architecture: Organized content to highlight services, portfolio, and company values.
2. UI/UX Design Implementation
Responsive Design: Ensured the website was fully responsive, providing an optimal experience across devices.
Interactive Elements: Incorporated interactive elements to engage users and showcase projects effectively.
Visual Consistency: Maintained a consistent design language that mirrored Ark and Mason's brand aesthetics.
3. Cross-Disciplinary Leadership
Architectural Guidance: Provided insights on spatial layouts and design elements to inform digital representations.
Marketing Collaboration: Worked closely with the marketing team to develop graphic materials, ensuring alignment with the brand's vision.
Supervision of Visual Assets: Oversaw the creation of floor plans for marketing purposes, 3D renderings, and interior design elements for promotional materials.

Playing with background design, flipping cards and carousel in WordPress to join a heavy text process description.

Outcomes & Impact
Enhanced User Engagement: Increased time spent on the site due to interactive and informative content.
Streamlined Client Acquisition: Improved lead generation through intuitive design and clear calls to action.
Brand Consistency: Achieved a unified brand presence across digital and physical marketing materials.
Key Learnings
Architectural Insight in Digital Design: Leveraging architectural knowledge can enhance the accuracy and appeal of digital representations.
Importance of Cross-Disciplinary Collaboration: Close collaboration between design, marketing, and architecture ensures a cohesive brand experience.
User-Centric Design: Prioritizing user needs leads to more effective and engaging digital experiences.

You may also like

VCH Lab Wiki
Laboratory Test Directory Website (Vancouver Coastal Health)
Bella Platform & Marketing
Bella Platform enables seamless project requests, creative execution, and management oversight, all unified through a cohesive and efficient UX design system.
La Riviere Pre-Sale
A Seamless Blend of Architecture and Digital Experience on a Responsive Website, Complete Marketing Package and Ipad App
LUK Real Estate
UI/UX Solutions for Luk Real Estate Group: Showcasing Vancouver’s Premier Commercial Spaces
Self Check-In App
A self-service check-in platform designed for TSB Healthcare that eliminates front-desk congestion — letting patients arrive, check in, and join the queue digitally, while giving staff real-time visibility across every healthcare facility.
LOB Platform & Events
LOB — Lab Online Booking is a live provincial healthcare scheduling platform connecting British Columbians to laboratory services across five major health authorities — Fraser Health, Vancouver Coastal Health, Providence Health Care, Interior Health, and Island Health — with over 70 clinics and 3.6M+ bookings processed to date.
Bella AI Catalog
Following the success of the Bella Catalog and Bella Platform, which redefined how real estate professionals curate and present their listings, I led the next phase of the ecosystem’s evolution — integrating AI-driven creativity directly into the workflow.
Play Versus
Play Versus Website & Marketing Assets 2025/2026
E-Sim by Cellunlocker
A modern eSIM commerce experience designed for a 20-year mobile industry leader, built on WordPress and WooCommerce for clarity and confidence.
Back to Top