Community Resource Page
user research / ux design / visual design
Year & Scope
2020 / 6 weeks
My Role/Team
Lead UX Designer, Researcher, Illustrator, Project Manager /
Project team composed of myself, a researcher/designer, and a front end developer
Toolbox
The Challenge
My CHI. My Future. (MCMF) is a platform that connects young people in Chicago to out-of-school opportunities in the community and online. It features a robust collection of activities and strives to provide equitable access for all across Chicago's 77 community areas. While this platform allowed users to filter activities by community, there was an opportunity to leverage MCMF to provide residents a larger snapshot into their community's current opportunity ecosystem. In addition to helping residents better understand what their community has to offer, this feature could dually serve as a resource for program providers to gauge each community and to plan their programs in response to visible opportunity gaps.
The primary goals of this project were to better understand how Chicago community members perceive their local opportunity ecosystem and to develop a page showcasing a community's offerings and resources using existing platform data.
The Process
1. Identifying the Requirements
The requirements for this project were drafted using insights from prior research conducted by research affiliates with residents of Chicago's Austin community. The results of these research projects suggested Chicago residents - particularly parents and other caring adults - oftentimes do not see the full scope of opportunities for youth within their community, and that most are eager to take initiative in learning about their local opportunity landscape.
Working alongside a researcher and designer, I identified youth and caring adults as the target users of this feature. Next, I drafted a set of epics and user stories to guide the direction of this work. When doing so, I prioritized the immediate needs of the users for a minimal viable product (MVP) that could be feasibly designed, developed, tested, and released within a 6-week timeline using existing data. This process uncovered two primary requirements for the first release of the page: a method for finding and sharing local opportunities and a method for browsing all organizations that offer programming in the area.
2. Information Architecture
One of the first steps in designing this page was to identify where and how it would be integrated within the existing platform. Understanding the current information architecture (IA) and the common workflows of youth and parents on the platform, I proposed the solution be implemented as a new "type" of page linked from multiple points on the site. The page would originally be built and released to stakeholders as a standalone page with a clean URL, with the intention of building more connections to the site over time.
3. Concept Design & Prototyping
Using the defined user stories, requirements, and IA plan, I proceeded to create sketches to begin visualizing the page. The conceptual designs incorporated the below assumptions, with the intention of validating these points in a final focus group with representative users.
-
Our target users search and plan for local events within a short period of time
-
Our target users value local organizations as much as non-local organizations that frequently offer programming in their community.
Once I reached a good starting point for the design, I translated the sketches into mid-fidelity (mid-fi) mockups on Adobe XD to gather internal feedback from the team. All designs included a desktop and mobile view, as I wanted to ensure the design was mobile-friendly. From this feedback, the designs went through several more iterations as we sought to find a balance between catering to novice and seasoned platform users, and between displaying important details while avoiding cognitive overload and clutter.
The mid-fi mockups were then translated into a high-fidelity prototype that encompassed the final styling, graphics, and interactions. The design was created using the style guidelines previously established for the platform to properly brand it as a MCMF feature and to create a cohesive experience throughout the site. I created custom graphics and illustrations matching this style for use on the page. All tiles displayed on the page presented placeholder data to suggest how the page would look for a mid-sized community with various youth-centered activities.
4. Testing & Delivery
The researcher and I conducted a final focus group with 10-15 parents from the Austin and Humboldt Park communities to test our prior assumptions, gather feedback on our design, and to gain insights that could inform future additions to the page. My role in this group was to act as a note taker for one of the parent tables (three research assistants observed the other groups), and to consolidate all research notes from the event.
Feedback received in this focus group validated the usability of the design and provided ideas for future additions to the page. Most participants immediately honed in on the upcoming events list and noted this as the most helpful part of the page. Several also verbally confirmed our second assumption, in that they value local organizations as much as non-local organizations offering nearby programming. Following this session, the design was finalized to include empty states - a rare but potential occurrence - and packaged for development in our shared project management tool Asana.
Insights from prior research were used to generate a list of preliminary user stories and epics. These statements identify the needs and motivations of users and translate into product features.
Proposed Information Architecture detailing where the page sits and how it interacts with other parts of the site
Original sketches and mid-fi mockups presented to internal team members for feedback.
THE FINAL DESIGN
Reflection & Contributions
Reflecting on this work, I think the resulting design is usable and holds utility for its intended audience. However, I feel this design could be improved upon. As an MVP solution, the final design works to display existing platform data in a visual way. With more time and resources however, this design could be expanded upon to include more innovative displays and functionality. By exploring additional community-centric data available and what users might want to do beyond observing this information, this could become a powerful feature.
My specific contributions to this page include: the general page layout on desktop and mobile, the layouts for the community name, "Local Providers", and "Explore More" sections on desktop and mobile, and all custom illustrations (the Chicago skyline, "Explore More" graphics, and empty state graphics).