Phased Redesign for a Seamless Mobile Meeting Experience

Intro

Developed Gather Town's mobile app from scratch, creating a seamless meeting experience that keeps users effortlessly connected on the go.

Background and Timeline

Given the project's complexity, we adopted a phased approach to native app development, rolling out a Beta Prototype, Essential V1.0, and Advanced V2.0.

Over three months, I worked with PM Justin to refine the PRD and enhance meeting and A/V capabilities, continuously integrating internal feedback and finalizing V1.0. However, technical issues later delayed the launch by six months, allowing us to add more features.

Justin's strategic planning streamlined our workflow, and Laura's guidance ensured quality. Though I left before the launch, I'm deeply proud of the team's success.

Timelime

Project Kickoff: Oct 2022
Wireframe: Nov 2022
Development & Visual Design: Dec 2022
Prototype Testing & Feedback: Dec 2022 - Jan 2023
UX Finetuning & V1.0 Completion: Feb 2023
V1.0 Beta Testing(Invite-only): Mar 2023
Launch Plan Pending: Post-Mar 2023
Design & Scope Enhancement: Ongoing Post-Mar 2023
V1.0 Release: Aug 2023

Team

Product/Interaction Designer: ShaoPing Chen
PM: Justin
Engineer: Donald, Karen, and team
Design Supervision: Laura and design team

User Demand and Goals

Gather Town was initially desktop-only and too complex for mobile-responsive design. Recognizing the need for a mobile-friendly experience, we developed one that addresses mobile web limitations and ensures smooth transitions between desktop and mobile meetings, thereby enhancing the product’s appeal, retention, and longevity.
Previous mobile web version.

Mobile Experience Challenges

Limited Functionality
Previous browser-based mobile experience lacks essential features.
Poor Usability
Difficulties interacting with participants and joining meetings.
Performance Issues
Frequent bugs and stability concerns undermine user experience and trust.
Customer Demand
User feedback reveals a need for improved mobile meeting experiences.
Industry Standard
Competitors offer advanced mobile apps, setting a high benchmark.
Strategic Imperative
Enabling flexible and spontaneous remote communication.

Short-Term Trade-offs and Long-Term Vision

🎯 V1.0 Scope and Priorities
This initial version prioritizes easy meeting creation and participation to ensure a stable, seamless, and efficient mobile meeting experience, foregoing more complex features like avatar and map interactions.
🏁 Post-V2.0 Strategic Vision
The goal is to reflect Gather's aesthetics and interactive features, such as map navigation and avatar interaction, effectively bridging the physical and virtual worlds like a metaverse. Exploring experimental features that could enhance engagement beyond traditional desk-bound interactions.

Design Process

Competitor Research

I analyzed user flows from competitors like Zoom, Google Meet, and Around, assessing the strengths and weaknesses of their interaction designs.

Aesthetic Inspiration Exploration

With the original Gather Town style developed hastily with minimal effort, the design team considered rebranding during the mobile app launch. I then explored various visual directions for the possible new branding.

Functional Map for MVP

I created a functional map outlining essential features for our early version, ensuring comprehensive coverage.

Wireframe for MVP

I crafted wireframes for the MVP, covering login processes, meeting join points, rooms, and creation flows to facilitate efficient team communication.

Visual Style Refinement

I tested various styles with design team, adjusting color contrasts, layouts, and text-image ratios to create multiple page variants and gather team feedback.

Low & High Fidelity Prototypes

I made prototypes at different stages, using company-wide reviews to collect feedback and align product expectations.

Core User Journeys of Ver 1.2

1. Onboarding & Sign in

Splash, welcome and sign-in flow.

2. Space Selection

Select previously used spaces or directly join meetings.

3. Home screen & Calendar

Link your calendar and view meeting details

4. Joining Meetings

Join meetings via calendar or link, with audio/video settings.

5. Meeting Room Controls

Control meeting room access and allow participants.

6. Video Views/Grids

Different meeting layouts: grid, speaker, full screen.

7. Meeting Tools

Interactive tools such as emojis, raise hand, and chat.

8. Creating Meetings

Create instant or scheduled meetings.

9. Participant List

Wave to online users or start instant meetings.

Takeaway

Proactive Feedback Loop

Actively gathering feedback from stakeholders at each step helps prevent disruptive late-stage suggestions or unforeseen changes. Achieving consensus among teammates, developers, and leadership early on can ensure a smoother, more predictable timeline and minimize the need for last-minute revisions.

Incremental Progress, Not Perfection

Complex products require thoughtful migration, not direct porting. Strategic planning for iterative versions fosters steady, measured progress towards long-term goals, avoiding the risks of ambitious, all-encompassing initial releases. An incremental mindset empowers agile teams to consistently improve while maintaining a clear vision.