Case Study: Redesigning ‘Back in Time’ from an iPad* to Windows* Store App

Abstract

This paper looks at the enhancements and challenges required to redesign the education application “Back in Time.” Authored by Landka®, the application was originally designed for the iPad*, and porting it to Windows* 8 provided multiple opportunities for an enhanced user experience.

Introduction

Selected by the New York Times as one of the Top 10 iPad apps in 2011, Back in Time delivers a stunning exploration of the history of our Universe, Earth, Life, and Civilization. A popular application in schools, Back in Time uses rich media and visuals to keep the user engaged as they learn about history.

Significant events throughout history are mapped to the hours and minutes of a 24-hour clock (Figure 1). Users move the hands of time to explore history’s timeline. In this analogy, all life events on earth happen within the first 3.8 billion years or 7 hours of the 24-hour clock. The user can then tap the clock to explore the event further.


Figure 1 – Main Menu Back in Time running on Windows* 8

The timeline view (Figure 2) is a graphically rich scrolling menu of all the historical events. The corona in the upper right is a video; meteor, star, and asteroid animations are periodically displayed. The event icons also have a subtle color animation that adds to the visually rich experience of browsing the items.


Figure 2 – Back in Time timeline view running on Windows* 8

Clicking the event icon launches the event view (Figure 3). Each event is documented with social and historical context, movies, images, and little known interesting facts. Animations are used to further enhance the immersion into the selected event. The media carousel on the left is turned with a simple flick gesture. Clicking an image brings up a larger view and information about the photograph, and some tiles launch a video about the topic.


Figure 3 – Back in Time event view running on Windows* 8

Designing for Windows 8 User Experience

At first glance, the application looks very similar to the original and popular iPad Back in Time application. The design team purposely chose to keep the core Back in Time look and feel since it is a mature, refined, heavily user tested workflow and visual experience. At the same time, designing for Windows 8 meant that several new features could be incorporated that would enhance the overall experience.

Windows 8 Live Tile

The Live Tile is the first experience upgrade the user will run into. Displayed right on the Windows Start screen, it is a dynamic and visually rich tile for launching the app. Figure 4 is a view of the default tile before the application is launched.


Figure 4 - Back in Time Live Tile default view

After the application has been run once, the start tile is updated to be a Live Tile, and images from previously viewed timeline events are cycled through (Figure 5). In addition to images, “Did you know” facts are presented in turn (Figure 6).


Figure 5 - Back in Time Live Tile view 1


Figure 6 - Back in Time Live Tile view 2

Using a Live Tile is a small enhancement to the end user experience, but a great way to invite users to click and start your app. To see more development examples of Live Tiles and other ways to keep users engaged check out the following:

Settings and Language Support

One important feature of Back in Time is multi-language support. In Windows 8, the integrated Charm bar and settings options allows the user to quickly access user options such as changing the language.


Figure 7 - Event view with alternative language

With just a swipe gesture and three taps, the language of the app can be switched on the fly, and is immediately ready for use, no need to restart the application.

Integrated Share

Sharing information from one app to another should be just as easy. Windows 8 makes it simple with the share charm. Back in Time can share text simply by highlighting the text you would like to save, clicking the share contract, and selecting an app to send the text to. In the example below, OneNote* is chosen as the share-to application (Figure 8).


Figure 8 – Sharing selected text with Microsoft OneNote*

To learn more about using share contracts in your Windows Store app, check out the following:

Search

With so much text content in the app, being able to search it to find what you are looking for is important. The search charm allows users quick access to searching content within the application (Figure 9).


Figure 9 – Search results from a search

Implementing the search contract in the app has the added benefit that when a search is started outside of the app, the user can still find items within the app.

Keyboard and Mouse Support

Since Windows 8 runs on multiple form-factor devices, ranging from tablets, laptops, and Ultrabook™ devices, the developers identified an opportunity to add keyboard and mouse support to the application. When the application is run on a Windows 8 device with keyboard and mouse attached, several HotKey keyboard shortcuts become available. Users can display this helpful overlay of keyboard shortcuts by selecting the App bar (Figure 10).


Figure 10 – Keyboard shortcuts

Screen Sizes and Snapped View

A custom Snapped View layout was created for Back in Time for users who like to multitask (Figure 11). A layout with approximately one quarter of the screen width, images and captions are presented in order to keep the user engaged.


Figure 11 – Snapped View

In addition to creating a custom layout for Snapped View, Windows 8 development means you also need to worry about various screen resolutions, sizes, and densities. Some of the strategies to address the ever-increasing range of screen sizes are:

  1. Use full horizontal or vertical space and scale the width/height to keep the desired aspect ratio. Leftover space is left blank
  2. Use the previous constant aspect ratio strategy but use a background that can be easily adjusted to cover the entire screen real-estate
  3. Customized layouts and content for different sized screens

Back in Time uses a combination of 1 and 3, custom layout for Snapped view and black bars to fill up leftover space. Read more about designing for multiple screen sizes here:

Summary

The migration of Back in Time from an iOS* application to a Windows Store app provided several opportunities for developers to enhance the user experience of the application.

The rich, immersive media elements and new compelling features introduced for the Windows Store version of the app, make Back in Time on Windows 8 a first-class education application.

Special Thanks

A special thanks to the developers at Landka® for the opportunity to work with their team.

About the Author

Nathan Totura is an application engineer in the Intel Software and Services Group. Currently working on the Intel® Atom™ processor-enabling team, he helps connect software developers with Intel® technology and resources. Primarily these technologies include tablets and handsets on the Android*, Windows 8, and iOS platforms.

Connect with Nathan on Google+

Intel, the Intel logo, Atom, and Ultrabook are trademarks of Intel Corporation in the US and/or other countries.
Copyright © 2013 Intel Corporation. All rights reserved.
*Other names and brands may be claimed as the property of others.