“SEDUCO is a booking platform and online management tool that allows you to manage your trainings, courses, seminars & e-learnings in an automated manner and to accept registrations directly via your website.” SEDUCO
Scope
Redesign the interface of the app to reflect the business value. The original design being too playful, had to be redone. From a pink-ish look, now it's focused on a business environment.
Team
Roland Peer - Project Owner (Client)
Alexandru Sulic - Project Manager
Madalina Lacatis - Project Manager
Alexandru Matei - UX Designer
Filip Oanca - FE Engineer
Digitalya OPS https://digitalya.co/
My role
Redesign of the web application to reflect the business value. The style needs to be inclined towards a more serious look but not overdo it.
Old design snippet
Menu Overhaul
Description of the image from left to right:
Extended menu — Added the option to separate the items into groups for much easier navigation.
Hide groups — Default option for a more compact view.
Collapsed menu — Improves working space; good for those with experience of the app.
High contrast function (eye icon on all examples) — intended to increase the contrast on poor quality wall projectors.
Creating Labels Identity
A clearer interaction with labels was needed. Defining and implementing the label color was needed for an easier understanding of the system needs.
We treat statuses as labels and we identify them by this keyword - LABELS
These should offer info for the user as a status message in gray, but only colors when an action needs to be taken. For example, Seminar stages have basic statuses so that the user knows what is the current status of the object is, in this case, we use grey background so we can highlight that this is a status indicator and for better visibility, so we can separate them from the rest of the data from input fields; while Certificates translates into a system fail/approved/pending status so in this case, we use the colors (these are high priority and flag a system error or completion).
Dunning level - this is a more transient status. What we can do in this case is to elevate labels according to the level of this feature.
ie. 0-5 - we use the yellow level and over 5 we use the red label
The idea was to not overextend with the system status label colors or importance levels and keep them as simple as possible for the sake of a low learning curve regarding the end-user and to not complicate the labeling system.
For active and inactive status we took a step further and created a more low contrast label to emphasize the meaning of the label/status message.
Overall App Styling
