Majalah is an upcoming online non-profit publication where it highlights the stories and achievements of Malaysian developers.
It is set to go live on October 2021.
ROLE
UI/UX Designer
SERVICES
Web Design, Design System
TOOLS
Figma, Zeplin, Headless WordPress
MISSION
Majalah is a non-profit pilot project by Iszuddin (the client). He wanted to come up with a refreshing reading experience that is inspired from physical magazines.
Upon project handoff, the source code shall be handed to Iszuddin to edit/further expand the library.
After much discussion with the client, our team went for the Headless CMS approach, since it’s modular and easier for content editors to publish articles.
Here are the deliverables for the project:
Product Designer
Full Stack Developer
RESEARCH
I created a survey form via Google Form and selected 10 people to identify how they read articles online
Here are the goals for this research:
Here are the findings from the research:
1. Users tend to read articles on their mobile device
Instead of creating a new design system from scratch, we decided to select Chakra UI, a modular open-source React library.
We will then customize Chakra UI to fit our use case.
2. Dark Mode is the preferred display mode for reading
From the research, users have great tendency to choose dark mode as their preferred display style.
However, we should not ignore light mode, as a small set of users prefer light mode for better focus.
Giving users the choice to toggle between dark & light mode would be great here.
3. Ensuring text contrasts are compliant to WCAG standards.
Majority of the users tend to read articles word by word. To improve the reading experience for everyone, we aim to meet at least level AA for contents’ accessibility (for both light mode and dark mode).
1. Utilize Chakra UI instead of designing the DS from scratch
Instead of creating a new design system from scratch, we decided to select Chakra UI, a modular open-source React library.
We will then customize Chakra UI to fit our use case.
2. Choosing REST API over GraphQL
During the development phase, we couldn’t use GraphQL with Gatsby for our custom fields query filters.
In order to make GraphQL work, we would’ve overstepped our project timeline. That’s not something that we wanted.
As REST API has wider community support + forums, we had multiple references to solve this use case.
Hence, we decided to go for REST API.
IDEATION
Our team went through the brainstorming session and we mapped out the high level system flow, as well as the user flows.
MAJALAH’s sitemap
SKETCHES & WIREFRAMES
In the early stages of the design, I started with rough sketches on paper to experiment with layouts, later digitizing in it Figma as wireframes.
Lo-fi sketches during the early phase of the project
MAJALAH’s early wireframes
SHOWCASE
Since we have selected Chakra UI’s as our starting point, we only used its design token (typography, spacing and semantic colors).
From there, we designed and built custom components that fit the project’s use case.
With Zeplin, we are able to sync our designer-developer momentum. More importantly, it kept us and the client to be in the same page.
Documenting MAJALAH’s Design System
A screenshot of MAJALAH’s components in Zeplin
Prior to pushing the codebase to Gitlab, we conducted a handoff and training session with the client.
While waiting the project to launch on October 2021, we will provide necessary technical support/troubleshooting for the client.
Task List Page
1. Aligning team’s velocity
In this project, I have learned the importance of aligning the team’s velocity in terms of shipping components.
Zaidi and I communicate often to ship the UI components in our weekly sprints.
2. Starting a design system from scratch is not always viable
For this project, I’ve talked to Zaidi on how can we possibly be more agile due to the time constraint.
I suggested Chakra UI to him so that we can save time and enable him to ship custom coded components & screens faster.
It gave us a great headstart in the development phase.