© 2022 Fion W.LC. All rights reserved.
case study
Uni-Level Tree Work Like a Tool
On the MLM website, there are numerous references to the binary and uni-level tree. The majority of them serve primarily as previews with no additional features and not mobile-friendly. The stakeholder asked me at the end of November 2021 to design a high-intensity binary and uni-level tree with a variety of functions, including the flexibility of preview summary, shifting members based on requirements, and performing certain working features within the tree.
Project Requirements
- User friendly when goes responsive
- Work tool that is functional
the design problem
Rafiki The Maker is a platform that was first made for desktop users, but feedback from users shows that most of them use their phones to access the platform. Accessing through the phone took them at least an extra 15 minutes to complete their task.
The size of the screen is the one thing that makes Uni-Level Tree challenging. In a very different way from Binary Tree, a user can have more than 3–10 people below them. In this case, it might be fine on a desktop or bigger screen, but it’s very narrow on a mobile.
I had developed a simple chart showing the device’s current user base. Then, I create a simple sketch to examine the screen view in various sizes and to visualise the view when we add the features discussed with stakeholders.
sitemap & IA
the design solution
Due to the fact that the platform is created for users with varying levels of experience and some features may not be consistently recognisable to all of our users, it is necessary to provide initial guidance and assistance.
The focus functionality for each feature is clearly indicated and positioned to avoid any confusion. Our user-supporting features have been divided into three categories: Reference, Discover, and Execute. They are all positioned just below the main menu’s header.
Reminder is the design pattern applied to this feature. First, allowing the functioning components to always appear on top has served to remind the user to always proceed to the same position. It was helpful when there were a lot of user profiles on the screen, and the help on the side bar made it twice as fast to find the profile you were looking for than scrolling through the screen.
Second, utilise colour to emphasise the elements that the user meant to work on. It would be highly effective if the map provided a preview of the overall status update.
wireframe for pop up user
