Knowledge base app
CASE STUDY
About
A knowledge base app inspired on Notion and created to use as a tool that helps teams to documenting projects, processes, and all the things related to the team workflow. Lithium KB is our in-house knowledge base application.
A project created with React Native and Apollo GraphQL
Challenge
This project was born to explore about some Javascript platforms and frameworks like Apollo GraphQL, Expo and how it works combined with React Native. Moreover, to get a useful product to work with, in our company.
The challenge was to create a mobile application inspired on Notion using Material Design guidelines to the UI.
Tools used to speed up the development process:
- Figma. Design and prototype
- Expo. The fastest way to build an app. Build, deploy, and quickly iterate on native Android, iOS
- Apollo GraphQL. Simplify app development by combining APIs, databases, and microservices into a single data graph that you can query with GraphQL
- Vercel. Instant static deploys
- AWS – Aurora. PostgreSQL-compatible relational database built for the cloud
- Jira. Sprints, product backlog, and issues managing
- Miro. To make remote retrospective meetings
Solution
We worked with the Scrum framework, which one we have adopted to our culture since two years ago. Scrum allows us to validate and improve the product sprint to sprint.
The team was integrated for:
- A product owner
- A UX/UI designer
- A tech leader
- Two developers
Rodrigo Silva
Product Owner
Marcelo Venturotti
UX/UI designer
Max Techera
Tech leader
Gerónimo García
Developer
Bruno Pintos
Developer
Features
We spent 3 sprints of 2 weeks to develop an MVP version of this product.
List of app features and characteristics:
- Material Design alignments
- User Sign up and Sign in
- Read articles
- Create and edit articles
- Create child articles and manage the hierarchy
- Save articles as a favorite
- Sidebar navigation with favorite tab
- Article breadcrumbs
- Article last modification date
Design
To this project, we decided to work following the Material Design guidelines. That decision bring us the possibility to save a lot of time in the design phase, a way to not re-invent the wheel but ensuring a consistent visual language and trusted user experience.
Another good reason to use that is there are a lot of projects using Material Design and have this knowledge, it’s a strength that every high-performance team has to have.
Check our high-fidelity prototype worked on figma here
Create, read and navigate around the article tree
The core of this app is to create and read articles as part of your knowledge base. For the article creation page, we decided to use this text input component because we didn’t have time to develop a text editor component.
When documenting important information from your team or company, is very important to structure the information using hierarchies and order the documents in a tree view with nested items. We knew the navigation around the articles was very important, then creating a good experience on mobile devices was the challenge here. Working on UX, applying mental models and following our inspiration about Notion, in a way to make the navigation simple and useful, we decided to create a side menu that:
- Work with nested lists to construct an article’s tree
- Work with the collapsible lists to understand hierarchy quickly and discover content through subjects
- Favorites tab, to see just favorite articles in the menu
- Work with action buttons on each item of the list:
- To create child articles directly
- To set as a favorite directly
Are you interested to get this tool to use in your company or team?
Please check our GitHub repository.