Design

Mid-Fidelity Wireframe

Guided by the user flows, I translated the concepts into a paper prototype, delving into specific features. This hands-on approach allowed me to explore and refine the functionality of the app, bringing the envisioned features to life in a tangible form for further evaluation and user testing.

Design

Mid-Fidelity Wireframe

Guided by the user flows, I translated the concepts into a paper prototype, delving into specific features. This hands-on approach allowed me to explore and refine the functionality of the app, bringing the envisioned features to life in a tangible form for further evaluation and user testing.

Research

Affinity Map

Following user interviews, I employed affinity mapping to synthesize qualitative data visually. These groups were then labelled to highlight the main emerging themes, facilitating the extraction of key insights from the user interviews.

User #1

Wants to donate old clothes but not sure where to donate

Donation

Local

Time

Information

User #3

Too much information makes it overwhelming

User #2

Has no idea what’s happening around the local area

User #1

Doesn't have time to research

User #2

Not financially stable

User #4

Wants to get involved but there’s a lot of organizations to consider

User #3

Always wants to know what’s going on in her local area

User #3

Research is taking too much of the time than it is normally supposed to take

User #5

Wants to donate/volunteer in his desired field

User #5

Doesn't know where to start

User #4

Believes that knowing what’s happening in the local community makes it easier to pin point the area that is in need

User #2

Hard to schedule and appointment to volunteer since the time slots are limited

Donation

Key Insight #1

Most of the users had items they didn't use and wanted to donate but didn't know where to direct their needs.

Information

Key Insight #2

The vast amount of information regarding the local community was overwhelming for all users which inhibited the users from getting involved.

Local

Key Insight #3

Most of the users have shown interest in getting involved in the local community.

Time

Key Insight #4

A lot of users found it hard to balance their work life and personal life in order to participate in any volunteering events.

Research

Affinity Map

Following user interviews, I employed affinity mapping to synthesize qualitative data visually. These groups were then labelled to highlight the main emerging themes, facilitating the extraction of key insights from the user interviews.

User #1

Wants to donate old clothes but not sure where to donate

Donation

Local

Time

Information

User #3

Too much information makes it overwhelming

User #2

Has no idea what’s happening around the local area

User #1

Doesn't have time to research

User #2

Not financially stable

User #4

Wants to get involved but there’s a lot of organizations to consider

User #3

Always wants to know what’s going on in her local area

User #3

Research is taking too much of the time than it is normally supposed to take

User #5

Wants to donate/volunteer in his desired field

User #5

Doesn't know where to start

User #4

Believes that knowing what’s happening in the local community makes it easier to pin point the area that is in need

User #2

Hard to schedule and appointment to volunteer since the time slots are limited

Donation

Key Insight #1

Most of the users had items they didn't use and wanted to donate but didn't know where to direct their needs.

Information

Key Insight #2

The vast amount of information regarding the local community was overwhelming for all users which inhibited the users from getting involved.

Local

Key Insight #3

Most of the users have shown interest in getting involved in the local community.

Time

Key Insight #4

A lot of users found it hard to balance their work life and personal life in order to participate in any volunteering events.

Mobile App Design

Community

Team

Isaac Song (Product Designer)

Tools

Adobe Photoshop

Canva

Figma

Miro

Balsamiq

Mobile App Design

Community

Team

Isaac Song (Product Designer)

Tools

Adobe Photoshop

Canva

Figma

Miro

Balsamiq

Introduction

About

“Community” is designed to bridge the gap between people willing to help their local community and the challenges they face. By providing localized news, reducing click points, and incorporating user-friendly features, the app aims to simplify the process of community involvement, making it more accessible to a wider audience.

Introduction

About

“Community” is designed to bridge the gap between people willing to help their local community and the challenges they face. By providing localized news, reducing click points, and incorporating user-friendly features, the app aims to simplify the process of community involvement, making it more accessible to a wider audience.

Summary

Product Designer

As a product designer I worked on this as a solo 2 week sprint. I was able to discover the lack of engagment problem within the local community and decidede to create a solution for the issue. I was able to follow the 5 steps of the user expereience journey. (Empathize, Define, Ideate, Iterate, Test)

I specifically focused on project planning, outlining scope, design direction, and conducting comprehensive research.

Summary

Product Designer

As a product designer I worked on this as a solo 2 week sprint. I was able to discover the lack of engagment problem within the local community and decidede to create a solution for the issue. I was able to follow the 5 steps of the user expereience journey. (Empathize, Define, Ideate, Iterate, Test)

I specifically focused on project planning, outlining scope, design direction, and conducting comprehensive research.

Lesson

Reflect

The project was a pivotal experience in my journey as a UX designer. Through research, prototyping, and user testing, I gained valuable insights into the needs of socially conscious individuals. This project refined my skills in user-centred design and taught me the importance of inclusivity and accessibility in product development. It strengthened my commitment to creating meaningful solutions that foster community engagement and social impact.

Lesson

Reflect

The project was a pivotal experience in my journey as a UX designer. Through research, prototyping, and user testing, I gained valuable insights into the needs of socially conscious individuals. This project refined my skills in user-centred design and taught me the importance of inclusivity and accessibility in product development. It strengthened my commitment to creating meaningful solutions that foster community engagement and social impact.

Summary

Conclusion

“Community” is designed to bridge the gap between people willing to help their community and the challenges they face. By providing localized news, reducing click points, and incorporating user-friendly features, the app aims to simplify the process of community involvement, making it more accessible to a wider audience. The iterative design process, guided by user feedback, ensures that the app aligns with users’ needs, ultimately fostering a stronger connection between communities and their residents.

Summary

Conclusion

“Community” is designed to bridge the gap between people willing to help their community and the challenges they face. By providing localized news, reducing click points, and incorporating user-friendly features, the app aims to simplify the process of community involvement, making it more accessible to a wider audience. The iterative design process, guided by user feedback, ensures that the app aligns with users’ needs, ultimately fostering a stronger connection between communities and their residents.

Conclusion

Next Steps

We conducted research and comparative analysis based on features that the main competitors had.

Community is a concept app which addresses the issue that causes low engagement within the local communuity. The next step of this project would be divided into three different phases.

Immediate Needs

Phase #1

  • Enhanced map features

  • incorporate gamification feature


Iterate & Enhance

Phase #2

  • Another round of usability test

  • Enhanced navigation flow


Future Consideration

Phase #3

  • Developing partnerships

  • Collaboration with other non profit organizations

Conclusion

Next Steps

We conducted research and comparative analysis based on features that the main competitors had.

Community is a concept app which addresses the issue that causes low engagement within the local communuity. The next step of this project would be divided into three different phases.

Immediate Needs

Phase #1

  • Enhanced map features

  • incorporate gamification feature


Iterate & Enhance

Phase #2

  • Another round of usability test

  • Enhanced navigation flow


Future Consideration

Phase #3

  • Developing partnerships

  • Collaboration with other non profit organizations

Design

Usability Testing

We conducted research and comparative analysis based on features that the main competitors had.

Usability testing is employed to identify potential usability issues in a product. By tracking quantified metrics such as Time on Task, Success Rate, and Easiness Rating from 1–5, insights and trends are extracted to guide designers in recommending changes or enhancements for improved usability. Testing involved 4 tasks in our initial mid-fidelity prototype with 5 users, with results informing iterative improvements before finalizing the product.

Login

Donate

Volunteer

Local News

User 1

User 2

User 3

User 4

User 5

Easiness Rating

4/5

4/5

3/5

5/5

Average Success Rate

100%

100%

100%

100%

Direct Path

Indirect Path

Fail

Navigation

Key Insight #1

100% of users were able to go through the onboarding and login process and have access to their profile.

Donation

Key Insight #2

100% of users were able to schedule a donation pick up, however, 20% of the users couldn't find where to bookmark the page.

Volunteer

Key Insight #3

100% of users were able to volunteer for canin care, although 40% couldn't find a review page for the event.

Local News

Key Insight #4

100% of the users were able to have access to their local news through the app.

Design

Usability Testing

We conducted research and comparative analysis based on features that the main competitors had.

Usability testing is employed to identify potential usability issues in a product. By tracking quantified metrics such as Time on Task, Success Rate, and Easiness Rating from 1–5, insights and trends are extracted to guide designers in recommending changes or enhancements for improved usability. Testing involved 4 tasks in our initial mid-fidelity prototype with 5 users, with results informing iterative improvements before finalizing the product.

Login

Donate

Volunteer

Local News

User 1

User 2

User 3

User 4

User 5

Easiness Rating

4/5

4/5

3/5

5/5

Average Success Rate

100%

100%

100%

100%

Direct Path

Indirect Path

Fail

Navigation

Key Insight #1

100% of users were able to go through the onboarding and login process and have access to their profile.

Donation

Key Insight #2

100% of users were able to schedule a donation pick up, however, 20% of the users couldn't find where to bookmark the page.

Volunteer

Key Insight #3

100% of users were able to volunteer for canin care, although 40% couldn't find a review page for the event.

Local News

Key Insight #4

100% of the users were able to have access to their local news through the app.

Design

User Flow

Several user flows were created to address key tasks, such as logging in and accessing local news, making a donation, and scheduling volunteering events. In the future, these were translated into simple sketches and paper prototypes for initial testing. 

Design

User Flow

Several user flows were created to address key tasks, such as logging in and accessing local news, making a donation, and scheduling volunteering events. In the future, these were translated into simple sketches and paper prototypes for initial testing. 

Design

Sketching

Guided by the user flows, I translated the concepts into a paper prototype, delving into specific features. This hands-on approach allowed me to explore and refine the functionality of the app, bringing the envisioned features to life in a tangible form for further evaluation and user testing.

Design

Sketching

Guided by the user flows, I translated the concepts into a paper prototype, delving into specific features. This hands-on approach allowed me to explore and refine the functionality of the app, bringing the envisioned features to life in a tangible form for further evaluation and user testing.

Research

Problem Statement

The identified issues merged into a concise problem statement:

“People who want to help the community need a simpler way to get involved, as it is time-consuming for them to search for information online and look for organizations that fit their desires.”

Research

Problem Statement

The identified issues merged into a concise problem statement:

“People who want to help the community need a simpler way to get involved, as it is time-consuming for them to search for information online and look for organizations that fit their desires.”

Research

Persona

The gathered data from interviews underwent affinity mapping to identify recurring themes. From this, a persona named David Goodwin was created. David, a resident of downtown Toronto, faces challenges such as a tight budget, lack of information, and difficulty connecting with the local community.

Demographic

Name:

Age:

Job:

Location:

Hobbies:

David Goodwin

45

Baker

Toronto, Ontario

Hiking, Reading

Bio

David is a middle aged male

in Toronto with 2 children.

He owns a bakery and finds it

hard to balance work and

volunteering

Frustration

  • Tight budget

  • Lack of information

  • Disconnection from the

    local community

Goals

David needs a better way to

help the local community and

meet his personal goals at the

same time

Personality

  • Hardworking

  • Active

  • Thoughtful

  • Expressive

Research

Persona

The gathered data from interviews underwent affinity mapping to identify recurring themes. From this, a persona named David Goodwin was created. David, a resident of downtown Toronto, faces challenges such as a tight budget, lack of information, and difficulty connecting with the local community.

Demographic

Name:

Age:

Job:

Location:

Hobbies:

David Goodwin

45

Baker

Toronto, Ontario

Hiking, Reading

Bio

David is a middle aged male

in Toronto with 2 children.

He owns a bakery and finds it

hard to balance work and

volunteering

Frustration

  • Tight budget

  • Lack of information

  • Disconnection from the

    local community

Goals

David needs a better way to

help the local community and

meet his personal goals at the

same time

Personality

  • Hardworking

  • Active

  • Thoughtful

  • Expressive

Research

User Interview

We conducted research and comparative analysis based on features that the main competitors had.

After understanding of the current charitable landscape in Canada, noting the decrease in donation rates between 2010 and 2022.


Five user interviews were conducted, targeting a diverse group of participants aged 25 to 35. Questions focused on online donation habits, participation in local volunteering events, and awareness of the local community.

“I don’t have any idea how I can help since I’m not aware of my local community”

User Quote #1

“So many things to consider and research it’s overwhelming”

User Quote #2

“Since I’m not financially stable, I want to donate my personal items that I don’t use”

User Quote #3

Research

User Interview

We conducted research and comparative analysis based on features that the main competitors had.

After understanding of the current charitable landscape in Canada, noting the decrease in donation rates between 2010 and 2022.


Five user interviews were conducted, targeting a diverse group of participants aged 25 to 35. Questions focused on online donation habits, participation in local volunteering events, and awareness of the local community.

“I don’t have any idea how I can help since I’m not aware of my local community”

User Quote #1

“So many things to consider and research it’s overwhelming”

User Quote #2

“Since I’m not financially stable, I want to donate my personal items that I don’t use”

User Quote #3

Introduction

Goal

The goal was to create a solution that simplifies community involvement, making it easier for individuals to connect with local initiatives.


The resulting app, named “Community” focuses on providing local news, reducing the number of click points, and incorporating user-friendly features.

Overview

Process

01 Empathize

Conducted research & user interviews to gain a deeper understanding of the problem.

04 Iterate

Conducted usability test and with the feedback created a high fidelity prototype addressing the issues collected.

03 Ideate

With problem statement in mind created a user flow, sketches and a balsamiq wireframe.

02 Define

With the information collected crafted an affinity map and a persona. Developed a problem statement by utilizing both.

Introduction

Goal

The goal was to create a solution that simplifies community involvement, making it easier for individuals to connect with local initiatives.


The resulting app, named “Community” focuses on providing local news, reducing the number of click points, and incorporating user-friendly features.

Overview

Process

01 Empathize

Conducted research & user interviews to gain a deeper understanding of the problem.

04 Iterate

Conducted usability test and with the feedback created a high fidelity prototype addressing the issues collected.

03 Ideate

With problem statement in mind created a user flow, sketches and a balsamiq wireframe.

02 Define

With the information collected crafted an affinity map and a persona. Developed a problem statement by utilizing both.

Research

Initial Research

We conducted research and comparative analysis based on features that the main competitors had.

In response to the declining donation rates and a disconnect between people wanting to help and their lack of information and financial constraints, I conducted research and user interviews to address the problem.


My first thought was "How I would engage with the local community?" and if not what would be the reason for it. After making an assumption myself, I conducted my first research where I realized that the rate of people in need is increasing while the rate of people participating is decreasing every year.



This information leads me to ask the question, “How might we enhance the engagement in the local community?”


"The average pre-holiday charitable donation this year is $182, down about 20 per cent from the average contribution of $221 during the same period in 2021.” (Imaginecanada.ca)

Article #1

"A number that experts say is likely to grow due to increasing pressures of rising inflation, massive rent increases, stagnant wages, and a growing influx of refugees seeking asylum from climate disasters and conflict." (ricochet.media)

Article #2

Research

Initial Research

We conducted research and comparative analysis based on features that the main competitors had.

In response to the declining donation rates and a disconnect between people wanting to help and their lack of information and financial constraints, I conducted research and user interviews to address the problem.


My first thought was "How I would engage with the local community?" and if not what would be the reason for it. After making an assumption myself, I conducted my first research where I realized that the rate of people in need is increasing while the rate of people participating is decreasing every year.



This information leads me to ask the question, “How might we enhance the engagement in the local community?”


"The average pre-holiday charitable donation this year is $182, down about 20 per cent from the average contribution of $221 during the same period in 2021.” (Imaginecanada.ca)

Article #1

"A number that experts say is likely to grow due to increasing pressures of rising inflation, massive rent increases, stagnant wages, and a growing influx of refugees seeking asylum from climate disasters and conflict." (ricochet.media)

Article #2

Design

High-Fidelity Prototype

A high-fidelity prototype closely resembles the final user interface of a digital product, featuring realistic graphics, animations, and functional elements.
It enables stakeholders to interact with and evaluate the product’s functionalities, ensuring alignment with design goals before development.

Following usability testing, based on user feedback I made quick adjustments regarding bookmarking/reviews and finalized my high-fidelity prototype, as depicted in the following homepage screen.

Design

High-Fidelity Prototype

A high-fidelity prototype closely resembles the final user interface of a digital product, featuring realistic graphics, animations, and functional elements.
It enables stakeholders to interact with and evaluate the product’s functionalities, ensuring alignment with design goals before development.

Following usability testing, based on user feedback I made quick adjustments regarding bookmarking/reviews and finalized my high-fidelity prototype, as depicted in the following homepage screen.

isaacsong-ux.com

Product Designer

Focus Point #1

Local News

During the research phase, most of the users shown interest to have access to their local news. With the app, users have easy access to their live local news.

Focus Point #2

Donation

In order to save time and ensure users desire, the donation page has multiple dontation options and displays only the essential information required.

Focus Point #3

Volunteer

Most of the users were overwhelmed to conduct a research to find out the itinerary, reviews, and the companys goal before volunteering. To address the issue I focused on putting all the information on one page so that users don’t have to go through external websites.