ENR Mobile Edition

ux/ui design


Engineering News-Record (ENR) is a weekly magazine that provides news, analysis, data and opinion for the construction industry worldwide.

As the Production & Visual Designer of this project, I have been producing the digital editions of the magazine to iPad, iPhone, Android tablet and Android phone apps. 

In April 2017, I created and presented a prototype of the mobile digital edition for the ENR app to enhance the user experience and possibly increase users and purchases.

my Role

Production & Visual Designer

Date

April 2017

 

existing design

ENR_mobile_problem.png
 

Design issues

  • Because of the company budget’s constraints, we use the printable pdf version of the magazine and adapt to fit the mobile screen.

  • For legibility, users need to zoom each page at 400%

  • Using pdf and 400% zoom increases file size and download time.

 

survey & ENR app analytics

1_survey.png
 

User research

SURVEY KEY FINDINGS

  • 78% of the people who answered the survey read magazines on paper format, 44% read on their phones and 31% on tablets.

  • 34% of people who reads magazines on paper also read on their phones.

  • 65% of people who reads magazines on their tablets also read on their phones.

  • Those who prefer reading on their phones, do it because is convenient and always with them when they need, ideal for when they are commuting.

PERCENTAGE OF ENR USERS BY DEVICE

  • 53% of users use iPhone and Android phones. 

  • 47% of users use iPad and Android tablets.

conclusion

Enhancing the user experience of the ENR mobile digital edition is important because more than half of our users use a mobile device. 

Based on user research, even though users still read magazines on paper and tablets, they also read on their phones because is convenient and always with them.

 

 

Solution

  • Instead of zooming in users will be able to scroll down to read a story, this will also decrease file size and download time.

  • Text will be bigger and more legible.

  • Add popup screens and full screen images to improve user interaction.

 

wireframes

wireframes.png

new design

design.png