Hello, I am a product designer who loves solving complex user problems
This is my portfolio showcasing previous and current works in asset management, LMS, resource planning, business process optimisation and data visualisation dashboards.
Latest Work
Designing the navigation for a defect tracking app
Background
Requirements
We were building an app on tablet to help users track defects when they are out inspecting the equipment.
It has to be easy to navigate to the component / part and create, update and delete defects on 3D model of the equipment
Challenges
The biggest challenge is how to make it easy for users to click through layers of equipment structure and locate the part that has defect. The hierarchy can be massive when it comes to huge machine like draglines.
The other challenge is navigating through 3D model on a tablet. We need to use minimum action buttons to help users pan, rotate and zoom to their desire section.
User Interview
Our users are mine site workers who need to conduct the equipment inspection regularly. Current workflow are paper-based and it's difficult to keep track on the defect status. The users want the app to be easy to use and can help them monitoring crack propagation and take proper actions before the part fails.
Other requirements
→ Users prefer bigger fonts and button size as they have big fingers.
→ Easy to jump between different levels and parts.
→ Display the full path of current location within the hierarchy.
Concept Development & Validation
Design Goal
A clean and simplified UI with intuitive navigation and clear hierarchy.
Display the full path in nested hierarchy
We tried and tested several navigation options including the traditional side panel (vertical navigation), top menu with breadcrumb, and tab groups. Each has its own pros and cons.
Vertical Navigation
Side panel takes too much space on the screen when it expands and it doesn't provide enough information when collapses. It doesn't show the whole hierarchy so user cannot jump to other location easily.
Top navigation with tabs
Breadcrumb looks better but still doesn't display the whole hierarchy structure. When the amount of tabs increases, it might take up a lot of screen space.
Design the Solution
I got the inspiration from mega menu and its beauty - showing the full story, combining the benefit of breadcrumb and vertical navigation, landed up with the design that both functionally and aesthetically pleasing.
Allow users to save paths - Reduce repetitive clicks
We noticed the navigation path can be quite long on larger machines, and users end up spending a lot of time finding the right part. We got requested to design a way to memorise those paths like bookmarks on internet browsers. During the research, we came up with different ideas. Eventually, we decided to mimic the bookmark function on chrome browser and use the icon star to make it easier for users to figure out what the function does.
Design for everyday task - navigate between parts
Each inspection has its own workflow to check every parts. To make it easier for users to jump between adjacent parts and perform the inspection, we added in the next and back buttons to make the navigation experience better.
Results
Future Development
The web app can further integrate the following features :
-
Inspection Workflow Builder:
User can add, edit or delete paths to an inspection workflow. Even attach
inspection guides to each part.
-
Inspection Tracker:
Launch inspection workflow and track the results and progress.
-
Better Search:
Allow users to search the whole hierarchy or from current location.
About Me
Hi, I'm Edie 😊 – a UX designer at Intelics, a cutting-edge software company.
I enjoy turning numbers into captivating charts and thrive on creating user-friendly dashboards. My passion lies in simplifying complex problems into seamless workflows. I love watching users interact with (and occasionally break) my prototypes.
Let's make data not just meaningful but downright engaging. ❤️
Contact Me
If you'd like to discuss a potential project or have any questions, please don't hesitate to reach out. You can contact me by email or using the information below.