FriendFrame

An interactive glass surface for community members to bond together creatively in green spaces.

Context

 01
For this project, I was a member of DFA UW, an organization that applies the design process to various social issues from health, education, environment, and more. I was thrilled to work on this project as a UX/UI Designer along with other team members and a project manager.

Date

December 2019 - June 2020

Role

UX/UI Designer

Missions

UX Research
Wireframing
UI Design

Immersion

Research

02
The problem scope we researched on: Green spaces support community building and engagement, but people in low-income neighborhoods face barriers in access and green space quality. Lack of green space access in low-income neighborhoods have been shown to adversely impact overall social, mental, and physical wellbeing of residents, while simultaneously inhibiting community engagement and connection.
Through extensive secondary research, 3 interviews, 3 observational studies, and co-design sessions with 7 participants, we were able to identify user needs: they seek more interaction to meet others, and they Envision a more diverse, accessible space for all.
As a young adult busy working in a restaurant, I want a break during the weekends with friends so that I can build closer connections in my community.
As a parent of two toddlers, I want to engage my children in a safe outside place so that we can bond through fun, creative activities.

Conceptualization

Co-conception

03.a
Example of a simplified Flow chart
User - Visit the park and find bonding activities
During this phase, we tried to ideate as many ideas as possible focusing on visual art in green spaces, with four design principles in mind: inspire comfort & safety, accessible to diverse backgrounds, unify with natural environment, and build relationships.
Wireframes
03.b
After realizing challenges in fostering natural interaction, we asked why not think beyond a table or opaque screen for the physical form of the product and what engaging activities can we design? Hence, we chose glass as it forms connection between green space & community.
EXPERIENCE MAP TO GENERATE JOURNEYS

Implementation

Prototyping

04.a
NATURAL AND COMMUNITY ENGAGEMENT
Back to the problem area, we have decided to put accessibility and community connection at the heart of our thinking. This translates into various properties of our final 3D Product: adjustable pole, different languages and text-to-screen option.
‍
In short, a set of functionalities that satisfy both the needs to connect of our users but also promote the natural surroundings of green spaces.
Final 3D Prototype
For the users

UI Design  

04.b
LEARN AND IMPROVE
We decided to choose Green as the main color in our Palette since it aligns with our main design principle which is to unify with natural surroundings. After we decided on our design system and the general guidelines, we started designing the interfaces using the workflows.

Thanks to the feedback we received during the Wireframes step, we were able to take into consideration the possibility of vandalism and how to prevent it as well.
Selection of Interfaces
For the users

Review

Introspection

05
Design for America UW was the first project I learned to work as both a UX/UI Designer. Through this project, I learned to collaborate with other members and to give/receive feedback constructively to make our product improved. I also had my first chance to talk directly with our user group and do observational studies to turn their insights into story flows. Together with my team members, we have always put our users' wellbeing first and I thank them for this wonderful collaboration !
I am excited to continue working with DFA as a Project Leader now and the next step is to work with my team to continue developing solutions that can help with social issues like this project!
THANKS TO DFA 2020 FOR THIS OPPORTUNITY

Next

WEBSITE - UI DESIGN

Amion

A website for a consultancy service that helps equip young generations with necessary soft skills.
Get to know more