LeaseGuru is an accounting software that helps small businesses account for their leases. Today, the software allows users to add up to 9 leases.
As an effort to expand the target market, the company wants to increase the lease capacity from 9 to 100.
With the higher capacity, I needed to redesign the current homepage (as shown on the right) to allow users to easily view their leases and quickly find what they need.
Time frame: april 2020-june 2020
Deliverable: hi-fidelity prototype
Platform: web-based application
Tool: figma & miro
Team: remotely worked with PM and front-end devs
UX process: design studio, wireframe, prototype & usability testing
I collaborated with a Product Manager, the UX team, and front-end developers for this redesign initiative. I have broken down overall process into three main sections.
The current homepage places lease details on cards in a 3x3 grid layout. This grid layout is no longer a viable solution now that user can add up to 100 leases.
Thus, I designed the new home page with two main focuses in mind:
1. Promotes easier ways for users to find the leases they need.
2. Provides users with better insights about their leases.
Can you imagine how irritating it would be to search for a lease in the grid layout if you have 100 leases?
Search Bar - when there is a large list of items, it is important for users to be able to search for the specific lease that they need.
List Quantity Indicator - this lets users know their total lease count. It's helpful for the accountants, especially when they have lot of leases to account for.
List & Grid View - users have the option to change between the two layouts. Existing users might be taken aback by the sudden change so an option to go back to the grid view will help with the transition. Also, users with less leases may still prefer the grid layout.
List Headers - I used this redesign opportunity to improve the lease details we presented on the homepage. I determined the new headers based on what our users said is the most important lease information.
Side Panel - users can use the side panel to dictate the content that they see in the main section.
Dark Theme - I used a dark theme UI to clearly separate the side panel and the main section. This provides contrast and helps users identify the different function of the two sections.
Quicklinks - allow users to quickly get to smaller set of relevant leases. I chose these 4 categories based on competitive research and user interviews.
Filters - each of the filters corresponds with the header in the main section. Users can expand and apply filters to find leases.
Ascending/Descending - most accounting softwares (think excel) have this function to allow users to sort through their data. I used toggle button so users can switch between the two. Also, I can never remember which is ascending/descending, so I added icon to help anyone who has the same struggle as me.
3 Ways to Filter - through usability testing, our users shared different data points and ranges on how they filter for their leases. Thus, I decided to give them more flexibility and allow them to input their own ranges.
1. date range
2. amount range
3. "type" multi-select
"Has Filter(s)" Indicator - it is important to let users know what filters are being applied. So, I changed the color from white to blue and added a tiny rectangle to the very left of the side panel (not sure what that's called).
See All / Clear All - if users have multiple filters applied, then it will be helpful if they can quickly see all of their filters and clear them. Due to the limited space, "Clear All" is hidden until users select "See All".
Let's get to some of the behind the scene stuff! 😎
Because of the time and resource constraint, I had to start the design process without knowing all the answers. My strategy was to figure it out as I go and get the answers through user feedbacks and design critiques.
This sketch is created based on my secondary research on other fintech applications. For example excel-like table format is very common in showing financial data because it gives consistency and structure as well as familiarity for the user base.
I also used prior user research on important lease attributes to determine the fixed headers.
Lastly, I conducted a virtual design studio in Miro at the start of the design process with the PM, front-end developer, and another UX Designer. The design studio tells us that the redesign should focus on easy ways for the users to search and filter their leases.
The two things I've learned from the mid-fidelity wireframe feedback was that the right filter panel is unnoticeable and the filters are too specific and complex.
Feedback for the hi-fi mockup disclosed that the filter texts had visibility issues and the Quicklink cards (at the top) were taking too much screen real estate. The final hi-fi mockup was iterated with these points and other minor feedback in mind.
I started the design system for this product a few months ago by consolidating all the existing components and standardizing it while improving the accessibility. When designing the new home page, I tried to utilize the existing design system as much as I could.
However, because the new home page includes new features such as side panel and filters, it required new components. I had the most fun coming up with random color names! 😁
Some of the text colors in existing home page lack contrast, so I changed the colors sightly to increase accessibility while still being consistency with the overall feel of the brand.
Both colors are in the blue hue spectrum to promote brand consistency.
Fancy White - I added this color because I needed a background color that has enough contrast with the white list cards and the dark side panel.
Dusty Black - to differentiate the two sections, I wanted to an almost black color. This color is also allowed me to work with existing colors to show "hover" and "selected" states.
Round Buttons - I added round buttons to break way from the boxy feel of the overall layout.
Hover Outline - I want to use this to signal to users that the button/tags are clickable. This is especially important if filters are in an "unselected state".
Toggle Buttons - I created this to show opposing options (either/or).
New Color: Dolphin Blue - I added this color to highlight "hover" and "with filter" state. This color is in the same blue family as other LeaseGuru's blues and it is light enough to show up on the dark background and blue enough to stand out against the white text.
As our design system is continuously evolving, it's important to keep it organized and to make sure new components are clearly communicated to front-end developers. I compiled all the new components in one place for the front-end developers to easily reference.
Time and time again, I realized that I don't need all the answers to start. In the beginning, I was concerned that there isn't enough user research to build the foundation for the design. From this experience, I've learned that there are other ways to build the foundation, including competitive research and analyzing other related tools.
This is one of the most impactful projects I've done so far at LeaseQuery. I used this opportunity to advocate for the UX process by involving other team members in brainstorming and critique sessions and showing them all levels of wireframe fidelity throughout the process. I also managed to push for the RITE method by actively finding ways to conduct usability testing before going into development. Our usability tests helped refine the filter sections and provided more certainty about the overall design.