Project Type
UX/UI Design
Year
2023
Project Background:
Pebbles Community is a bilingual website aimed at supporting English speakers moving to Japan and Japanese speakers relocating abroad. It fosters a supportive community by offering resources and connections for those adjusting to new cultural environments. The website consists of four main sections:
Study Buddy Board - A place to find study partners and participate in language exchange opportunities.
Regional Information Center - Offers localized resources and group connections for specific areas.
Japanese Town - Focused on language learning groups and addressing language-related queries.
Marketplace - A space for users to buy, sell, or exchange items valuable for both newcomers and those leaving.
Additionally, a Digital Library provides access to curated learning resources through a paid subscription model.
Problem Space:
Pebbles Community’s homepage lacks clarity in communicating its core services and value to users. This is reflected in the following issues:
A convoluted information architecture, leading to poor site navigation.
The value proposition, particularly access to English learning resources and the paid subscription model, is not effectively highlighted.
The site’s primary goal—supporting language learners and expatriates—is not immediately apparent upon visiting the homepage.
Creating a Project Plan:
Defined the project scope and timeline to ensure clarity and alignment with project goals.
Evaluated the existing site, revealing the need for a more intuitive structure and a clearer brand identity.
Project Scope:
Redefine site architecture for intuitive navigation.
Develop a brand style guide focused on warmth, inclusivity, and motivation.
Redesign the homepage for clarity and engagement.
Design subscription pages to encourage conversions.
Update the site in line with the new brand style guide.
Deliverables:
Information Architecture
User Flows
Low-Fidelity Wireframes
Style Guide
High-Fidelity Wireframes and Prototype
Project Timeline:
Week 1
(September 24 - 30): Update information architecture.
Week 2
(October 1 - 6): Develop brand style guide, define user flows, and create low-fidelity wireframes.
Week 3
(October 8 - 13): Finalize wireframes and start high-fidelity design.
Week 4
(October 15 - 20): Complete high-fidelity prototype, conduct user testing, and make necessary revisions.
Due Date: October 22, 2023
Competitive Analysis.
Analyzed similar platforms to identify strengths and areas of differentiation for Pebbles Community.
Focused on how competitors structure content and present their core value propositions.
Information Architecture
Conducted user testing on the existing site to assess navigation challenges.
Identified that the “Community” tab was overloaded with diverse content, making it difficult to find specific resources.
Restructured content into two main categories:
“Learn”: Focused on language resources, including “Japanese Town,” “Study Buddy,” and the paid “Digital Library.”
“Share”: Emphasized community-oriented resources like the “Regional Information Center” and “Marketplace.”
User Flows.
Designed two key user flows:
Users join the community after exploring language learning resources.
Users explore the platform’s features before deciding to join.
These flows ensure a smoother transition for users from exploration to engagement.
Low-Fidelity Screens.
Utilized existing site content while reorganizing it for clarity.
Implemented dedicated landing pages with clear explanations for each section.
Added visual cards for each sub-section, leading users to more detailed information.
Streamlined access to the “Join the Community” feature.
Mood Board
Developed a mood board to define the brand’s visual and emotional tone.
Focused on creating a sense of warmth and inclusivity that aligns with the themes of motivation and learning
Logo
Reflects the concept of unity and connection, symbolized by pebbles forming a cohesive whole under a warm sun.
Color Palette & Typography
Blue represents education and community, while orange conveys confidence and warmth.
Components & Imagery
Focused on friendly, approachable visuals that promote community and learning.
High-Fidelity Screens
Transitioned from wireframes to high-fidelity designs, emphasizing a visually engaging homepage.
Included clear calls-to-action for joining the community and exploring resources.
Designed each section with a concise introduction to reduce cognitive load.
A prominent banner image on the homepage immediately communicates the platform’s purpose, making it easier for users to understand the benefits of joining.
Insights
The existing site struggled to clearly convey its purpose, particularly in the crowded “Community” section.
Simplifying navigation and separating content into “Learn” and “Share” categories significantly improved user clarity.
Enhancing the homepage design helped better articulate the core value of the platform, encouraging user engagement and conversion to paid subscriptions.
Conclusion
By restructuring the homepage and implementing a more intuitive information architecture, Pebbles Community can effectively engage users and promote a sense of community. The updated design makes it easier for users to understand the value of the platform, leading to increased participation and successful language learning outcomes. The project highlights the importance of a user-friendly approach that blends clear c
