District Database

Product  Designer
Product Design, Prototyping
KPF

Streamlining the process of creating amenity distribution graphics.

Context
KPF, a leading global architecture firm, faced a recurring challenge: their staff spent significant time manually creating visual comparisons of amenity distributions. The prior process was time-consuming and inefficient.

During the product's discovery phase, I was brought in to help define the project's vision and design the user experience and interface that would streamline the amenity comparison process for KPF's team.

Discovery

After conducting a series of in-depth interviews with their target audience, KPF recognized a pressing need for expert assistance. Their collected data was rich and diverse, but they struggled to effectively synthesize, comprehend, and transform these insights into a user-friendly experience.

Defining The Challenge

To kickstart the design process, I conducted a thorough analysis and synthesis of KPF's research data. This revealed key insights such as:
  1. Workflow Bottlenecks:
    Staff members struggled to locate and gather district data from various sources (project books, old client presentations, KPF’s Intranet, etc). After gathering the needed data, creating and exporting comparison visuals was a time-consuming process, which often required the use of multiple design tools.
  2. User Archetypes & Goals:
    The primary users will be junior architects, primarily engaged in data collection and visualization. Secondary users, such as principals and directors, will utilize the product less frequently, primarily for data search purposes. Tertiary users, urban analysts, will also engage with the product but their specific needs and objectives will be investigated in phase two.
  3. Limited Mobile Usage:
    Desktop will be the primary access device for most users, few principals and directors will be using tablets.
  4. Expected Session Duration:
    User engagement will vary by role and task. Junior architects will engage more with the product than principals and directors.

Empathizing With Users

To gain a deeper understanding of users' experiences, I mapped out their journey. By experiencing their challenges firsthand, I was able to empathize with their frustrations and uncover the root causes of their difficulties.

1. Finding Data

Jr. architects struggled to efficiently locate district data across different platforms.

2. Collecting  Data

Data was collected using different tools which created a disjointed workflow.

3. Visualizing Data

Comparison visuals were created manually requiring significant manual effort.

4. Exporting Data

Visuals were laid out to be added to client presentations, another laborious process.

By analyzing the current workflow, I identified significant challenges in data accessibility and visualization. Understanding these pain points and users' primary objectives (single-district search and multi-district data collection and visualization) helped me focus on developing solutions that would streamline the process of single-district search and collecting and visualizing multiple district data.

Understanding User Needs & Goals

To gain a deeper understanding of user needs and expectations, I created user personas, quick user stories, as well as user flows, laying the groundwork for a more efficient and user-friendly experience.
It became clear users will be accomplishing one or a combination of the following tasks:
  1. Searching:
    These user only need to search for a specific district in order to obtain a single piece of data (i.e. number of retail amenities in Nagoya Station)
  2. Searching & Gathering:
    These users will search for multiple districts and collect a maximum of four districts in order to create comparison visualization graphics
  3. Comparison & Refinement:
    These users will be comparing their collected districts and further refining comparison visualization graphics
Thus the experience could be divided into two main sections that would allow users to perform the needed task(s)

Design & Ideation

To create a frictionless user experience, I focused on addressing users' pain points and prioritizing the following key objectives:
  1. Make Data Accessible:
    Present critical urban district data in a clear, concise, and easily understandable format.
  2. Empower User Interaction:
    Provide users with the right tools to easily discover, gather, and tailor district data to their requirements.
  3. Increase User Satisfaction:
    Create an intuitive and user-friendly platform that boosts efficiency and minimizes task duration.
To achieve these goals, we agreed with the client that a responsive website would be the most effective solution.

Homepage

To cater to the primary needs of users who search and gather data, the homepage design needed to facilitate the following tasks:
  1. Efficient Data Discovery
  2. Granular Data Access
  3. Intuitive District Selection
  4. Advanced Data Filtering

My Collection

To customize and download comparison visuals, users can proceed to Collection Page. This page was designed to support the following actions:
  1. Visual Data Analysis
  2. Visualization Customization
  3. High-Quality Image Download
  4. Easy District Removal

Design System

Utilizing atomic design and an 8px grid, I created a scalable and responsive design system that provided a strong foundation for the development team.

User Testing

Users expressed satisfaction with the search, filter, and district collection features, requiring only minor adjustments. The majority of design updates focused on the collection page, reflecting feedback from both clients and users gathered during A/B testing.
Round 1 – A
Round 1 – B
Round 2 – A
Round 2 – B (Final Design)

Impact

The proposed designs and features will significantly enhance the efficiency and effectiveness of district data discovery, collection, and visualization. By streamlining these processes, I’m aiming to reduce user frustration and boost productivity, ultimately improving the overall user experience.
Before:

1. Finding Data

Jr. architects struggled to efficiently locate district data across different platforms.

2. Collecting  Data

Data was collected using different tools which created a disjointed workflow.

3. Visualizing Data

Comparison visuals were created manually requiring significant manual effort.

4. Exporting Data

Visuals were laid out to be added to client presentations, another laborious process.

After

1. Finding Data

A centralized data repository, coupled with intuitive search and filtering tools, makes it simple to locate data.

2. Collecting  Data

Users can effortlessly collect and curate districts with the streamlined collection tray feature.

3. Visualizing Data

Comparison visuals are automatically generated for users, who can then customize them to suit their needs.

4. Exporting Data

Light or dark themed slides can be easily downloaded for seamless inclusion in client presentations.

98%

Improvement In User Satisfaction

The positive feedback from directors and junior architects during user testing suggests that these implementations will be well-received and appreciated.

97%

Speedup In Task Completion

We anticipate a dramatic improvement in efficiency, with users experiencing a reduction in task completion time from 2-3.5 hours to approximately 5-10 minutes.

Next Steps

We're in the final stretch of this project. I'll be collaborating with the KPF team to finish up the remaining screens and get everything documented. I'm confident we'll be able to launch this successfully.

Next Project

FAQx

Edgar Angel