W I S E Connect

Search & Filter Function

My Role

UX Researcher
UX/UI Designer

Timeline

Sep 2023 - May 2024

Focuses

UX Research, UX/UI Design, Usability Testing

Tools

Figma, Google Workspace, Zoom, Discord, Slack, Notion

Introduction

An accessible digital platform that helps older adults stay engaged in communities.

Spanning the Fall 2023 to Spring 2024 semesters, this capstone project is undertaken by a dedicated team of five graduate students from the University of Maryland in pursuit of a Master's degree in Human-Computer Interaction: Nghi Le (myself), Abby Rasheed, Anne Badt, Chhavi Kumar, and Sudhanshu Sharma.

Bridging the gap between academic learning and professional practice, our collaboration with the social entrepreneur WISE Cities allows us to hone our skills in UX/UI research and design, leadership, problem-solving, teamwork, and client interaction. Throughout the project, we iteratively perform the tasks of research and analysis, ideation, design, evaluation, and refinement in “design sprints”, each spanning 4-5 weeks, adapted from the Google Ventures Design Sprint process.

In Sprint 1, our team kicked off the project by conducting background research on WISE Cities and preliminary user research to align ourselves with the client’s vision, the project scope, and empathize with our users. In Sprint 2, we designed and tested WISE Cities’ most prominent feature: the Search and Filters. In Sprint 3, we designed and tested the event calendar function. Sprints 4 and 5 are dedicated to designing, testing, and improving the in-app tutorial for the WISE Cities platform.

Please use the navigation menu on the left-hand side (available only on desktop) or click on the highlighted texts to navigate to corresponding sections.

MY CONTRIBUTION

I actively practice as a UX researcher, UX/UI designer, project manager, and sprint facilitator.

Throughout each sprint, I diligently engage in every step as a professional UX/UI researcher and designer. As a UX researcher, I recruit research participants, design surveys and interview questions, schedule and conduct interviews and focus groups remotely and in person, analyze qualitative and quantitative data, and consolidate user journeys and personas. Our research process has engaged over 50 participants, combined with precedent research from WISE Cities, resulting in data analysis from over 100 participants.

As a UX/UI designer, I ideate, sketch, and prototype 3 key features for the WISE Cities platform: the search and filter function, calendar view, and in-app tutorial. My proficiency UX/UI and visual design principles, coupled with meticulous attention to details resulted in thoughtful and comprehensive design solutions that are highly regarded by both the client and peers. Collaboratively, I plan usability testing scripts, conduct tests on nearly 100 product screens with over 25 participants, lead product demo sessions, collect and interpret user feedback to improve the design.

During Sprint 4 and 5, I also take on the role of project manager and sprint facilitator. As the project manager, I coordinate different parts of the project, from research to design to testing, ensure team alignment and transparency, and oversee all client communication. As the sprint facilitator, I prepare and lead client and group meetings, fostering a harmonious and productive environment where every voice, from stakeholders to team members, is heard and respected. Through effective communication, strategic organization, and a strong sense of responsibility, I steer the team towards meeting our goals within the tight timeline, ensuring high client satisfaction.

Project Overview

SPRINT 1

Project Kick-off

The first step of the project was to align ourselves with WISE Cities’s mission and business model through client meetings and background research. We established a shared vision with the client by clearly defining the problem to be resolved and outlining the project goals.

WISE (Where Innovation Supports Everyone) Cities focuses on addressing the social isolation often experienced by older adults through an accessible web platform that helps older adults explore opportunities within their local communities, like finding a chess class at a local senior center or accessing transportation services to get there. The platform is WCAG AA accessibility compliant, multilingual, and is planned to include AI-facilitated features, making it user-friendly for a diverse range of users.

To learn more about WISE Cities as our client, our team consolidated the Business Model Canvas, in which we looked into their key partners and resources, value proposition, customer segments, cost structure, and revenue streams. Simultaneously, we conducted a comprehensive Competitive Analysis by studying 10 direct and indirect competitors of WISE Cities such as FindHelp, AARP, Senior Navigator, and Eventbrite to identify their value propositions, business models, successful strategies as well as drawbacks.

Why did I choose WISE Cities?

I chose to do my capstone project with WISE Cities because this is a cause close to my heart. Throughout my personal and educational journeys, I have been fortunate to receive guidance and support from many older adults, and this project to me is an opportunity to give back and contribute meaningfully to their well-being.

From 2022-2023, I had the privilege to work as a Digital Navigator at Marylander Online, a state-funded initiative by the University of Maryland Extension, providing tech support and resources for internet connectivity and devices to Maryland residents. Many of those I assisted were older adults struggling with everyday online tasks, evincing the prominent digital divide the older generation is facing regarding access to and proficiency with modern technology.

Having WISE Cities as my client for this year-long capstone project, I am excited to be part of a team that uses innovative technology to address social challenges and make an impactful difference in people’s lives, especially for demographics that are often overlooked in the tech world.

CLIENT PROFILE

WISE Cities is a UMD student startup that helps older adults stay engaged in local communities.

In an increasingly digitalized world, older adults often face challenges in staying connected with their communities and accessing essential resources as they age in place. The lack of user-friendly digital platforms tailored to their needs increases the risk of social isolation and hinders their ability to engage with local services and events. How can WISE Cities address these barriers and develop an accessible digital platform that empowers older adults to remain active in their communities, while facilitating access to relevant resources and events, thus promoting social connection and enabling independent aging?

After establishing an overarching problem statement, we consolidated three clear goals to align the team and stakeholders on the project’s scope and focus. Besides addressing social isolation by encouraging community engagement and exploration of new opportunities, we also aim to contribute to older adults’ health and well-being by connecting them with valuable community resources that empower them to age independently. Acknowledging the unique technology-related challenges and concerns faced by this demographic, our team focus on researching and developing a user-friendly and accessible digital platform tailored to the needs, habits, and preferences of older adults.

What are the long-term goals of our project?

Encouraging community engagement and exploration of new social opportunities.

Facilitating access to community resources and organizations for aging independently.

Overcoming barriers to technology and develop an accessible platform tailored for older adults.

PROBLEM STATEMENT

How might we address social isolation in older adults and support them in aging independently?

Preliminary User Research

As part of aligning ourselves with the project scope, during Sprint 1, our team conducted interviews with older adults to gain a comprehensive understanding of their current experiences with aging and community engagement. We then analyzed the interview data using an affinity diagram, which helped us consolidate our findings into detailed insights.

RESEARCH PROCESS

Interviewing older adults provided rich, firsthand insights into the design problem.

At the start of the project, our team quickly familiarized ourselves with WISE Cities’ precedent research materials and databases. While this helped summarize existing knowledge of the design problem, we, as UX/UI researchers and designers, recognized the need for firsthand insights into the experiences and needs of older adults. Collecting information directly from primary sources through interviews allowed us to immerse ourselves more deeply in the project and develop a stronger sense of empathy for users' pain points and needs.

Collaborating closely with our client, we developed a comprehensive interview plan to gain valuable insights into older adults’ community engagement patterns, their perceptions and access to community resources, as well as their preferences and behaviors in information-seeking. This approach allowed us to gather rich, unique qualitative data to make informed design decisions on the WISE Cities platform. The full interview plan can be reviewed here.

Over the course of 2 weeks, we contacted, scheduled, and conducted 5 remote interviews with senior citizens. Our participants, consisting of 3 females and 2 males, ranged in age from 70 to 80 years old. They were retirees living either alone or with their spouse in various locations across the U.S., including DC, Virginia, Maryland, Illinois, and Iowa.

Nghi Le conducting a remote interview with a research participant whose face has been blurred for anonymity.

Me conducting a remote interview with a participant during Sprint 1.

Our participants shared with us their aging experiences, future plans, current engagement in communities, and approach to technology. We opted for the affinity diagram to analyze the interview data because it is a widely recognized and effective method for synthesizing qualitative data. Affinity diagrams allow us to organize large amounts of information into meaningful categories and themes, helping us identify patterns, insights, and connections within the data. By visually mapping out the data in this way, we can gain a deeper understanding of our participants’ experiences, preferences, and challenges, which in turn informs the development of practical and actionable strategies for our project. Our full affinity diagram can be reviewed here.

DATA ANALYSIS

The affinity diagram is effective for synthesizing qualitative data and extracting patterns.

On aging:

  • Being in good health and having a good support system is crucial to aging happily.

  • Our participants care about aging in place/aging independently and want to have easy access to good resources to do so.

On social engagement:

  • Our participants are strongly interested in cultural activities, volunteering and giving back to the community.

  • Our participants have plenty social opportunities readily presented to them, but would like some help in filtering and selecting them.

On technology:

  • Our participants are capable of using the internet independently and adopt technologies in many aspects of their lives.

  • Our participants think technologies could be more organized, straightforward and user-friendly.

KEY FINDINGS

Important discoveries about how older adults experience aging, stay engaged socially, and feel about technology.

RECOMMENDATIONS

Based on our findings, we recommended useful and practical implementations for the WISE Cities platform.

1. Implement shallow site map and simplify user flows: Logically organize categories and topics for quick access to information, relying on recognition rather than recall, given potential memory issues in the older adult demographic. Ideally, users should be able to find needed information within 1-3 clicks. Conducting card sorting exercises and user testing could help determine the optimal information architecture and navigation.

2. Develop intuitive filtering and sorting function: The abundance of information and available social opportunities can be overwhelming and discouraging for older adults. An intuitive and user-friendly filtering and sorting function takes into consideration older adults' unique needs and preferences to refine and organize options based on accessibility, time, location, format, topic, and cost, providing sufficient and relevant information for older adults to make the most suitable choices.

3. Prioritize user support through human interaction: Our research indicates that older adults highly value human interaction when encountering tech issues. Our candidates believe that introducing tech support chatbots or email may further complicate their issues rather than resolve them. In light of this insight, we recommend implementing a real human tech support hotline, as this personalized approach would boost older adults’ confidence, trust, and significantly enhance the overall user experience.

What were the challenges and how did we overcome?

Recruitment Complication: Our client couldn’t provide us with research subjects due to scheduling complications with senior center partners within the sprint timeframe, so we had to rely on personal contacts to recruit participants.

Our solution: We employed the snowball sampling method, where we invited older adults we know to participate, and asked them for introductions to other older adults who might be interested in joining our research.

Limited Diversity: Even though the snowball sampling approach allowed us to expand our participant pool, we acknowledged a limitation – our participants weren't as diverse as initially hoped. They were of similar demographic backgrounds and were already highly involved in their communities, not actively seeking additional social commitments.

Our solution: Learning from this, we prepared a screening survey for the next round of in-depth research, asking preliminary questions regarding demographics, technology usage, and community engagement levels. This approach would allow us to segment the targeted population into groups and select interview participants from each group to ensure a more comprehensive representation of perspectives and experiences.

My Role in Sprint 1 👷🏻‍♀️

During Sprint 1, I worked as a UX researcher to conduct background research on WISE Cities and their competitors, plan interview questions, conduct interviews with older adults, analyze qualitative data, and present to the client our research findings and insights. I actively reached out to personal contacts and their connections to recruit them as research participants and acted as the point of contact to facilitate the scheduling process. I also led the affinity mapping sessions to organize our data and extract insightful patterns to guide our next steps.

Search and Filter Function

Our team designed the search and filter function of the WISE Cities platform following the design sprint stages of mapping, sketching, deciding, prototyping, and testing.

Our research from Sprint 1 revealed that older adults encounter challenges with popular online search engines, including feeling overwhelmed by excessive search results and struggling to find relevant keywords. Thus, our objective for Sprint 2 was to develop WISE Cities’ user-friendly search and filter function to provide relevant results without complication. Framing this goal as a ‘How might we’ question marked a shift from problem identification to problem-solving.

Our aim was to provide users with two intuitive options: searching by keyword or browsing by category. Searching by keyword offers a faster and more precise approach, while browsing by category encourages exploration when users are unsure of specific search terms. Both options seamlessly integrated two simple refining steps for accurate and relevant results: entering location and applying filters.

MAPPING

How might we design an easy-to-use search and filter function that helps older adults find what they need without feeling overwhelmed?

Following the mobile-first approach, each team member independently ideated and sketched potential solutions for the search and filter function. Afterward, we held a client meeting to present, evaluate, and vote on the most promising ideas. My proposals, including a map view for location-based search, a 'Save Search' feature for quick access to past searches, and a comprehensive filter system including various criteria such as distance, date, time, cost, language, transportation, and accessibility, earned both client and team member approval.

Preliminary sketches

Click on the images to view in full-screen.

Solution sketch

SKETCHING & DECIDING

Each team member sketched their solutions, and then, together with the client, we voted on the best options.

WISE Cities' established design system, featuring a vibrant color palette, larger text size (minimum 20pt), and prominent buttons, caters to older adults with novice tech skills and complies with the WCAG standard Level AA. In response to the client's request, we incorporated the option to browse by topic, seamlessly switchable with categories via “binder” tabs, a concept familiar to many older adults. Categories and topics are presented as drop-down menus to streamline navigation and minimize scrolling. The Sort and Filter function is straightforward and offers comprehensive, collapsible options, enabling users to refine results by category, topic, date, time, distance, cost, accessibility, and language.

Design Iteration 1

1. Landing Page - Categories

2. Landing Page - Topics

3. Filter Page

4. Search Results Page

PROTOTYPING

We prototyped the search and filter function following WISE Cities’ design system and focusing on streamlining navigation.

Tips on design and test with older adults

💡 Simple and engaging language and visuals: Use clear and simple language (no technical jargons!) to convey just the right amount of information - not too little that it’s confusing, and not too much that it’s overwhelming. Similarly, keep visual designs clean and uncluttered for easy understanding, but don't shy away from adding some bold design elements! Many older adults appreciate the vibrant color palette of WISE Cities, finding it fun and inspiring.

💡 Design for accessibility: Ensure that all materials, including digital interfaces and physical documents, are accessible and inclusive. Use larger fonts, high-contrast colors, and intuitive navigation to accommodate potential vision or cognitive impairments. Considering mobility issues in older adults, platforms should also implement voice recognition features to allow for hands-free interaction and use large buttons for easy tapping or clicking.

💡 Tailor your testing methods to older adults: Traditional methods like the think-aloud protocol may not be suitable for older adults due to cognitive load. Pay attention to non-verbal cues and gestures along with verbal feedback. Take note of any instances of confusion, frustration, or hesitation. Always prioritize in-person, moderated testing since many older adults may not be familiar with video conferencing platforms or interacting with prototypes independently.

TESTING

Older adults were impressed by the filter system and enjoyed having flexible ways to search.

100%

All participants successfully navigated the design, entered keywords, and applied filters to get refined search results.

task success rate

3

Participants liked the flexibility to choose their own keywords, browse categories for exploration, and showed interest in the incoming search-by-map feature.

different ways
to search

steps

Participants preferred that information be readily visible with minimal 'clicks.' They also provided feedback on clearer wording to use.

More

clarity

Less

DESIGN CHANGES

Based on user feedback, we implemented changes to improve the clarity and efficiency of the search and filter function.

This content is being updated.

Reflection

This journey has been an amazing learning experience, during which I have gained significant academic, professional, and personal growth. Alongside honing my UX/UI research and design skills, I have had the opportunity to enhance my communication and leadership abilities, particularly in interactions with our client and collaborating effectively with diverse team members. Additionally, engaging closely with older adult, a vulnerable demographic, as a crucial part of our design process has yielded invaluable insights. This experience has deepened my understanding of the unique challenges faced by older adults and reinforced the importance of empathy in design. I look forward to sharing more of our sprints and project outcomes. Stay tuned for updates!

Nghi Le along with her teammates and participants at a research event.

Myself (front row, second from the left), alongside two team members, the Chief Product Officer of WISE Cities, and older adult participants at a research event. All participants have provided consent for the use of their photos.

Thank you for reading!