© Iman Nazri 2022
JomWeb’s Majalah – Online Publication Website
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.
ROLE
UI/UX Designer
SERVICES
Web Design, Design System
TOOLS
Figma, Zeplin, Headless WordPress
MISSION
Design & ship maintainable modular React components for a Headless WordPress site.
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.
Project Deliverables
Here are the deliverables for the project:
- Design System for Majalah
- Publish Figma components to Zeplin
- Convert Figma UI to React components
- Facilitate project handoff and technical training to client
Team Members
Iman
Product Designer
Zaidi
Full Stack Developer
DESIGN PROBLEM
How might we design a magazine-like experience and deliver modular React components?
RESEARCH
Identify design patterns that will provide a great reading experience.
I created a survey form via Google Form and selected 10 people to identify how they read articles online
Research Goals
Here are the goals for this research:
- Understand users reading patterns
- Identify which device users 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.
Insights & Findings
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).
Constraints & Trade-Offs
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
IDEATION
Mapping out the
Website Structure
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
Low-Fidelity 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
Wireframe
MAJALAH's early wireframes
FINAL OUTCOME
SHOWCASE
Handover to Client
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.
MAJALAH's Design System
Documenting MAJALAH's Design System
A screenshot of MAJALAH's components in Zeplin
Handoff & Training
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
Learnings
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.
