Pebbles English Community
Pebbles English Community
INTRODUCTION
Pebbles English Community is a versatile website that offers resources, English classes, study buddies, marketplaces, and community for people who have moved from Japan to other countries in the world. However, not many people were using or joining the website, which is why the client decided to redesign the website. As a designer, I joined the team after previous teams had done secondary research, user interviews, a tentative user flow, and two rounds of user testing with a low fidelity prototype. I was tasked with creating the final UI design for the communities feature of the Regional Section of the website. The Regional section of the website will be completely in Japanese, so the screens will we translated to Japanese once they are completed.
Many people who move from Japan to other countries for school or work struggle to find resources and community in an unfamiliar place. This causes feelings of frustration and loneliness. The Regional Section of Pebbles English Community solves that problem by giving these people a space to look for and share resources, as well as communicate with others in similar circumstances. This collaboration lasted 4 weeks, during which I worked with another designer in the Regional part of the website, as well as with a second group of designers in charge of the rest of the website, including the style guide. In this case study, I will describe how I used Design Thinking to solve the problem for both the user and the business.
Figma
Zoom
Slack
Tools:
Role:
UI Designer
Duration:
4 Weeks
EMPATHIZE & DEFINE
By the time I joined the design team, a group of designers (that were no longer working on the project), had already done secondary research, user interviews, and a round of testing with a low fidelity prototype. These are the resources I used to empathize with the user. The first step here was to understand who the user.
What is the Regional part of the website?
The regional part of the website is aimed at creating community and providing resources to people from Japan who moved to or are traveling in a different country. The regional part of the website is called as such because the communities are meant to be groups for specific cities. For example, if someone were to travel to Vancouver, Canada, they would join a community named “Vancouver”.
Who is the Regional part of the website for?
Japanese students studying abroad.
Japanese business people who are on assignment in another country.
Japanese people who want to move to / have moved to another country.
Japanese people traveling to a different country.
What are their needs?
They need access to relevant resources
They need their questions answered
To communicate with other in similar situations
Once I understood who the user are, I met with the client to better understand the goals of the business, as well as their vision for the website.
Business Vision:
Increase the retention of users.
Eventually have users join the paid English learning part of the website.
After understanding the user and business needs, I was able to define the problem:
Problem Statement:
Many people who move from Japan to other countries for school or work struggle to find resources and community in an unfamiliar place. This causes feelings of frustration and loneliness.
Finding a Solution:
I was tasked to design the final UI for the community feature of the Regional section of the Pebbles English Community. To do this, I had to understand the solution that the previous designers came up with, and analyze the user flows and wireframes to ensure the solution solved the problem and address any usability issues found in the last round of testing.
Findings:
During the last round of testing, users struggled to complete the assigned tasks and expressed feelings of confusion.
Users were unsure of the purpose of certain buttons or actions.
Users expressed confusion about the purpose of the website.
Insights:
The user flow was too complicated - it can be simplified to make the experience more streamlined.
The UI in the prototype was too busy - which contributed to the confusion.
The busy UI and complicated UI were making it so users did not fully understand the purpose of the website.
How Might We’s:
How might we make resources accessible to Japanese travelers/expats?
How might we create a feeling of community?
How might we allow Japanese expats/travelers to ask questions/discuss topics about the city they are in?
Solution Statement:
Users will have a space to look for and share resources, as well as communicate with others in similar circumstances.
Based on my findings and insights, I decided that given the timeframe and usability issues with the previous prototype, the best course of action would be to scratch the current user flow and make a new, simplified version that solved the problem while also being intuitive for the user.
Process:
Design process example
DESIGN
In this section, I’ll demonstrate how I designed the two most important features of the Regional section of Pebbles English Community.
The Resources Feature:
How might we make resources accessible to Japanese travelers/expats?
The Topics Feature:
How might we create a feeling of community?
How might we allow Japanese expats/travelers to ask questions/discuss topics about the city they are in?
The Resources Feature
Resources Solution:
Users have a space to look for and add resources.
When designing the resources feature, I used the How Might We and solution statements, as well as the results from the user testing, to design a new user flow.
Updated resources user flow
High Fidelity Designs
The original prototype that was used had a few elements that based on the testing results, I was able to conclude had caused confusion:
Users thought that the bell icon would allow them to go to their notifications. However, the purpose of the bell was to enable notifications for resources in that group.
Users did not know the purpose of the pencil icon next to the resource. The pencil icon was meant to be used as an edit button. But why would there be an edit button when there is no option to create a resource?
Users constantly missed the filtering icon and did not attempt to use it to expedite their search.
This prototype also did not give users the option to add a resource, which is part of the solution statement.
After completing the updated user flows, I designed the screens. To do so, instead of designing them from scratch, I took the prototype that the previous designers made and aligned them with the new user flow, while also simplifying the designs to address the usability issues found during testing.
In the updated user flow, users will be able to enter the topics tab through their group page. The group page will open on the topics tab. Within this tab, users will have the option to either create a topic, search a topic, or scroll down the feed and explore topics. Users also have the option to favorite any topic of their choosing. The benefit of favoriting topics and resources is to have all relevant information in one place instead of having to search for it, helping make it more accessible to users.
Updated Topics User Flow
The original user flow had all of the resources for the group in one place, and users could filter the results. However, the previous designers did not make screens showing what that would look like. During testing, users were unsure how to find specific resources among such varying resources. Based on that confusion is that I made the choice to change the flow to separate the resources into categories that were easier to navigate.
Original resources user flow
In the updated user flow, users will be able to enter the Resources tab through their group page. Within this tab, users will have the option to either add a new resource or browse the available resources. When adding a new resource, the user must select the category of the resource so it’ll be placed in the appropriate area. When browsing, the user would first select what category of resource they would like to view, and once in the category, they can see all of the resources in that area. Users also have the option to favorite the resource. The benefit of favoriting resources and topics is to have all relevant information in one place instead of having to search for it, helping make it more accessible to users.
High Fidelity Designs
After completing the updated user flows, I designed the screens. To do so, instead of designing them from scratch, I took the prototype that the previous designers made and aligned them with the new user flow, while also simplifying the designs to address the usability issues found during testing.
The original prototype that was used had a few elements that based on the testing results, I was able to conclude had caused confusion:
After clicking on a topic, some users thought the comment bar was to add a new topic. They also wondered how to reply to a comment.
Most users tested did not identify the comments under the topic post as comments, but assumed they were other topics and wondered why they looked different from the original post.
Original Topics Prototype
In the updated resources design, I kept the overall structure of the page but made changes to aid in understanding and navigation. I mostly focused on solving the usability issue surrounding the comments. Detailed below are some of the changes:
When adding a comment on a topic post, instead of going to a new screen with the comments below, the post will simply open at the bottom to reveal the comments. Users can open or close that comment section by pressing on the word “comment” or the comment icon. I made this change because it reaffirms that the comments belong to that specific post. When users are sent to a new screen, they have to once again scan the page and reanalyze it (kind of like when we walk through a doorway and forget what we were doing). This is more work than is necessary and can add to the confusion around the comments.
I made it so that the comments have a lighter-colored background while being the same color. This identifies it as related to the post, but not part of it. I also staggered the comments so they look like a subsection of the original topic post, reaffirming that they are comments.
I added a reply button so users can reply to comments as well as the original topic post. Doing this will encourage communication and help build a community, which is part of the solution statement for the Regional website.
Updated Topics High Fidelity Prototype
Click here to access the updated topics prototype.
Original resources prototype
In the updated resources design, I removed any icons or features that did not directly contribute to solving the problem. I chose to do this to simplify the flow and cause less confusion for the user. I wanted to focus on the flow being intuitive and to work as the user would expect it to. Detailed below are some of the changes:
I removed the notification bell, since getting notified for all new resources doesn’t contribute to solving the problem. Instead of users getting notified, I focused on making the resources easier to find.
I added the favorite button. This way, users can save all the resources that are relevant to them in the same place.
I removed the filtering option. By adding categories, the filtering becomes unnecessary. During testing, users kept missing the filter button. Using categories coupled with a search bar makes resources more accessible and easier to find.
I removed the menu bar and added a hamburger menu. The menu bar wasn’t an effective option because this is a website, not an app. Having a menu bar on a mobile website would cause all sorts of usability issues (which is why it is not standard practice to have a menu bar in a mobile website).
Updated Resources High Fidelity Prototype
Click here to access the updated resources prototype.
The Topics Feature
Topics Solution Statement:
A space for users to interact with others where they can ask questions and/or discuss topics related to the city they live in/are visiting.
When designing the resources feature, I used the How Might We and solution statements, as well as the results from the user testing, to design a new user flow.
The original user flow for topics did not have the option to add a topic included in the flow, only to edit topics. Once in topics, the user had the option to filter, close, or delete topics. My assumption is that this applied only to topics the user themselves created, but that was not specified in the flow. During testing, users struggled to find where the comments were and how to add one.
Original Topics User Flow
TEST
For the usability tests, I tested some of the most important tasks in the Regional section of the Pebbles English Community website. The three participants were Japanese travelers or expats who identified as at least somewhat tech savvy. The users had to complete 5 tasks by using the prototypes for the website. The tests were performed in person, and both the users and their screens were recorded.
Because this website is aimed at Japanese travelers/expats, the prototype needed to be translated to Japanese, and the testing needed to be performed in Japanese. No one on my team spoke Japanese, so our client (who is a developer, not a UI/UX designer), had to be the one to perform the testing.
Because the testing was to be performed by someone who was not a designer, I made a very detailed testing plan for the client to follow:
The client recorded the users as well as their screens while they completed the tasks.
The client transcribed the recording to English.
I gave the client specific instructions on what kind of questions to ask the users.
Users were to say out loud what they were going to do before they did it.
Users were encouraged to speak their thoughts out loud.
I instructed the client to tell the users that we are testing the prototype and not them. They cannot make mistakes or do anything wrong.
By combining all of these details, I got as close as I possibly could to performing the tests myself.
The Tasks:
Create a new group.
Invite someone to join the group.
Favorite a health resource.
Add a comment about a good hair stylist.
Create a new topic post.
The Results
All 3 users were able to complete the tasks and there were no usability issues or confusion.
We will be conducting another usability test once the website is complete. In the next one, we will test it on 5 participants, and will conduct the test with bilingual Japanese travelers or expats so us designers can be the ones to conduct the tests.
Because the usability tests did not reveal any usability issues or confusion, I did not iterate on the designs.
REFLECTION
Many people who move from Japan to other countries for school or work struggle to find resources and community in an unfamiliar place. This causes feelings of frustration and loneliness. The Regional Section of Pebbles English Community solves that problem by giving these people a space to look for and share resources, as well as communicate with others in similar circumstances. As a designer, I was tasked with creating the final UI for the groups section of the Regional Community. After using the resources from the group of designers before me, I was able to design user flows that solved the problem by giving users:
A space to look for and add resources.
A space for users to interact with others where they can ask questions and/or discuss topics related to the city they live in/are visiting.
A space to create a sense of community with others in similar circumstances.
After concluding that first round of testing, I am confident that my flows solve the problem for the user. I believe that the changes done to the website will contribute in increasing engagement and increasing retention for Pebbles English Community.
At the end of my assignment, I was asked to stay on the project to aid in designing other parts of the website, including the profile and homepage. I am excited to be part of the team by the time the website is completed, and to participate in the last round of testing. The final round of testing will be done in English with bilingual Japanese expats and/or travelers, and will be performed on a larger group of users to get the most accurate results possible before publishing it.
This project challenged me as a designer in many ways. I had to collaborate with multiple groups of designers and worked closely with the client. Because there was no project manager, as the website is run by the developer only, I took on the role of project manager and created a project plan, established lines of communication between the groups of designers, scheduled meetings, took minutes for the meetings, and created a Figma team for all groups to share their designs in. With the added layer of organization, we were able to complete the designs as detailed on the plan and had the pleasure of collaborating and brainstorming together to improve on our flows and designs. This project also challenged me to be flexible with my designs, as the final website is in Japanese and I had to design the screens knowing they were to be translated to a language I do not speak.
From this project, I learned the importance of quality communication and organization, the value (and challenge) of collaboration, and the importance of being flexible within ever-changing circumstances. I can say without a shadow of a doubt that I am a better designer now than I was before I started this project. I am thankful to have been part of such a talented team, and am looking forward to working with them to complete and publish the website.