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

STACK

WordPress (Headless), React, Gatsby

Meet the Team

Iman Nazri
Iman

UI/UX Designer

Zaidi

Front-End Developer

MISSION

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.

Project Deliverables

1. Design System for Majalah

Build an extendable design system for Majalah. The design language should live on in future iterations.

2. Convert the Figma UI into coded components

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.

3. Facilitate project handoff and technical training to the client

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.

Design Problem
How might we design a magazine-like experience and port that experience on this website?
CONSTRAINTS & TRADE-OFFS
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.

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.

✷ RESEARCH
RESEARCH

Understanding how users read online and identify common design patterns in digital publications.

Method - User Surveys

I created a survey form via Google Form and selected 10 people to identify how they read articles online.

Research Goals
  1. Understand users reading patterns and behaviours
  2. Identify which device that users commonly use to read articles
  3. Identify whether users prefer light mode or dark mode to read
  4. Ask whether they would scan, skim or thoroughly read articles.
INSIGHTS

Research insights and findings

1. Users tend to read articles on their mobile device

Over 57% of the intervieewes prefer to read articles on their phones.

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).

✷ IDEATE
IDEATION

Sitemap & Wireframes

Sitemap

Majalah's sitemap created in Miro.
SKETECHES AND WIREFRAME

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.

Exploring horizontal scrolling and layout for the homescreen
Wireframes in the early stages of the design process.
✷ FINAL OUTCOME

Final Outcome

DESIGN SYSTEM

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 screens and components in Zeplin.
DESIGNED SCREENS

Here’s a sneak peek of the screens designed in dark mode.

EARLY HI-FIDELITY PROTOTYPE
HANDOFF AND 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.

Handoff and Training session before pushing the code to Gitlab

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.

Back to top