Our Engineers can Write as well

Why a simple, visually consistent, engaging UI matters

User Interface (UI), the touch point enabling interactions between men and machines, play an influential role in the business world. Being the interface of a software/device, it ought to be simple, visually consistent and engaging to deliver maximum usability and user experience.

We at Future Focus, advocate this right at the early stage of our software development process. We ensure that our User Interface are intuitive, easy and quick to access, clear and consistent in content while its layouts have a good mix of colors, fonts and essential graphic elements. Moreover, easy navigation, guidance and intelligent gestures are part of our design strategy so that our users experience a seamless, frictionless digital moments while using our applications.

In this blog, we would like to highlight how our re-designed user interface of Employee Transport Management application of a large Indian Energy sector company made a positive impact to the software usability and user experience.

We present you with some key screenshots as examples explaining ‘before and after ‘situations’.

A) Login Page:

This is the first form a user gets to access in order to login inside the application. Here’s where he registers his credentials and logs in. You can see the changes marked in the screenshots and also reasons for doing the alterations.

ui design
Changes

1. Logo on Top

2. Background Vector Work

3. Sign in Header

4. Form Style

5. Form Button

Why?

1. Adding Company’s logo to a form creates uniqueness, invokes a sense of belonging and ensures great brand recall.

2. The new background ups the style ante while also gives the software an industry related identity.

3. A neat space-sufficient header gives deftness to the screen.

4. Visually pleasant and user-friendly form styles with suggestions, autocomplete, error fixing options are what users expect

5. Adequate button spacing ensures easy and better clicks

B) Transport Booking Form:

This is where the user books his request for transport within the given parameters.

ui design
Changes

1. Employee credentials and application name positions

2. Separate Sidebar

3. Changed Icon Colour and Arrow on Clickable

4. Changed Button to Inner Container

5. Changed Colours to suit Brand Guidelines

6. Changed Form Style

Why?

1. Explicit, suitable message positions get the attention of our eye balls quickly.

2. Ensures quick and easy navigation.

3. Appropriate colors and iconography increases design aesthetics.

4. Improves the look and feel, while also betters usability.

5. Colours, fonts and sizes changed to suit company’s existing brand guidelines.

6. Eye-catching web elements and graphics maximize pleasant experience of users.

C) Check Request Status Form:

Once booked his transportation request, the user checks the request status by accessing this form.

ui design
Changes

1. Added Search Bar Option

2. Separate Column for Request Type

3. Request Status columns repositioned

4. Changed icon positions

5. Added new link

Why?

1. Improves user experience in general, and also provides deeper insights into how and what users are searching or expect.

2. Two relative functions merged into a single column now gets highlighted in separate columns for better usage and accessibility.

3. Status is viewed after a thorough understanding of the request, hence repositioned at the end of columns as appropriate.

4. Positioning of icons is key – hence here the Edit, Cancel and Print icons are repositioned for better understanding and usage.

5. A useful, new link for Reports Generation added which was missed earlier.

ui design
Changes

1. Responsive

Why?

1. Finally, the responsive UI grid depicting improved and consistent visuals, simplified information and easy, direct accessibility.

As we suggested earlier, a good user interface ensures maximum usability and user experience. Our efforts were channelized to make it happen!

Keep watching this space for such informative articles.

arun - ui designer

Contributed by:

Arun Krishnamoorthy
UI Designer

Your email address will not be published. Required fields are marked *