Project
Landmark District
Client
Stober Group
Type
UX/UI | Web Design
Role
UX/UI Designer | QA
Overview
The Landmark District by Stober Group is a rapidly evolving creative hub and business centre in downtown Kelowna, featuring over 1 million square feet of retail, dining, and office spaces.
With rebranding initiative for the Kelowna Business Centre our objective was to redefine its identity as a focal point for creative and progressive professionals. This involved creating a fresh digital presence through a redesigned website that prioritized user experience, responsive design and accessibility.
On this project, I worked closely with the creative director, development and marketing teams.
Challenge
As we aimed to establish the website as the central touchpoint for stakeholders, visitors, and businesses the key product challenge was to make Landmark District a place people want to be a part of. From a design standpoint, the challenge was "How can we boost conversion rates and increase the overall visibility of Landmark District?"
Constraints
Given tight time constraints, we adopted a phased approach, launching essential features first and adding more functionalities later. Additionally, we focused on developing a CMS-friendly environment to facilitate easy updates and content management, ensuring the website remains current and reflective of the Landmark District's ongoing growth.
Final Result
By streamlining navigation, refining the content structure, and incorporating interactive features, we enhanced user experience and facilitated easier access to information. The website’s design and functionality improvements not only aligned with the district’s brand identity but also effectively showcased its unique offerings. This has led to increased visibility, better user engagement, and a stronger online presence, supporting Landmark District’s growth as a central creative hub in Kelowna.
Staying in the Know with the Events Listing
A whole section of the website is dedicated to what's happening at Landmark District, helping users keep up with its new direction as a creative hub in the heart of Kelowna. This section together with the integrated Eventbrite plugin provides updates on events, ticket availability, activities, and initiatives ensuring residents and visitors stay informed and engaged with the vibrant community.
Find Available Spaces
For those who want to join the Landmark District, the interactive map offers a convenient way to check availability. By selecting a specific building, users can quickly access detailed information on available retail, dining, and office spaces.
Find Who's Already at Landmark District
Highlighting each business with detailed profiles, including their logos, descriptions, and key offerings. Users can easily explore the range of services and specialties provided by the tenants, from retail and dining to office spaces.
Research
Heuristic Evaluation
We conducted a heuristic evaluation of the existing Landmark District website, assessing it against established usability principles to identify areas for improvement. After the evaluation, it was clear that simply migrating the previous content under the new brand as it was initially proposed wasn’t enough; the website needed significant usability improvements. Disclaimer: since the new website has been launched, the old version is no longer available, so I can't provide the results of the evalution on the old website.
Competitive Analysis
For our competitive analysis, we examined well-established creative clusters across North America to identify market trends and improvement trajectories for the Landmark District in terms of content, informational architecture, and usability. We began with Granville Island in Vancouver, then expanded our research to include The Well in Toronto, ROW DTLA in Los Angeles, and Santana Row in San Jose. By studying these thriving creative hubs, we gained valuable insights into successful strategies and best practices that could be applied to enhance the Landmark District's appeal and functionality.
Some Key Takeaways From the Competitive Analysis
The results of our competitive analysis led to several key decisions to enhance the Landmark District website.
- First, we focused on updating the informational architecture of the site to help users navigate the website's content more efficiently.
- That also implied revising the tone of the language to better align with our target audience.
- To highlight the vibrant community, we strengthened the focus on the eventful life at Landmark District.
- Our design approach emphasized a simplistic and clean aesthetic.
- We opted for a different approach to redesigning the directory and revamp the search for available spaces and the registration flow for a more user-friendly experience.
Design
Information Architecture | Card Sorting | Wireframes | Prototyping
Information Architecture
At this stage, one of our primary goals was to build a clear and streamlined architecture for the website. We aimed to transition from the deep structure of the previous site to a flatter organization of the content, improving overall navigation. While we succeeded with most pages, we had to iterate on the commercial leasing section due to its substantial content. We split the commercial leasing section into three subpages: available space search, tenant improvement information, and the marketing page for the newest building, Landmark 7. Similarly, we consolidated the "News" and "Events" subpages under the "What's On" menu item. This strategy allowed us to reduce the number of items in the main menu, avoiding the need for a hamburger menu and streamlining the user experience.
Card Sorting for the Directory
The previous approach to tenant categorization focused on sorting them by business type, resulting in more than 16 categories in the directory. This created substantial navigation difficulties, as users had to scroll through many categories, which could be easily overlooked. To address this, we decided to implement a two-level filtration system to gradually narrow down the search, allowing users to find the needed business faster. We conducted three rounds of card sorting to determine the best allocation for existing businesses and identify the necessary global categories and subcategories. We also experimented with naming the categories using a more call-to-action language with verbs only. However, this approach did not work for most categories, as it created ambiguity and lacked clarity. As a result, we opted for more straightforward language that provided clear informational scent.
First Round of Sorting
Second Round of Sorting
Third Round of Sorting
Wireframes
After receiving the client's approval on the informational architecture and directory categories, we began working on the wireframes and prepared a low-fidelity prototype for the client's review. Our primary aim at this stage was to organize the content effectively, establish the main user flows, test the core functionalities and identify any potential issues early on and make necessary adjustments before moving on to higher fidelity designs.
Review with Cross-Functional Teams
We ran the first iteration of the wireframes with the development team and the client, which helped us better estimate the realistic outcomes for the Phase I launch. To prioritize the launch timeline, we decided to postpone some features on the directory page. Specifically, the search functionality, the second tier of filters on the directory page, and the map search were deferred to the second phase of the website rollout.
After reviewing the site with the digital marketing team, we agreed on separating the registration form, which were previously part of the leasing page, into individual page, adding the CTA to the main navigation and adding introductory copy to the pages across the website for better SEO considerations.
Prototyping
After consolidating the feedback from all the teams we started preparing a first iteration of the high-fidelity prototype.
Home Page
Who's Here
Available Spaces
What's On
Feedback and Next Iterations
After presenting the first iteration of the website design and receiving client feedback, we began working on revisions. A significant portion of the feedback was brand-related, particularly concerning the color palette, which was considered too vibrant and together with the heart monogram appeard ambiguous.
We completed two iterations of the brand elements before finalizing the design for production.
In addition to brand revisions, we also identified opportunities for usability improvements in the prototype.
Who's Here Page
One of the most challenging aspects was refining the directory page. We had to consider three key elements: incorporating feedback from the marketing team to include introductory copy for the page and each category, ensuring the navigation remained straightforward and user-friendly, and maintaining the brand's aesthetics. While all three components are crucial for a successful deliverable, we prioritized usability, followed by business and marketing goals, and finally visual aesthetics.
Available Spaces Page
The search functionality for available spaces was enhanced after the initial launch of the website. Specifically, we added more filters to enable a more flexible search. We also received feedback from the leasing team about the need for an option to share unit information. While this required unique URLs for each unit, which was not in the initial scope of work, we decided to include downloadable PDFs for the units which the leasing team could share.
Tenant Improvements
The tight timeline encouraged us to seek more efficient approaches for some sections. For instance, the initial idea of listing tenant improvement specifications on the site was reconsidered in favor of a less time-consuming and more product-oriented approach.
Key Takeaways & Future Thinking
Summary
In fast-moving projects like Landmark District, it is crucial to prioritize the steps of the design process and focus on the most impactful and valuable content of the website. By breaking the deliverables into manageable chunks, we were able to meet all deadlines and have the website ready for launch on time, with plans for post-launch improvements.
Staying in close communication with the entire team, from the design team to the client, ensured that everyone was aligned and working towards a shared goal. This collaborative approach was key to the project's success.
Analytics and Statistics
After the two weeks from the launch we resorted to google analytics to provide us with some numbers. We noticed a total increase of +120% for desktop users compared to +87% of mobile users.
Future Thinking
Looking ahead, the Landmark District website will continue to evolve to meet the needs of its growing community. Future enhancements will focus on integrating more interactive features, expanding the search functionality, and incorporating advanced analytics to better understand user behavior. Currently, we have launched the first phase of the website and are actively working on the second phase. This next phase will include adding filters to the events section for better navigation, incorporating leasing team information on the leasing page, and finalizing the CMS platform for client use. Through these updates, we aim to enhance user experience and support the district's dynamic growth.
© 2022 Anastasiia Ten