UX case study · Faircode Technologies
Deshabhimani: a Malayalam news portal you can scan in seconds.
With Faircode Technologies, I designed the news portal for Deshabhimani, a Malayalam daily from Kerala: a home page that carries dozens of sections without feeling crowded, article pages that read well in Malayalam, and one system that works on desktop, tablet and phone.
- Client
- Deshabhimani
- Agency
- Faircode Technologies
- My role
- UI/UX design: structure, wireframes and visual design
- Platform
- Web: desktop, tablet and mobile
- Tools
- Figma, Photoshop, Illustrator
- Live
- deshabhimani.com
01
The challenge
A news home page has to do a lot at once. Deshabhimani publishes Kerala, national and world news, Pravasi news for Malayalis in the Gulf, sports, entertainment, business, editorials, district news and long reads, plus video, shorts and photo stories. All of it in Malayalam, a script with tall letterforms and long words that breaks layouts made for English. The page had to put the day's lead story first, let readers scan everything else fast, and stay light on a phone.
02
Goals
Lead first, then scan
A clear order: the lead story, the latest headlines, then every section in turn.
Malayalam that reads well
Sizes, line heights and line lengths set for Malayalam headlines and body text.
One system, every screen
The same cards, labels and section headers from a wide desktop to a phone.
Room for every format
Video, shorts, photo stories, visual stories and the e-paper, without breaking the rhythm.
03
Information architecture
Main navigation
- Latest News
- News
- Sports
- Entertainment
- Money & Business
- Pravasi
- English
- Editorial
- Weekend
Always at hand
- Menu
- E-Paper
- Sign in
- Trending topics
- Social links
Home page, top to bottom
- Top stories
- News in video
- Kerala
- Movies
- Photo stories
- The latest
- Articles
- Shorts
- Editorial
- Popular
- Sports
- Technology
- Districts
- Deshabhimani Special
- Money & Business
- Visual stories
- Art and culture
- Career and education
- Pravasi
- From the net
- Interview
- Auto
04
From paper to Figma
Paper wireframes
The grid and the order of sections were settled on paper, before any colour or type.
Layouts in Figma
Desktop and tablet layouts built on one grid, then tested at every width down to the phone.
05
Design decisions
A header that orients you
Masthead and date, the e-paper and sign-in one click away, a red menu button, the main sections, and a strip of trending topics under it.
One story card everywhere
Every story carries the same parts: a section and sub-section label, the headline, reading time and a share button. Readers learn it once.
Rhythm through contrast
Dark bands for Articles and Interview, a numbered Popular list and a big sports lead break the long page into clear chapters.
Districts as tabs
Fourteen districts sit in one row of tabs, so local news stays one tap away without a page of its own for each.
Visual stories, numbered
Visual stories run as a numbered set, 01 to 04, so the eye reads them as a sequence.
An article page built for reading
A breadcrumb back to the section, a large Malayalam headline, byline and time, sharing, and a side column of numbered must-reads and recommendations.
06
On the phone
07
Design system
- Section header with a red marker and View More
- Story card with label, reading time and share
- Numbered list
- Dark feature band
- District tabs
- Bottom tab bar on phones
08
More screens
09
Outcome
The portal is live at deshabhimani.com, built and run by Faircode Technologies. The same system now carries the daily news, the e-paper, video and the weekend reads.
- Home page with 20+ sections in one rhythm
- Article pages for long Malayalam reads
- District news in tabs
- Video, shorts, photo and visual stories
- Phone layout with a bottom tab bar
Designed with Faircode Technologies. Screens are from the live product and its public store listing.