Improving the user experience for a Fibre Product page through UI considerations.

My recent user interface design was for improving a product page for managing clients’ internet data usage of a Fibre broadband company that provides internet services across homes and offices. The design was to help improve the existing (internal) UI design table used for saving user’s data and also to enhance the whole user flow of said problem. This came as a challenge, sort-off, for a job role I applied for (although I wasn’t accepted for it). Below are the UI design considerations I took while designing for it.

Proposed Product solution I designed.

While working on this project, an example of the initial design for the product page was given to us as reference. This was to give us context for the project (well, in most cases you might not be given an example which is fine too. You just have to be creative to work things around).

Initial design of the product page

• Design consideration 1 (Buttons)

Prioritizing button types helped lay emphasis on the importance of certain actions over others to the user. Although this was an internal product (mostly for staff) there was a need to use different button types as a form of information hierarchy. Below are the type of buttons I used:

The primary button.

The primary button was to help show the top-most important action on this page.

The secondary button

To maintain visual hierarchy, I introduced a secondary action button to help guide the user. In this case, since there was no data on the table at the moment, the next action it prompts would be to open up a modal for the user to input data to the table.

• Design consideration 2 (Modal)

The primary action here is to “add service” to the table. Since that’s the case, I designed a simple pop-up modal that eases the needed information architecture and reduces overload on the part of the user.

Pop-up modal for adding information to the table.

Pop-up modal for terminating users fibre broadband subscription.

To improve the user experience on this modal, there was a need for certain UI law considerations:

The UI law of Proximity. This helped in decluttering the overall design of the modal by grouping related information together.

The UI Law of Rhythm: Consistency in design pattern, repetition of certain spacing value, elements, and look played a key part in reducing the information overload and helping users recognize contents easily.

The UI Law of Contrast: Another vital consideration I took on this modal was contrasting my foreground elements from the background ones.

• Design consideration 3 (Input fields)

Different input fields used.

For accessibility sake I used these two input fields to help differentiate varying use cases.

• Input field one: This input field is one that’s user-centric, in that it:
  1. Allows for text inputting by the user to search for various address.
  2. Address suggestions while typing.
  3. It equally allows for address selection (by the use of the chevron icon) from available options in the case where users aren’t sure of the data to supply.
• Date Picker/Date Input field: This date picker/date input field considers different use cases like:
  1. An option for users to type their date directly while following certain date format.
  2. An inclusion of a calendar icon to help users select date(s) from a date modal and this doesn’t need relearning as it follows conventional calendar UI design.
• Design consideration 4 (Dropdown menu)

A short dropdown menu from the “More option” button

To maintain the rhythm I designed a simple dropdown menu aided by corresponding icons with hover state to help visually guide the user’s mouse movement while navigating through this flow.

Various dropdown menu states

Various dropdown menu states

A date picker components with its variants.

• Other considerations.

1. For the ease of coding, consistency and semblance of various UI elements were my watchword; for this I created a mini-style guide which can be built upon to continue serving its purpose.
2. The interactions in this design were all done with the help of Figma component feature. This would be useful if by any chance there’s a need for a Global update of variants. Effecting this change on the default component transfers such modifications to its variants.
3. Another exciting information aside the fact that I used Segoe UI fonts for the work, I also complemented it with the Microsoft recommended icon set (Fluent icons). It’s also made in component form allowing for easy swapping of icons, changing their weight and sizes.

• Three things I learned from this exercise:

1. Usability comes first while making design decisions.
2. The first design drafts I made were necessary, and yeah, they weren’t the exact spelling of how my design turned out.
3. Starting out my design from various small components helped make the design less overwhelming for me.

Bonus: In addition, working on this project has really helped in shaping the way I see designs lately; the intentionality, consistency, and above all, making usable and accessible designs for users has become my goal as I design onward. You can also browse through the prototype here.

I hope you’ve found this reading interesting and let me know what you think about my work (and writing). I’m learning to write more.

You can check my works on Behance, and let’s connect on LinkedIn and on Twitter.