web project
The modern reading experience
web
Mobile
Interaction
Project
Client
Chinachem Group
Team
Visual designer, PM, FE and BE developers, and corporate brand manager
project website
https://www.chinachemgroup.com/news/lifeplus-magazine/magazine-issue-list/magazine-issue-05/magazine-highlights
Chinachem Group has launched its new magazine - LIFE+, intended to stimulate ideas and provoke discussion about bringing positivity and impacts to citizens. The reader was created to support a seamless digital reading experience for the Group’s audience.
It aims for sense of consistency and continuity while reading without too much distraction. The primary focus was on the content and the context of the reading material while making it as aesthetically pleasing and interactive as possible.
My responsibilities include ...
Wireframes
High-fidelity mock-ups
Interactive prototypes
Interaction design
Usability testing
process
Mobile screen flows
From the start, it is clear that the primary audience of the magazine was most active on mobile and held the most opportunity for reading interaction. With each page, layout, and component created, we optimized for this mobile experience.
Designing a reading experience
Similar to any design, the craft of designing a book can be divided into two main goals: function and emotion. Function means how legible the text is and how its design encourages you to read on; Emotion refers to how a book's design evokes a feeling or sentiment. And like many design fields, book design developed simultaneously with printing technologies. Thus, the online reading experience should taken user’s behaviours and expectations with technology in consideration.
Touch device friendly
To replicate the traditional magazine experience, swiping is encouraged as the action to turn pages, hinting the users with an initial brief tutorial.
Handle (slider) designed for enabling the real-world gesture of sliding to turn multiple pages at once.
Clear navigation
Secondary navigation (breadcrumbs) supports primary navigation by providing context-relevant options. User of magazine reader have clear sense of which issue and article they are currently browsing.
Contextual navigation (2-layer table of content) supports content by providing specific options. Readers can choose from the categorised content throughout the magazine.
One-click sharing
Easy share function (later developed after usability test), for users to quickly copy the article’s URL.
delivery
Responsive design
Adapting to the most commonly used devices: laptop, tablet and mobile.
Outcomes
The design is now the default solution across multiple clients magazine issues after three months of iteration and development. Available to million of Hong Kong citizen.
Have a project in mind?
Copyright © 2024 SandyCYUX