Creating a scalable design for community-oriented platform

Web Designer

UX Designer

Product Designer

Figma

Overview

As an alternative to Fandom, Ammonite is a platform that places an emphasis on community collaboration through open source knowledge contributions, as modelled after Github.

Role

For this project, I was the sole product designer, working with the founder, who was an experienced developer.

Timeline

Project Goals

1. Clarify PRD and features

The client didn't already have clear PRD and features. We decided to establish a scalable and flexible PRD.

2. Identify scalable IA

To document the scalability of features of the platform's features, we decided to simplify the information architecture (IA).

3. Scalable design system

Create a solid foundation and create an organized design system with components following atomic principles.

Design Method: Double Diamond Framework

Double Diamond Framework

Discover

What does it do, and what can it be?

Before jumping into the design solution, I knew that I had to understand the product owner's idea of the platform. In this process, I analyzed:

Mood boarding

Competition PRD (Product Requirement Document)

Mood boarding

I found out 2 insights from the UX/UI inspiration that I collected and organized.

Complex nesting of the navigation

1. Fandom platform's complex nesting

I found out that Fandom user flow was difficult to navigate, and it wasn't optimized for community edits due to complex nesting navigation.

2. Github's unfamiliar UX writing

Github had simpler navigation and user flow. However, many of UX writing are for developers using uncommon terms such as "Fork" and "Push" which are unfamiliar to a general audience.

Inspiration PRD vs Competition PRD

Learned vs. intuition?

After cross-analyzing product features from Github and Fandom, I led a workshop to establish key features for individual screens. However, it was clear from this exercise, many of these features were "learned" and not "intuitive."

The Design Challenge: How can I design a complex platform that's simple and intuitive for a general audience?

Design Strategy

Simplify open source editing

I decided to prioritize simplicity to achieve design strategy

Desirability: What makes sense to people and for people?

Feasibility: What is technically possible within the foreseeable future

Viability: What is likely to become part of a sustainable business model?

Define

Defining the IA and user problem

After the discover stage, I started narrowing the scope to understand the main problem and define the design challenge. In this process, I established

Information Architecture

User Problem

Information Architecture (IA)

IA of website & web application

Simplify hierarchy from PRD

I simplified the hierarchy and reduced any nestled user flow that made the IA complex, opting for bi-lateral user flow instead of complex nestled user flow (reduce page nesting with modals, overlays, and dialogues if possible).

User Functions

Admin vs Contributor

Different access is available for end users

Admin had all access, while contributor had limited access to article and ownership in the platform, leading to different user flow.

Main User Problems

User Pain Points

Two different paint points

Because there were two end-users, I identified key pain points on community contribution based on different end users on platforms such as Fandom, Wikipedia & Github.

Develop

Exploring iterations

From insights I gathered in previous stage, I brainstormed solutions through iterations. In this process, I established:

Low-fidelity wireframes

High fidelity wireframes

Exploring Ideations

Project Based Comment Views vs. All Topic Comment Views

Exploring different comment navigation

To address the problem, I explored different ideation for comment navigation.

Low-fidelity Exploration

Creating low-fidelity wireframes

After receiving feedback from the developer & product owner, I decided to go forward with project-based comment navigation.

Final Low Fidelity

Low-Fidelity Wireframe

High Fidelity

Deliver

Handover and Receiving Final Approval

In deliver stage, I decided to walkthrough the handover and also make final follow-up revisions. In this process, I established

Final Design System

Follow-up Revisions

Final Design System

Design System

Using atomic design system & auto-layout

I designed the design system to be scalable for future layout options with tablet and mobile layouts with atomic components.

Project Goal Accomplished

Project Goals

Reflect

Result

Currently, Ammonite is being developed. With easy to scale design system that's organized, I made sure to do follow up with the developer to ensure the handover was smooth and simple.

Thanks to the clear communication, documentation and continuous follow-up & sync-ups, no further revisions were needed.

Takeaway

1. Communicate any design decision earlier than later

Communicating early on brainstorming and iteration through workshop and documentation made sure that I was on the right track.

2. Reinforce meaningful feedback with emphasis on function

Making sure that I received a meaningful feedback and reinforcing this as part of our daily sync up made sure to decrease any miscommunication with revisions.