Majalah - Online Publication
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.
Web Design, Design System
WordPress (Headless), React, Gatsby
Meet the Team
Build an online magazine website and ship maintainable modular React components.
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.
This project is a collective movement that would include open-source contributors for its quarterly edition release.
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.
Build an extendable design system for Majalah. The design language should live on in future iterations.
Code the published Figma components in Zeplin. Some of the components will be turned into reusable Guternberg Blocks and Custom Post Fields in WordPress CMS.
At the end of the project, we would facilitate a handoff session and train the client to use and maintain the codebase, as well as the Figma source file.
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.
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.
Understanding how users read online and identify common design patterns in digital publications.
I created a survey form via Google Form and selected 10 people to identify how they read articles online.
- Understand users reading patterns and behaviours
- Identify which device that users commonly use to read articles
- Identify whether users prefer light mode or dark mode to read
- Ask whether they would scan, skim or thoroughly read articles.
Research insights and findings
Over 57% of the intervieewes prefer to read articles on their phones.
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.
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).
Sitemap & Wireframes
Starting the design process with sketches and 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.
I also took two magazines (IKEA and B Magazine) as my layout inspo.
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.
Here’s a sneak peek of the screens designed in dark mode.
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.
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.
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.