UI Designer
UX Designer
Logo Design
Role
Timeframe
January-February 2023
Overview
Pebbles English Community, soon to become Pebbles Community, is a website designed for Japanese immigrants and ex-pats looking to move to English-speaking countries.
The website offers users six main features:
Digital Library
Community
Study Buddy
Kids Support
Marketplace
Study Support
These features all have the same goal of helping users acclimatize and become more familiar with the new environment.
Ultimately Pebbles English Community helps Japanese immigrants master the English Language.
The Problem
Problem: The current website structure is not straightforward and needs improvement.
Website Layout, Structure: A requirement list was identified for a website with six components.
Dual Languages: The client prioritizes displaying information in two languages in the final product.
Primary Service: The website lacks clarity on its main objective, which is to provide access to English learning resources.
Project Timeline: Redesigning the mobile site has a four-week project lifecycle, but due to the complexity of six components, the allocated time proved insufficient.
Target Users
As part of the project brief, the client classified the target users for Pebbles into three main categories. We sorted each user category with proficiency in English to help better understand the design features to go on the mobile site:
These users are based in Japan and about to travel to an English-speaking country. They are beginner-level English speakers and are the main reason for having the website in two languages.
Japanese in Japan:
These users have traveled to an English-speaking country and begun acclimatizing to their environment. Their proficiency level in English ranges from beginner to expert.
Japanese Overseas:
English Speakers:
These users are tutors looking to teach fellow users English. Their proficiency level in English is expert.
Role and Responsibility
Within our design team of three, I spearheaded the UI redesign and created a comprehensive style guide for the website. Taking charge of the wireframe prototyping process, I developed both mid-fidelity and high-fidelity wireframes.
Scope and Constraints
Constraints
Scope (The Community)
Time: As mentioned earlier, based on the volume of work and requirements presented by the client, the team felt that the four weeks given for the project needed to be higher.
Research: The limited time to conduct sufficient research in the problem space was also linked to time constraints.
After deliberations with the client on time constraints, the website's community section was selected by our team as this project's focus.
The website's community section provides users access to fellow immigrants and ex-pats looking to familiarize themselves with society.
After the first meeting with the client, we decided that creating high-fidelity prototypes of the website's community section was a realistic goal.
Design process
Creating a project plan
The team embraced the four-week time frame as an opportunity to create a well-structured project plan. This plan allowed us to break down deliverables into four significant milestones and set achievable goals, ensuring an organized and successful project execution.
The significant deliverables we needed to create for the client were: low-fidelity wireframes, mid-fidelity wireframes, test scripts, a lightweight style guide, and high-fidelity wireframes.
Competitor Analysis
In the first meeting with the client, the team got introduced to Pebbles English Community (soon to be Pebbles Community). The client showed the existing website and shared the inspiration behind the idea. As part of the initial prep work, the team had to review the requirements, which had been restricted to requirements for the community.
We reviewed these applications because they most closely aligned with our client’s goals for the Community. The primary features needed to support critical user needs- to find and share critical resources and to connect with other users.
User Flows and Red Routes
User flows were created to understand users' journeys while interacting with various screens. Creating the user flow helped the team further create main categories within the community component of the website.
User Flow
The following critical red routes were established for Pebbles Community:
Search Groups
Search Topics
Create Topic
Create Group
Low-Fidelity Screens and Ideation
Low-fidelity wireframes were created to present ideas to the client. The low-fidelity screens helped establish design ideas between the team and the client. The presentation of the low-fidelity screens was the team's first test session to gain insight into certain design decisions. See the full wireframes here.
Two languages on screen:
As part of the requirements for the website, the Japanese language was meant to be reflected in the website.
This screenshot showed evidence of incorporating English and Japanese throughout the design.
However, having both languages became impractical due to the limited screen space.
Tap showing the primary interaction
We assembled low-fidelity wireframes in Miro to present our initial designs for our client. Working as a team saved us time, and we annotated interactions to increase the efficiency of our presentation.
Style Guide
I led the development of the lightweight Style Guide for Pebbles Community, and as a tactical approach, I leveraged a free UI kit from the Figma Community by woilonn to save time and resources.
While redesigning the logo, my focus was on incorporating rounded forms for the letters and a "pebble stack" to enhance its adaptability to mobile headers. Our client's brand identity, which expressed simplicity, supportiveness, inclusivity, warmth, authenticity, fun, and engagement, served as our guiding principles throughout the design process.
Iteration and Mid-fidelity prototypes
After concluding the general layout of screens following conversations with the client, the team set out to design mid-fidelity screens for the first round of testing. We made some changes following our initial meeting, which had to be tweaked in the UI template.
The toggle button was introduced to help users switch between English and Japanese.
The Toggle Redesign:
Initially, the toggle design confused users as to which language was selected. As a team, we opted for a redesign emphasizing the chosen language with the brand color.
Before:
After:
Insights From Testing
Key insights from testing:
English-speaking and Japanese users were reluctant to use the toggle button, although they acknowledged its importance.
There were no feedback messages for the completion of tasks, which caused participants to feel unsure if their tasks were successful.
Users felt the website's name should be changed from ‘Pebbles English Community’ to ‘Pebbles Community’
The Japanese content was confusing for Japanese testers as most of the copy was produced using Google translate.
Iterations
Labeled icons for clarity
Moved nav bar to bottom
Completed Task
High-Fidelity Screens
Lessons Learned
Defining a stricter scope at the outset of the project would have allowed us more time to nail down the project's focus. We successfully guided our client to stay on track with determining the MVP of the product and validating our design decisions.
As none of our team members speak Japanese, our client assisted us with some user testing. In similar situations in the future, I would assign a team member to sit in on the testing to document the participants' reactions best.
Additional research on our target user group would have allowed us to understand user needs better. Due to time constraints, we were forced to focus solely on competitor analysis and our client’s existing research of the user base.
Designing and prototyping in two languages was a challenging prospect. In future projects, it would be best to employ a translator to help us ensure the Japanese copy is as accurate as possible.
Results
The subsequent iterations of the website will include English Learning Resources, including “Study Buddies” and the Digital Library component.
Creating a Study Buddy matching process would help users to find a compatible Study Buddy appropriate for their level of proficiency and learning style.
Creating the desktop site redesign next will allow for more flexibility. We have created a more responsive design that prioritizes critical content by designing for mobile first.
Pebbles Community
See the full high-fidelity prototype below.