Audi Magazine iPad App
Creating a best-in-class app experience for Audi’s popular automotive magazine.
Role: Lead UX Architect, Lead UI Designer
Client: Audi
Agency: Northstar
Awards: Grand Prix Winner at the International Content Marketing Awards
![](https://freight.cargo.site/t/original/i/730fed88889102a34b69b432136077516ea204a7157278222683dd8cf8af9720/1-Home.jpg)
I wanted to create an experience that worked for the shorter sessions, so stripped out the standard page-by-page ordering and instead gave users navigation through a non-linear index page.
![](https://freight.cargo.site/t/original/i/d801ec178cc0179c95957a5a24fdc7862f4e20cfa8744ffd9abb40d9b3c71d77/2-Index.jpg)
Article titles are show by tapping the ‘reveal’ button in the top-right.
![](https://freight.cargo.site/t/original/i/de989b568f6eb21a5f75af96899d9b3a792a970221ce1d2c23293d75900030d0/3-Index-With-Text.jpg)
![](https://freight.cargo.site/t/original/i/840604821e0a89f5b205c1d9949e006aa8a1ce04dabdfa49bc8fd4f2517f3d8b/5-Story-1.jpg)
Giving the amazing visual content room to breathe, users swipe up to move through the full-screen images.
![](https://freight.cargo.site/t/original/i/d9ab415338fd641836c4c20aafa03e8e0ee1c7d1492e0b272aaacf1fdca9507d/6-Story-2.jpg)
A caption over each image gives a snapshot into the full, longform article.
![](https://freight.cargo.site/t/original/i/773a94e64ccb63feccd7efaa7639d2c75ab0a8245680a2226351008c197a562c/7-Story-3---4.jpg)
Carefully designed transitions and paralax gearing between each elements bring a sense of craft and finesse.
![](https://freight.cargo.site/t/original/i/7300c2838f1835ec25f69725026f3356d7bb2515b498ffcd7825fc8a14a64d0c/11-Story-6.jpg)
At any point the user can also rotate the iPad into portrait orientation to display the written story, rotating back to return to close.
![](https://freight.cargo.site/t/original/i/2d13f696d37f5582e97a2b59075685212d4dc7f7402fcdd4e532dfb09eb133d4/12-Story-Portrait.jpg)
After the user reads each article, the corresponding thumbnail turns semi-transparent.
![](https://freight.cargo.site/t/original/i/675c69e23970e099b96c87732c8f6c8c4d2e5728ab3cde66876b4c8cd2dd30a1/13-Index-2.jpg)
Case study:
Download here:
itun.es/i6JK3tN
Sam Bathe, Creative Director & Interactive Designer