Andrei-Alexandru Matei

“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

Sadly, the old style was not saved as a comparison, but hope this helps for further reference.

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

Page updated

Google Sites

Report abuse