Fedena UI Redesign: Case Study

Overview

Fedena is used by thousands of schools and millions of users worldwide, and it is considered a really user-friendly app. The simplicity in design and easy to use interface, makes Fedena stand out from similar tools.

But the increasing number of features in Fedena and the changes in worldwide design trends, made us think that the time had come for a facelift.

Problems with the Earlier Design

• Too many features, Uncategorized:

Like any other app, features in Fedena have been increasing since we started our journey. The market study, research, and innovations from our team and also the interactions with clients,  give us a better understanding of what additional features are required to make Fedena more efficient.

Currently, Fedena has more than 50 modules and external plugins. For a user, it is a tedious task to browse through all of them in the dashboard and find what he/she is looking for. We were also not happy about the very long ‘More’ menu where the rest of the features were shown due to space issues.

• Submenus are not easily accessible:

Most of the entries in the dashboard had submenus, and some of them were further divided. In order to access them, the user had to click the icon and go inside the module.

• No options to monitor day to day activities and data:

This was more like a requirement than a problem. The easiest way to know what is happening in the institution today is the one place where we show all the daily activities and statuses like examinations, fee due, online meetings, discussions, etc, without browsing each module. Fedena had no such feature.

• Outdated design:

Despite being simple and easy to use, the main design pattern we followed was a little old, and tried & tested in several apps. The days of big colorful skeuomorphic icons and background patterns are long gone. So a user who is aware of the internet standards and current UI design trends might have felt Fedena design outdated.

Key Focus while Designing

Efficiency over features:  Priority should be on ‘how it works’, rather than ‘how it looks’.
Aesthetic and meaningful data presentation: Give the user relevant data from time to time.
Giving control to the user: User should be able to decide what he/she wants to see.
Minimal design: Design should be light, simple and to the point.

Keeping these things in mind we started planning. Studied several apps, from Amazon API, Salesforce and desk.com to even e-commercial websites, to get the best possible options to solve these problems. So many designs were tried, tested and scrapped. And finally, we came up with new design
and it turned out to be a never before seen menu and dashboard view.

• Navigation Bar

The revamped navigation bar now consists of a menu button, link with institution name which acts as a backlink to the dashboard, search area, messages, and a user preferences icon. Everything is arranged in such a way to make the best use of the space.

• Menu button: One click to get them all

All the module menus have been stacked neatly under one single button. Wherever you are in the app, you can access any other module by just a click in the menu button.

• Categorising the Modules

We have grouped them according to their nature under different tabs. For example, if a user wants to access the Examination module, he/she just needs to go to the Academics tab. No longer scrolling through the big list of modules.

• Easily accessible submenus

Place the mouse over a module and the submenus will appear. This has reduced the number of clicks required to reach a feature the user wants.

• User Controlled Quick Links

The quick links tab gives the user the freedom of bringing favorite modules under one tab. By clicking ‘Manage quick links’ user can control what all features need to be there in the quick link tab. He/she even can control the sub-menus that appear on quick links.

• Wide Range of Clean Monochrome Icons

The big colorful icons were the face of Fedena. But as the part of bidding adieu to the old school design, we had to chuck the ‘iconic dashboard’.

The new set of icons are modern, pixel perfect, more precise, and go along with the updated user interface.

• The Consolidated Dashboard

The idea is to give the user the most possible data relevant to him when he/she enters Fedena. This reduces the time taken for daily monitoring and makes sure the user never misses any important data.

There are several ‘dashlets’ and from which the user gets an insight of what all activities are happening in the institution on that day and he/she can also switch the dashlet to any other date. Activities like birthdays, events, examinations, discussions happening all can be accessed at a glance. Also, the day to day statuses of finance, students, and employees can be monitored. The data shown in the dashboard palettes differ from user to user, based on their privilege.

The user can sort the dashlets by dragging them. And click the ‘Manage Dashlets’ button helps the user to control what should appear on the dashboard.

• Implementing the Design

Finalized designs were given to the development team and they did a fantastic job on giving life to the visuals. The results were exactly what we had planned, thanks to the pixel perfect front-end and smooth back end coding.

• Future Plans

With the new dashboard and menu design, we have completed the first phase of Fedena redesign process. Since Fedena is a vast application a complete redesign is a time taking work. New features in Fedena are being made in compliance with the redesigned dashboard. Soon the entire app will have a new look.

Another major upcoming plan is to implement an ‘Analytical dashboard’, where the user will get visual data on institutional activities through graphs, charts, and infographics. Comparing and consolidating data will be easier and efficient in the future.

Our aim is to make Fedena more vibrant and strong.

This article is written by:

Devi Prasad

Or Devi like everyone calls him, is a multidisciplinary designer and artist with an eye for innovation and pixel perfection. Spends most of his free time sketching, surfing the cyberspace for inspiration and watching movies.