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 Nazri

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.

My Other Portfolios