Design techniques: Sketching, brainstorming, UX Design, UI Design.
Opportunity
The idea of the notebooks is to get a better overview of what happend when there was incident with you application. So we got really fast the idea of adding timeline to your notebook so that everybody knew what happend and when it happend. Build up a timeline for your investigation as you investigate. The timeline would show key events from the investigation in the order of occurrence, providing a timestamp and description. This would be super useful for providing a good overview of the incident and also then creating post mortems afterwards.
Sketches
The concept was pretty clear and I had a few ideas in my head. Their are a few ways you can visualize a timeline. I brainstormed with the developers and product manager what the best solution could be for a minimal valuable product. We went for option 3, because it was the easiest one to implement. And we believed that it was clearest one from an ux perspective, because it focused on adding an event.
Design
Normally I would also explore a bit more within Figma, but this was such an important feature that we wanted to ship fast and iterate from there. We’ve decided to immediately go for the third direction, built it and ship it to get feedback on how we could improve it.
But I needed to keep some things in mind while designing:
It should work on desktop, tablet and mobile.
To create a Timeline cell within a notebook bring up the menu by pressing “/” then begin to type “Timeline” and hit enter.
Add name and date
Add filters
Empty state
You can find my Figma file here.
Prototypes
I've create multiple prototypes to discuss it with the other designers and developers.
Create new event
Select existing event
Delete event
Move event
© Portfolio by Bart