ABOUT THE PROJECT Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} Architectural Record  is a monthly magazine that is dedicated to architecture and interior design, published by BNP Media (see my other project with BNP media here ).  As the production designer of this project I have been producing the digital editions of the magazine to iPad, iPhone, Android tablet and Android phone apps. The goal was to create digital editions of the magazine that would emphasize the beautiful architectural imagery and include multimedia content such as, links, slideshows and videos, to enhance user experience and make the digital editions visually appealing and interactive. Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} PROBLEM 1 The company needed a low cost and fast solution to adapt the print content to the digital content. The project manager decided to use Mag+ , a digital publishing software for Adobe InDesign users. Because of the company’s time and budget constraints, redesigning the entire digital edition wasn’t an option, so instead the project manager decided to use the print pdf version of the magazine and adapt to iPad, iPhone and Android phone and tablet screens. Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} I was trained by a Mag+ employee and read and watched their tutorials online to understand how to create the digital content for the magazine app. In addition, I have trained other colleagues on how to use Mag+ and assisted my manager on writing a manual for the Digital Edition workflow. 
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} SKETCHES After learning everything I needed to know about the project, I started sketching wireframes for the screens that needed to be designed: dual orientation, contents, slideshow, video, help and feedback.  
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} ZOOM The team and I determined to add 200% zoom for iPad and Android tablets screens and 400% for iPhone and Android phones to improve legibility. 
PROBLEM 2 The team decided the best way to display the pages of the magazine was on a vertical orientation, but the pages that had a horizontal image across the spread looked cut off. The Mag+ software allowed us to do dual orientation of the screens, but unfortunately on horizontal view it would repeat the same spread twice. Because of this glitch, we decided we couldn’t do dual orientation on the entire issue. I had the idea of creating a dual orientation screen. I added a button, “Turn to view image,” to guide the user of turning the iPad on the horizontal orientation view and be able to see the image bigger, it also allowed the user to either pan or zoom the image to see more. 
CONTENTS AND BOOKMARKS I convinced my manager that was important to create a drop down menu for the contents with jump links to help the user to navigate. I designed different templates to fit the different iOS and Android devices. In addition, I added bookmarks to highlight special sections of the magazine. 
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} SLIDESHOW DESIGN Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} I designed a slideshow template to fit tablets and phones screens. When the user taps the “Tap to see slideshow” button, the slideshow appears on a popup screen. 
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} VIDEO SCREEN To display videos we included a “Tap to see video” button, when tapped the video appears as full screen, on both portrait and landscape orientations. 
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Univers LT Std 45 Light";} HELP & FEEDBACK SCREENS DESIGN I designed both Help and Feedback screens. Help screen is placed after the cover page in every issue of the magazine and the Feedback screen is placed after the last page. Users can write us an email by tapping the mail icon. 
PROBLEM 3 Both AR  and ENR publications used to be owned by McGraw-Hill Companies, and then Dodge Data & Analytics. This past year, they were bought by BNP Media. The new team decided to create a new app for both publications, which was a copy of our existing apps. Unfortunately, AR and ENR lost a lot of their existing users for lack of letting people know about the new app. For this reason, the budget for this project was about to be cut. To fix the problem the marketing team started to advertise the new app on magazine’s email newsletters and website. Plus I had the idea of sending push notifications from the old app to advise users to download our new app. I also created a banner image with a message directing users to download the new app. Lastly I designed new logos for both apps with the word “new”, so there will be no confusion on the App Store and Google Play.
ANALYTICS My manager and I decided to use Localytics to measure the app’s usage, engagement and purchases. By checking the app’s statistics we were able to see that the numbers of users and purchases were growing each week, which meant that marketing and push notifications were working and we were able to save the project for a while longer.   
prev / next