Project
Aviary
Client
Tera Development
Type
UX/UI | Interactive Touchscreen
Role
Interactive Designer
Overview
The objective of the Aviary project was to create a brand identity and strategy inspired by nature preservation in an urban setting. The brand was intended to be colourful, vibrant, and community-oriented, highlighting a lifestyle that combines active living with environmental awareness. This identity translated into multiple deliverables, including a digital environment that prioritized responsiveness for the web application and accessibility for the interactive touchscreen.
The project's deliverables were designed to serve different purposes. The website primarily focused on storytelling, highlighting the lifestyle and community aspects of the project. In contrast, the interactive touchscreen was designed with a marketing focus, offering users a quick and efficient way to explore floorplans, the site map, features, and the community map. This ensured that the digital experiences were tailored to meet the specific needs of different audiences and contexts.
Challenge
One of the main challenges in this project was translating the brand into multiple digital deliverables while ensuring consistent brand identity across all elements but considering specifications of each deliverable. This included designing a responsive website and an interactive touchscreen interface. For the touchscreen, particular attention was given to the scale of the elements, considering the size of the screen and the height of its mounting. It was crucial to ensure accessibility for people of different abilities and heights, making sure the interface was intuitive and comfortable to use for all.
Constraints
One of the key constraints in designing the interactive touchscreen for the Aviary project was the lack of access to the actual hardware during the development phase. This limitation meant that we had to rely heavily on theoretical knowledge, screen specifications, and feedback from the development team to ensure the design would function effectively.
Outcome
Despite the challenge of designing for the touchscreen without direct access, the final deliverables were well-received. The presentation centre featuring the touchscreen was honored as a finalist for Best Project Identity at the Georgie Awards.
Design
Spacial Research
For the touchscreen deliverable, we conducted preliminary research on the environment where the interactive touchscreen would be installed. This involved measuring the height of the wall and determining how deeply the touchscreen would be embedded into it. We also assessed the room's lighting conditions, including the proximity of the screen to windows, to account for potential glare and reflections.
Accessible Navigation
We explored several options for the main navigation, initially considering a dropdown menu to conserve screen space and positioning the secondary navigation at the top to replicate a familiar desktop layout. However, this design didn't accommodate users of varying heights. We also thought about placing the navigation bar at the bottom for better accessibility, but since the touchscreen would be recessed into the wall rather than mounted on it, the edge of the wall could obstruct access. In the end, we settled on a right-sided menu and opted for a visible navigation system instead of a dropdown, ensuring a more streamlined user experience.
Iteration 1: The main navigation is displayed in a dropdown menu, while the secondary navigation is positioned at the top of the screen.
Iteration 2: The secondary navigation was moved to the bottom of the screen to enhance accessibility for users of varying heights.
Final Iteration: We revamped the navigation system, integrating the main and secondary navigation into a single, cohesive menu.
Designing for Different Screens
Designing for a 55" touchscreen versus a mobile viewport required different approaches for certain sections. For instance, the interactive map for selecting units was an excellent feature on the touchscreen, as the ample space allowed for its effective use. This feature also worked well on the desktop version of the website. However, on a smaller, vertically oriented mobile screen, using a sitemap for unit selection would have been less accessible. Therefore, we opted for a carousel feature to showcase the unit floorplans, providing a more user-friendly experience across devices.
Interactive Sitemap
Designing for Different Screens
Another section that needed a tailored approach was the interactive community map, designed for both the large touchscreen and mobile devices. On the large screen, we ensured accessibility for all POIs by incorporating an interactive list, addressing potential issues with POIs that might be positioned too high on the screen. For the mobile version, where touchpoints needed to be more accessible, we adapted the map by enlarging the POI markers, making them easier to tap and interact with on the smaller screen.
Interactive Community Map
Key Takeaways
This project was an invaluable experience that taught me how to tailor brand identity and assets to different deliverables, each with its own specifications and constraints. Designing for a large touchscreen was both fascinating and challenging. One key takeaway was the importance of gathering as much detail and information as possible about the spatial context. I had to consider not only the physical specifications, such as the height of the mounting, proximity to windows and lighting, and the size of the screen, but also the overall user experience in the presentation center where the touchscreen would be installed. To avoid redundancy, I ensured not to overload the touchscreen with text or finishing samples, as this information was already available in brochures and the interior design. Thus, the touchscreen primarily served the purpose of displaying floorplans and features.
Future Thinking
Looking ahead, I am determined to conduct several rounds of user testing for the touchscreen. This will help us understand how people interact with the design, identify any obstacles they face, assess how quickly they can find what they are looking for, and pinpoint potential areas for improvement in future projects.