Leyline - Portal Case Study:
Enhancing Accessibility and User Experience
Visit Live Page
Leyline
Overview
Leyline is a software and hardware company specializing in queue management services. With over a decade of experience, Leyline develops innovative solutions that streamline and enhance customer flow. Developing cutting-edge products, such as accessible kiosks and advanced queue management systems, aim to improve user experience and ensure compliance with evolving accessibility standards.
Design and
Development
Design and Development
Design Requirements
The main design goal for me was to simplify Leyline's web page, focusing on the Portal extension for clarity. High-contrast text was used to cater to visually impaired visitors, and the design had to align with Leyline’s brand guidelines for consistency.
Development Process
The site was built on React, initially with Vite, but later migrated to Next.js for improved SEO and SSR performance. Technologies like Three.js, React Three Fiber, Tailwind CSS, Radix-UI icons, and Framer Motion were used. GitHub handled version control and code reviews.
Key Challenges
Challenges included ensuring accessibility for visually impaired users, converting a CAD model to a photorealistic, low-poly GLTF model using Blender, and managing continuous updates to the product model requiring dynamic visual content.
Design
Presentation
My decision to use 3D renders for this page was based on a rapid product development process and to keep up with weekly interactions. It would not have been possible to keep up with photography or video.
I have composition and modeling skills with Blender, where I prepared all the static and animated renders. All static images are saved in WebP lightweight format for web
Visit Live Page
Conclusion &
Key Takeaways
The page was completed on time before the expo, and we received great feedback on the product and information.
To make it work, 20% of the time was invested in understanding company values, product fit, how it helps the community, and asset creation.
The first time used Three.js - it took most of the development time. I had a CAD model from the start that I converted to a photorealistic model using Blender. Converting it to a low-poly GLTF was time-consuming task.
The biggest takeaway is that “Everything can be done, if you do not know how, it is only temporary.” Having support from an experienced team gives you the boost to work harder.
Design, Development Alex Zaj
Contact hello@alexzaj.com