Creating a scalable design for community-oriented platform
Jeanny Kim
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
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
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.
Thank you!
Learn more about Ammonite through the original design files.
Like this project
Posted May 30, 2024
Ammonite is a platform that places an emphasis on community collaboration through open source knowledge contributions, as modelled after Github.
Likes
0
Views
3
