top of page
CSR — Magazine reader Application Design
ABOUT CSR MAGAZINE
Competition Success Review, often abbreviated as CSR, is a general at students who wish to appear for Union Public Service Commission exams. Its content includes general knowledge with a focus on Indian current events, tips for college interviews, interviews with IAS high-rankers, interview and GD tips and sample question papers for different competitive examinations. It was first published in 1964 as a pull-out supplement.
Anchor 1
CSR — Magazine reader Application Design
ABOUT CSR MAGAZINE
Competition Success Review, often abbreviated as CSR, is a general at students who wish to appear for Union Public Service Commission exams. Its content includes general knowledge with a focus on Indian current events, tips for college interviews, interviews with IAS high-rankers, Interview and GD tips and sample question papers for different competitive examinations. The first time it was published in 1964 as a pull-out supplement.
THE PROJECT
It is an academic project which was a part of Design Project II (Information System Design) at NID.
The brief for this project is to make CSR magazine available for civil services aspirants all over the country, especially in rural areas, through a mobile phone application.
THE CHALLENGE
To convert a subscription-based magazine containing endless information and various sections into a mobile phone app with all possibilities of interactions and enriching the reading experience.
MY ROLE
To design an information architecture, finding the opportunities for interaction in an app over the physical copy of a magazine within different sections, Creating user interface.
The content is divided into clearly distinct sections. The Subscriber can easily flip through all the monthly editions
THE CSR APPLICATION
The application is designed to reduce the difference between reading a hardcopy and a digital copy by adding interactive features
Iconography with clearly distinct forms and colours and follows the same visual language
Changing the monthly editions to read is made easy by adding a calendar option for every section
Uniform and yet distinct visual language followed with all different sections. Illustrations make it easy to differentiate between different sections
Visual consistency is maintained across all the sections by following the grid system
Notifications for bookmarks & notes makes it easy to revise the topics
Home screen and overview of the application.
Information Architecture is improvised over the wireframing stage and after going through iterations
Secondary research is done by studying competitors' apps. Their motivations, demotivation and scope for adaptation helped for wireframing and UI design
Different sections in the magazine and the scope for adding interactive features in each of them in the app
50+ wireframes have been created to
reach the optimum efficient option
Six columns grid is created in such a way that
the uniform visual language is maintained across all the different section of the app
Gutter width — 68px
Column width — 108px
Margin — 68px
Brand colours are chosen from the hard copy version of the magazine to maintain the bond of trustworthiness which reader shares with the magazine.
Brand colours
Colours for six sections
COLOURS
TYPOGRAPHY
Reading long articles, small instructions and different UI assets require different typefaces and weights.
Thanks for watching
Please leave your comments on this project
SEE ALSO
bottom of page