Overview
Imagine… A development team hires you to redesign the initial UI of their start-up for managing client documentation.
Challenge
It was created using premade components, resulting in inconsistency, a monotonous aesthetic look, and numerous navigation issues. Here is what I undertook.
Focus
Style guide
Functionality
Navigation
Visual hierarchy
Buttons
Component variants
Statuses
Tools
Figma
1. Style Guide
I introduced a secondary color to enhance the visual dynamic.
By using it, I developed a button component set designed to perform various actions.
2. Table Items
To enable easy scanning, I have set a sufficient row height and column width for users to scan, compare, or edit the table effectively.
48 px
Row Item Text
table row: item
Since green was the secondary color, I used blue to indicate positive status messages.
table row: status
I indicated hover and selected (open) row states to enhance the user experience.
table row: states
3. Visual Hierarchy
I styled the table for better scannability and established a visual hierarchy based on colors. I enhanced the visibility of headers so that the labels stand out from the rest of the content.
table header
4. Functionality
I enhanced the table's functionality by adding:
- a sorting-by-date option
- a toolbar positioned above the table, with a search bar and an inline menu that offers additional options:
|
toolbar above the table
5. Navigation
I simplified the top navigation by reducing the number of menu items:
Clients
Contracts
Invoices
top navigation
I implemented pagination to break the table into more manageable sections, which also includes a rows-per-page control.
6
of 23 pages
pagination
6. Final Table
7. Next Steps
Due to changed priorities, the project is currently on hold.
