Role: UX, Interaction, Prototyping
Tools: XD, Figma, PowerPoint, Sublime Text Editor

Timeline Mobile

This project at Microsoft started as a conversion of the Windows Desktop Timeline feature to mobile on iOS, and has so far shipped on Android as feature inside the Microsoft Launcher app.

Timeline@2x

What is Windows Timeline?

Put simply, it's a really simple way to find your stuff on Windows and in the Microsoft ecosystem, and pick up where you left off across PCs and phones. It's especially cool if you use Office and work a lot on the same pool of documents. It can get a little intimidating if you touch a lot of files and things in one day. That's where the Hero view, that should consist of only the high confidence, things that are important, and these files or documents may carry over from day to day. Our goal with Timeline Mobile is to deliver a better way to work important files, across devices.

What's the best way to do do these scenarios on mobile?

Timeline_step1

Utility

Our initial approach was to simply leverage the service based Timeline data model, and look at defining a new, bare-bones experience tailored to Mobile. Simply following standard iOS guidelines and visualizing files tied to a Microsoft Account. This broad approach was effective to determine initial product and engineering dependencies.

Timeline_Artboards_

Early wireframe visualizations, considering different interaction models, scenarios and basic app flow.

Is feature discovery a problem?

Over the course of this project we used informal usability studies with guided experiences shown to participants to gain understanding as to how people would use the product, and what they might react to. Discover-ability of the resume on mobile functionality was a major point of contention for the product team, and whether or not we needed a visual accordance to convey a default action. We would go back and forth on this through out the project.

Launcher

This avenue of exploration was thoroughly investigated, as visually alignment (or influence of)  would be key to understanding with our primary Android offering, Microsoft Launcher. This card based approach borrowed and elaborated on many conventions in our team's early design system.

Timeline_Step_Launcher

Pure

This approach was one of our most literal interpretations of the Desktop Timeline experience into a mobile form factor. 

Timeline_Step_Pure

Prototype

Check out the responsive HTML prototype here´╗┐. In creating the prototype, my goals were to validate the current visual direction as viable, and the following:

  • Parse JSON payload that includes several text strings and an image.
  • Responsive layout, fill columns in the layout to fill the screen comfortably.
  • Compose a blurred background layer using the standard CSS Blur filter.
  • Investigate a press state with animation and shadow.
Timeline_Step_Prototype

Push

This approach was based on an evolution that was happening within the Desktop experience, adapted to mobile. The visual cues here are what we took forward to production, with prominent brand color used to reinforce document association.

Timeline_Step_Push

Crisp

This point in the design process represented the combined vision of all stakeholders, and was where I was most involved with creating the style guide and specifications.

Timeline_Documented

In product experience

Final experience for Timeline on mobile, as adapted for Microsoft Launcher on Android.

Timeline_Launcher_Fall2018

What's the most efficient way to communicate design specs?

StyleGuide_0.1_Pg1@2x

On this first sheet, I wanted to capture  all the key global details for things like style, controls and basic layout components.

StyleGuide_0.1_Pg2@2x

On the second sheet, the focus is more on card specifics and other UI details.  When it comes to communicating design details, every project tends to be a bit different. For Timeline Mobile, I liked being able work closely with the development team in China for awhile and tailor the design specifications to meet the needs of the project and people working on it.

Timeline_Documented

Working on Timeline Mobile challenged my perceptions of what the difference between an app and a service is, especially as the feature spec evolved very organically and sometimes would be re-written over night. There were many learning opportunities when it came to expressing design concepts, interaction models and creative decisions to product managers who haven't worked with designers before.

If I could go back to this project again, I would have started prototyping sooner. Cards are really fun to play with!

Featured porjects

Windows 10 OOBECorporate

McLaren IRISCorporate

Timeline MobileCorporate

Microsoft Launcher IconCorporate Design

Gravitron EPPersonal

Mobile WallpapersExploration

3D ArtPersonal Projects