Back to list

#SAAS

#0-1 Design

#User Testing

COMMU

Community App

Experience Design

Community App Experience Design

Community App Experience Design

UIUX design for building a community

UIUX design for building a community

UIUX design for building a community

COMMU is a community app designed to address the challenges faced by newcomers in navigating new places. Within this app, users can discover communities filled with individuals who share their interests. Users also have the ability to explore various restaurants and activities, as well as schedule appointments using the app.

Jan 2022 - Apr 2022 (4 months)

Timeline

Lead UIUX Designer/Researcher

Role

Jan 2022 - Apr 2022 (4 months)

Timeline

Lead UIUX Designer/Researcher

Role

Project Overview

Background

As an increasing number of people are relocating to Canada, our community is becoming more diverse and complex. In response to this, we initiated a study on the community, focusing on two research questions posed by the Yelp team.

As an increasing number of people are relocating to Canada, our community is becoming more diverse and complex. In response to this, we initiated a study on the community, focusing on two research questions posed by the Yelp team.

As an increasing number of people are relocating to Canada, our community is becoming more diverse and complex. In response to this, we initiated a study on the community, focusing on two research questions posed by the Yelp team.

As an increasing number of people are relocating to Canada, our community is becoming more diverse and complex. In response to this, we initiated a study on the community, focusing on two research questions posed by the Yelp team.

Design process

The design process is a journey of exploration, creativity, and problem-solving that ultimately leads to the creation of something truly exceptional.

Tools

Tools

Tools

Tools

Figma

Adobe Illustrator

User Research

User interview & coding

After conducting interviews with eight participants, we transferred our transcripts to a spreadsheet and started coding them for analysis.



After conducting interviews with eight participants, we transferred our transcripts to a spreadsheet and started coding them for analysis.



During this process, we decided that consumers
will be our main focus group. Our primary consumers will be locals/natives who have lived in the Greater Toronto Area for a decade or more, and our secondary consumers are international consumers who are new to the area.

During this process, we decided that consumers
will be our main focus group. Our primary consumers will be locals/natives who have lived in the Greater Toronto Area for a decade or more, and our secondary consumers are international consumers who are new to the area.

During this process, we decided that consumers
will be our main focus group. Our primary consumers will be locals/natives who have lived in the Greater Toronto Area for a decade or more, and our secondary consumers are international consumers who are new to the area.

In this activity, we focused heavily on finding commonalities between interviews and brainstorming different needs of the user. As a group, we also thought about what features might be important to have to prompt community engagement that were mainly based on secondary research.

In this activity, we focused heavily on finding commonalities between interviews and brainstorming different needs of the user. As a group, we also thought about what features might be important to have to prompt community engagement that were mainly based on secondary research.

In this activity, we focused heavily on finding commonalities between interviews and brainstorming different needs of the user. As a group, we also thought about what features might be important to have to prompt community engagement that were mainly based on secondary research.

Problem

Problem

Problem

Through this activity, we were able to notice multiple patterns emerge, but the most intriguing was that the native consumers were not interested in community engagement. This led to our new HMW statement.

Through this activity, we were able to notice multiple patterns emerge, but the most intriguing was that the native consumers were not interested in community engagement. This led to our new HMW statement.

Through this activity, we were able to notice multiple patterns emerge, but the most intriguing was that the native consumers were not interested in community engagement. This led to our new HMW statement.

“How might we prompt more people to make importance in community engagement?”

“How might we prompt more people to make importance in community engagement?”

“How might we prompt more people to make importance in community engagement?”

Persona

Persona

Persona

Persona

Persona

User journey

User journey

User journey

User journey

User journey

User flow

User flow

User flow

User flow

User flow

(Click the image to see the details)

(Click the image to see the details)

Interestingly, our group has collectively noted that we stuck with the same flow throughout the progress of developing Commu.

Interestingly, our group has collectively noted that we stuck with the same flow throughout the progress of developing Commu.

Solution design

Low fidelity wireframes

Low fidelity wireframes

Low fidelity wireframes

Low fidelity wireframes

Low fidelity wireframes

For this process, each group member shared their ideas and concepts of what the design of the app could be. Through the critique process, we applied feedback on each others’ process and agreed to bring Commu to life.

For this process, each group member shared their ideas and concepts of what the design of the app could be. Through the critique process, we applied feedback on each others’ process and agreed to bring Commu to life.

For this process, each group member shared their ideas and concepts of what the design of the app could be. Through the critique process, we applied feedback on each others’ process and agreed to bring Commu to life.

For this process, each group member shared their ideas and concepts of what the design of the app could be. Through the critique process, we applied feedback on each others’ process and agreed to bring Commu to life.

Style guide

Style guide

Style guide

Style guide

Style guide

Illustration

Illustration

Illustration

Illustration

Illustration

High fidelity

High fidelity

High fidelity

High fidelity

High fidelity

In this phase, we went a little beyond our expectations and ended up adding visual elements to our design and ended up with screens that looked a bit more like high-fidelity than mid. We exported the screens to a Mural board and left another round of critiques to be applied before they are sent off to be prototyped.

After making high-fidelity wireframes, we also started user testing and we wrote the testing plan.

In this phase, we went a little beyond our expectations and ended up adding visual elements to our design and ended up with screens that looked a bit more like high-fidelity than mid. We exported the screens to a Mural board and left another round of critiques to be applied before they are sent off to be prototyped.

After making high-fidelity wireframes, we also started user testing and we wrote the testing plan.

In this phase, we went a little beyond our expectations and ended up adding visual elements to our design and ended up with screens that looked a bit more like high-fidelity than mid. We exported the screens to a Mural board and left another round of critiques to be applied before they are sent off to be prototyped.

After making high-fidelity wireframes, we also started user testing and we wrote the testing plan.

In this phase, we went a little beyond our expectations and ended up adding visual elements to our design and ended up with screens that looked a bit more like high-fidelity than mid. We exported the screens to a Mural board and left another round of critiques to be applied before they are sent off to be prototyped.

After making high-fidelity wireframes, we also started user testing and we wrote the testing plan.

In this phase, we went a little beyond our expectations and ended up adding visual elements to our design and ended up with screens that looked a bit more like high-fidelity than mid. We exported the screens to a Mural board and left another round of critiques to be applied before they are sent off to be prototyped.

After making high-fidelity wireframes, we also started user testing and we wrote the testing plan.

User testing

User testing

User testing

User testing

User testing

Round 1

Round 1

Our three participants that have contributed to the growth of this design have provided thought-provoking insights, while reinforcing us with compliments in regards to our decisions. Thanks to them, we were able to move forward in the project with a lot of confidence and an abundance of ideas that we can develop and improve.

Our three participants that have contributed to the growth of this design have provided thought-provoking insights, while reinforcing us with compliments in regards to our decisions. Thanks to them, we were able to move forward in the project with a lot of confidence and an abundance of ideas that we can develop and improve.

Our three participants that have contributed to the growth of this design have provided thought-provoking insights, while reinforcing us with compliments in regards to our decisions. Thanks to them, we were able to move forward in the project with a lot of confidence and an abundance of ideas that we can develop and improve.

• Easy to use and intuitive, participants have noted that they would use this app
• Excellent in the sense that it has a lot of useful features (ex. popular times, book tables... etc.)
• Exciting as it displays detailed information of events and businesses
• Inviting and engaging to participants

• Easy to use and intuitive, participants have noted that they would use this app
• Excellent in the sense that it has a lot of useful features (ex. popular times, book tables... etc.)
• Exciting as it displays detailed information of events and businesses
• Inviting and engaging to participants

• All participants want to see the available coupons on the business/event information pages
• Some of the navigations are confusing and difficult as it leads the participant elsewhere
• Participants would like to see more options and details of nearby businesses and restaurants
• One participant wanted to see different options displayed when they click on the map
• One participant suggested including reviews instead of discussions
• Activating other features in the design (ex. “check route”)

• All participants want to see the available coupons on the business/event information pages
• Some of the navigations are confusing and difficult as it leads the participant elsewhere
• Participants would like to see more options and details of nearby businesses and restaurants
• One participant wanted to see different options displayed when they click on the map
• One participant suggested including reviews instead of discussions
• Activating other features in the design (ex. “check route”)

What we should adjust

What we should adjust

What we should adjust

What we should adjust

What we should adjust

• Events, discovery page
• Business and event information page
• Fixed navigation bar

• Coupons being visible/accessible in the business/event information page
• More in-depth information of menus
• “Reviews” instead of discussions

• Further development of community and profile screens

• Showing nearby businesses on the map
• Activating “check route” button

Applied changes

Applied changes

Applied changes

Applied changes

Applied changes

Before conducting the next set of tests, we applied a couple of changes that were noted in our first test.

Before conducting the next set of tests, we applied a couple of changes that were noted in our first test.

In our previous presentation, we received feedbacks from our professor and the industry partner that our home page lacks the feeling of “home”, so we tried to make the interface a lot more suitable for its purpose by personalizing the experience and utilizing pastel tone for colour and an illustration to invite the user.

One of the most common feedback we received from our professors and the user testing participants is that they would like to see the coupons visible on the details/information page than in the
“my accounts” page.

Round 2

In this testing phase, we were most interested in whether our prototype targets the HMW statement of prompting importance in community engagement within users. Therefore, we switched up the tasks accordingly to allude that narrative.

What we found

Although we were able to receive very insightful feedbacks from our 6 participants, it came to our attention that the majority of them were not interacting with the prototype properly.

Although we were able to receive very insightful feedbacks from our 6 participants, it came to our attention that the majority of them were not interacting with the prototype properly.

Round 3

In this testing phase, we made sure that the participants were interacting with the business and events detail page, and modified our script to lead the user towards that narrative. In result, we were able to gather insightful feedbacks from our participants.

• Revise the test plan to ensure that the user interacts with the business and event details page
• Gather feedbacks from second stage and third stage to establish what works, and what needs to be fixed

• Revise the test plan to ensure that the user interacts with the business and event details page
• Gather feedbacks from second stage and third stage to establish what works, and what needs to be fixed

Overall feedback

Our eight participants in the final two rounds of testing have shown us a lot of potential that our product, Commu, can still reach, despite the number of times and hours we have spent editing the prototype. We as a group feel that this was a valuable experience in knowing how much feedback a product can receive, just by a short prototype!

• Easy to use and intuitive, participants have noted that they would use this app
• Excellent in the sense that it has a lot of useful features (ex. popular times, book tables... etc.)
• Exciting as it displays detailed information of events and businesses
• Inviting and engaging to participants through the use of colour
• A good hub of information for people to engage with small businesses and events in

their communities

• Working on extra screens in between registration and login page to direct a logical flow
• Fixing the navigation bar at the bottom of business/event details page
• Fixing the back button somewhere on the business/event details page
• Figuring out the points system; remove it, or mention it on other parts of the product
• A set of onboarding screens would be useful to lay out the features of the product
• Activating other features in the design (ex. “check route”)

Solution

Final Design

Final Design

Final Design

Final Design

Final Design

Prototype

Prototype

Prototype

Prototype

Prototype

Use this Figma prototype to see it in action

Use this Figma prototype to see it in action

Use this Figma prototype to see it in action

More projects

Elevator News - Real-time elevator report & connection

SAAS Product

LEVERAGING SOCIAL COMPARISION

Research Paper

All projects

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com