Streamlining Trails, Logs, History
Context
Trails, Logs, History is a comprehensive log that monitors every modification and action within a system, promoting transparency and responsibility. It records the identities of individuals involved, their actions, and timestamps within the platform. Since Lexagle is transitioning into a new design system, I led the design for a more streamlined trails, logs, history across the platform.
The component on its own has instant swappable components that can be tailor-fit according to use case.
Challenges
Initially, I did some design explorations to identify the gaps across the platform. I scanned different pages with similar components and took down notes on the information hierarchy and how relevant it will be on my use case.
Inconsistent design across modules led to confusion and rework.
Visual styling didn't reflect hierarchy or interactivity; unclear what's clickable or relevant.
Trails lacked enough information — e.g., who did what, when, or why.
Users felt overwhelmed by dense logs with no filtering or grouping.
Users couldn’t easily tell the flow of activity or responsibility.
No clear indication of item status in history.
Ideation
Conduct platform audit and identify the gaps
I conducted platform audit by compiling the manifestations across different modules and took down notes of the inconsistencies
Mainly, all modules records the activities, and some uses it as a timeline.
Test the different design explorations and mockups into the platform
Standardise uncomplicated information architecture
I prioritised on providing a clear hierarchical of information across the component.
Provide clear, concise, yet complete trail content
Optimizing the copy and providing a more direct information to reduce possible visual and informational clutter
Streamline activities and content into a more coherent visual representation
Provide a clear indication of what the activity is all about
Give concrete information on who are the actors involved
Build a flexible component that can be reused across different modules
Add ready-made design contents so that build designers can utilize the component depending on its use case
Provide instant-swappable trail contents that are used in different modules today
Provide comprehensive guideline and interaction design documentation
Data Gathering
During the design team sync, the team found the new pattern to be visually pleasing. There are some minor comments that were addressed in the process:
"It looks good, but the layout is a bit inconsistent and off"
"Can we improve the color indicator for user's positive, negative, and neutral responses? Also, the timestamp placement is a bit hidden"
"Let's explore on the text contrast and the multi-liner nature of the trails"
Improvements Made
Swapping uppercase header to title-case header for better readability
Improving content distinction across the trails
Addressing hierarchy pattern and content placements
Learnings
Establish and Enforce Consistent Design Patterns
Define a clear pattern library or component system early. Standardize how logs and trails appear — use consistent icons, date formats, and action descriptions across modules.
Align Visual Styling with Functionality
Use hierarchy (typography, spacing, colors) to guide attention. Differentiate between logs for actions, errors, status changes, etc., using subtle visual cues or badges.
Ensure Completeness of Information
Build structured schemas for logs. Ensure all events record:
Who initiated it
What changed
When it happened
What the previous and new states were
Context is Critical for Trust and Clarity
Always show the actor, action, object, and timestamp. Consider adding context like task ownership, dependencies, and references to related entities.
Reduce Visual and Informational Clutter
Implement grouping by time, relevance, or task. Offer progressive disclosure — e.g., a summary line with expandable details.
Simplify the Information Architecture
Design with narrative clarity — logs should tell a clear story. Use timeline views, user avatars, color-coded statuses, and sequential grouping to make causality and flow obvious.
Status Visibility is Key
Integrate status indicators directly into the log entries. Show transitions clearly.