Case: Lyyra.fi UI/UX development
Client: Ylva
Project type: UI/UX & web design
Date: 2023
Project scope: UX research, UI/UX, web development, GA4 setup and analysis
Lyyra, situated in the vibrant district of Kallio in Helsinki, stands as a pinnacle of sustainable building endeavors in Finland. Its genesis involved the redevelopment of the former Kallio administrative buildings, with an exemplary 97% recycling rate of demolition waste. This innovative city block encompasses an array of establishments, including brick-and-mortar stores, restaurants, services, an office building, apartments, and a distinguished Nordic design hotel.
Project summary
I was tasked with incorporating Lyyra's new apartment leasing aspect to the existing website; however, analysing the site made it clear it was cluttered and difficult to navigate due to the lack of a cohesive style. On top of performing a user survey and competitor analysis for the real estate services, I established a design system and redesigned the entire site to ensure a cohesive style across the page.
Above: Two screens from different landing pages. Note the completely different hero sections, text placement, and type scale.
Project inception and brand development
In 2017, Ylva secured a victory in the city of Helsinki's lot competition with Lyyra as its proposal. However, until my involvement in 2019, the city block lacked a cohesive brand identity, marketing strategy, or an informative homepage beyond competition materials. Initially entrusted with crafting Lyyra's brand identity, my role organically expanded into the realm of web development.
Project goals and evolution
Navigating the early stages of the project presented challenges in deciding on precise needs and goals. In its early stages, Ylva's focus was on forging partnerships, leaving limited content for public dissemination. Over the years, the project underwent significant evolution, prompting multiple revisions to our goals and the purpose of the website. The expanding spectrum of target audiences, spanning potential office tenants, locals interested in residential offerings and services, stakeholders, and hotel visitors, necessitated a strategic realignment.
Refined objectives and audience-centric design
Ultimately, our goal crystallized into creating a comprehensive website catering to the diverse needs of all stakeholders. Balancing pertinent information for office tenants, locals exploring residential options and services, stakeholders, and hotel visitors required a meticulous approach to prevent information overload and maintain navigational clarity.
Methodologies and implementation
Leveraging Lean Service Creation techniques, I carried out an ideation workshop involving Ylva's marketing and premise management teams. To refine content strategies, two distinct rounds of user interviews were conducted, employing Hotjar's survey tools for insights into user experiences on an existing version of the site, as well as a separate survey particularly regarding apartment and leasing services online. The intricate process culminated in the design of final wireframes on Figma, with the website materializing through Webflow.
Above: As part of the process, I clarified the typographic scale, amongst others.
Constraints in the final design process
Early in the final design process, I identified a crucial constraint during discussions with the marketing and premise management teams—the pressing need for a swift website launch. Despite the urgency, the decision was made to integrate new sections into the existing version of the site. Whether introduced as entirely new subpages or through modifications to existing content, this approach seemed optimal given the tight project timeline. However, a comprehensive analysis, including a heuristic examination of the site and user survey data, unveiled a critical flaw: key sections and pages, like office leasing and construction site information, exhibited completely disparate styles, interactions, and graphic elements. This inconsistency rendered the site highly challenging to navigate, with users unable to distinguish between the home page, subpages, and campaigns, leading to notable errors and the necessity to memorize navigation paths for content review.
Solution: redesign and unification
Despite the imminent deadline, I made the decision to undertake a complete site redesign to address the identified issues. This approach not only required additional effort but also provided an opportunity to establish a design system for a cohesive user experience. Leveraging Webflow's advanced variable tools further empowered content managers.
Implementing a unified design system
The redesigned site aimed to reduce clutter, enhance navigation clarity, and introduce a modular content management system. This system empowered content managers to seamlessly add or hide sections and elements based on dynamic requirements.
Innovative addition: apartment leasing section
A notable achievement within the project was the incorporation of an apartment leasing section, featuring a comprehensive list of all Lyyra's apartments along with their availability status. Utilizing Webflow's CMS, the backend of this listing was streamlined; keeping it up to date demanding minimal effort from the leasing team. Additionally, it provided valuable insights for Ylva by tracking popular apartments and submission patterns.
Results and impact
Upon the site's relaunch, Ylva experienced a significant response, receiving nearly a hundred inquiries about the 52 apartments within the first week. Furthermore, only one office space remained available for lease. Notably, the final home page exhibited a remarkable 36% increase in performance on mobile devices, showcasing the tangible impact of the redesigned user interface.
The whole project is live at lyyra.fi!
