Services Tab

HEMLANE

Feedback revealed that many users were unaware that Hemlane offered essential services, such as our comprehensive leasing options, which includes five mix-and-match services. My role was to develop a solution that effectively showcases and promotes our features within a single, easily accessible tab. In this case study, I will focus on the Services tab and the Repair Coordination+ detail page.

Impact

The product saw 2X in weekly package upgrades in the first week of launch. The Services tab serves a great importance for future product and features to be added. Within 6 months, we had added one new feature (which I also designed) and it was integrated quickly into the Services tab.

Overview

Timeline

Sep - Dec 2023

Role

Lead UI/UX designer

Platform

Responsive desktop & mobile

Tool

Figma

DESIGN PROCESS

The Hemlane design process

As a fast-paced, compact-sized startup, Hemlane moves at a fast speed in product design and development. We worked in an Agile environment which encourages collaboration and quick iterations.

Unlike the standard design process, the problem is often clearly defined before being brought to the design table. The product manager or stakeholders would define the problem and complete relevant research for the project, which then the UI/UX designer would use their knowledge and research data to create design solutions for development.

BACKGROUND

Users were churning for products we already have but difficult to find

In Q3 2023, the product team identified a significant issue: customers were churning to competitors because they were unaware of our existing features. The company was losing lots of customers because we made it difficult for customers to find our product features. The solution was to create a Services Tab that displays and promotes product features.

THE GOALS

What we want

Create a new tab to display all of the offered services and promote unsubscribed services

Design individual service pages to showcase summarized data and link them to appropriate places to do more goal-specific action.

MY IMPACT

What I did

Designed the all-new Services tab to feature Hemlane-offered services.
Collaborated with cross-functional teams to research and learn more about specific services like Eviction Guard and Repair Coordination.

Designed each individual service's feature page, including services that did not have existing detailed pages at the time.

RESEARCH

Conducted UX audit, analyzed competitors, and gathered existing best practices.

Examined how competitors and similar products are doing for dashboard and product pages.

HURDLES

We faced some challenges

Overview vs Details

The stakeholders and product team had differing opinions on the intended function of the tab.
Should the tab and pages be a link-hub? Or, should the page contain details and CTAs for users to act upon?
Challenges emerged when certain features had established dedicated in-app pages for user actions, while others, being newly developed, lacked any detail page.
These differing scenarios prompted us to explore methods of maintaining a consistent style for the tab and the individual pages. This would ensure that users have sufficient information and tools to perform various actions effectively.
With a couple of early alignment meetings, we agreed for the Services tab to focus on showing and promoting the Hemlane features.

Keeping consistency

The objective was to develop a Service tab along with detailed pages for the four features available at that time.
Each of the four features has distinct workflows, types of information, and design styles.
Two of these features were newly launched and did not have existing pages within the app.
I designed the four features one at a time and used the existing design styles in-app (there was no design library) to keep the style of the tab, pages, and modals consistent.

DESIGN

Services tab - Process

Wireframe

I began doing rough wireframes after doing research, competitor analysis, and product audit. After discussing with the project manager, we decided to move forward with the card style. Imitating the existing layout of our dashboard.

Card Design Round 1 - Getting started

After the general layout was set, I pulled the individual card out and began creating high-fidelity designs. This step's goal was to establish a sense of style for the cards. I created a graphic to "sprinkle" on some visual interest to the page.

Highlight

At this point, I began to worry that the cards are too text-heavy and users would just skip chunk of text completely, which is not ideal for promoting the services. The copy was provided by the project manager so I decided to create a different style of cards to better display the long copy.

Card Design Round 2 - Horizontal card style

Because the original copy was so long, for this second try, I wanted to create a horizontal card style layout which would give the width necessary to display a passage. However, I found the card harder to read when it spans across the page along with that dense amount of text. I've decided that the horizontal layout was not suitable for our Services tab.

Highlight

While this attempt eliminated the horizontal card style, it was still a fruitful experiment because here I started experimenting shortening the message while adding other type of relevant information (such as the # for Open Repairs for Leasing+ service). I wanted to see if we could offer users useful information for quick glance on this tab.

Card Design Round 3 - Simplifying

After a failed attempt at round 2, I went back to the vertical card style and focused more on the content. I scheduled working sessions with the product manager to discuss the purpose of the page. In the end, as a team, we determined the goal of the page to be about showing and promoting the products we offer. I proceeded to design without the detail information and focused primarily on the CTA language.

Highlight

We first attempted to show some relevant information on the card. I tried to use borders (boxes) to separate and contain the information, which would organize the information and help readers scan. We were going to go with #2 option below; however, last minute, I decided to get rid of the data information and just keeping the product description. The team liked the change so we went it.

Card #1

Card #2

Card #3

DESIGN

Services tab - Final design

DESIGN

Feature Page Process - Repair Coordination

The Beginning

One of the goals of the project was to establish style consistency between existing detailed pages and the new feature pages; thus I started this page's design using existing components. This is not a wireframe like the Services tab, instead, it began as a high-fidelity level mockup.

Highlight

The card design was directly pulled from the Maintenance & Repair tab. From this point, I started simplifying it to better suit the purpose of this page. Card #2 was a simplified version of card #1.

Card 1

Card 2

Design Round 1 - Reorganization

After numerous attempts to simply the cards, I've determined that the work order cards were not needed. They are too bulky and take up unnecessary height on the page. I reorganized the information in a horizontal card style and added some information for the "Last Updated", thinking users might be able to connect the urgency of a request to the need of our service.

Highlight

At this point I felt that we were running into the same problem as some other pages. We were including too much information that made the page hard to scan. Next, I either need to emphasize a few key points, or I need to simply more by eliminating some information.

Design Round 3 - Categorization

This step was to determine how to best categorize the property cards. First, I proposed we separate by Complete package vs Other packages. However, I learned that there were different benefits that we wanted to highlight from different upgrades, so we needed to add a promotion copy on each property. This would add a lot of text and complicate the design again, so I designed a layout which separates the properties by package types. This way, I can add in the tailored promotion copy once per category.

Highlight

While creating the below design, I realized that the CTAs on each card might look very repetitive, specially if the user had more than 3 properties. We also had different types of CTA and status notice. In a case which all those different components showed up, the column would look disorderly.

Design Round 2 - Simplification

After discussing with the product manager, we wrote a set of the most essential information a user would need to make a decision to upgrade package on this page. I took bold moves to eliminate all other unnecessary details like the specific request details and their categories. Now, there were only 4 fields on each property card and a space for a CTA or a notice.

Highlight

At this stage we had a solid idea of what the property cards would look like for the properties. Next, I started to tackle how we should organize and display these property cards.

Final Round

For one more round, I wanted to reduce more repetitiveness on the page. I moved the CTA button out of each card and brought them to the same level as the packages. Accordingly, I created the upgrade flow modal to fit the change. Now people would be selecting the property to upgrade from a general CTA. This way, the user wouldn't see 10 individual CTAs and would only see (at most) 2 CTAs on the page. This makes the page more easily scannable, and the white space displays each data more clearly.

Highlight

Although this change added one more step to the upgrade process, the team and I thought it was a good tradeoff for a more minimalist design. For the empty space on the right, we could utilize that column for any notices or warnings we needed to display.

RC_Complete vs Essential vs Basic_Final.png

DESIGN

Feature Page - Repair Coordination Final Design

PROTOTYPE

Services - Connecting the actions

The prototype of the Services tab was completed last because we needed to complete the other feature pages to connect the upgrade processes.

TESTING & ITERATING

Iterations & Launch

Throughout the design process, I organized numerous design sessions with the product manager, cross-functional partners (such as eviction specialists for the Eviction+ feature), and developers. The design-flows and prototypes were reviewed and tested multiple times during my design process.

In an Agile environment, my UX design came before development. This means, that while I was working on the second feature page, the developer would be coding and testing internally the first feature page design. I the designer would be called only if big changes were needed. Usually, smaller changes would be taken care of by developers or product managers.

After passing the internal testing, the product would then be launched to the users.

Post-launch, there were no major revisions needed from me for this project, and I moved on to tackle another big project which is the new financial feature, Bank Sync project.

CONCLUSION

Tackling the big by going small

This was one of my biggest projects with the most individual pages and modals. At first, it was intimidating because every single feature page seemed important, and it was going to be a completely new tab within the product. I've learned by working with the product manager and cross-functional partners (like the eviction service managers) to break down the big project into individual feature pages and then into smaller detailed pages. From this experience, I got accustomed to always keeping the big image in mind. It is easy to be lost in the details and it is important to connect back to the "why", the reason we are creating a design. That said, I also did enjoy getting nitty-gritty into the details like the organization of cards, the language of the CTA, and the graphic within a card component.

Services Tab

HEMLANE

Impact

The product saw 2X in weekly package upgrades in the first week of launch. The Services tab serves a great importance for future product and features to be added. Within 6 months, we had added one new feature (which I also designed) and it was integrated quickly into the Services tab.

Overview

Timeline

Role

Platform

Tool

The Hemlane design process

Users were churning for products we already have but difficult to find

What we want

What I did

Conducted UX audit, analyzed competitors, and gathered existing best practices.

We faced some challenges

Services tab - Process

Wireframe

Services tab - Final design

Feature Page Process - Repair Coordination

The Beginning

Highlight

Feature Page - Repair Coordination Final Design

Services - Connecting the actions

Iterations & Launch

Tackling the big by going small

Flora Liu