Role: UX, Interaction, Prototyping
Tools: XD, Figma, PowerPoint, Sublime Text Editor
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.
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.
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.
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.
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:
On this first sheet, I wanted to capture all the key global details for things like style, controls and basic layout components.
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.
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