Humm

Humm is a BNPL (Buy Now Pay Later) product created by Flexi Group, now known as humm group. Alongside another UI designer, I created the user experience for humm when it was first launched in 2020. This is the story of that journey.

The Challenge

We did not become involved in all the work leading up to the design phase partly because Flexi Group was our client. I had limited knowledge of the BNPL space, and no visibility into the product strategy when briefed about the project. The client seemed confident about what they wanted, but it was not very clear to us. We need to work with them to ensure that expectations are aligned and they are onboard to go through the necessary processes to deliver a beautiful product that works for their customers.

The Process

Given the challenges mentioned above, my task is to align with the client, understand the product strategy, and fill knowledge gaps in a relatively short amount of time. The first couple of weeks of the project involved reading documents, attending keynotes, and conducting workshops with the product manager from the client's side. Although there were questions and ambiguities regarding customer problems to be solved, we need to move on to the experience design phase with the knowledge and mutual trust we have built so far with the client.

Creating the information architecture

As we gained more clarity about the product, the product manager added new product features to a Trello board shared among the project team members. I reviewed each card on the board and visualised how they could fit together using a mind map. We used this map to discuss priorities and dependencies at the early stage of the project.

Designing a simple and versatile flow

After making a purchase with humm, customers need to pay it off over a period of time. Humm offers various payment plans for purchases and allows customers to be flexible with repayments. They can choose to pay for individual installments, pay off the entire plan, or make multiple payments from different plans.

While this feature sets humm apart from its competitors, it presents a significant challenge for user experience design. How can we create a design that caters to all scenarios while keeping the experience easy to understand and technically feasible?

My approach to tackling this challenge was to identify the simplest scenario, which is expected to be the most commonly experienced. I prioritised designing this flow with the intention of using it as the foundation for other scenarios. I tested and iterated the design so that the pattern could accommodate other scenarios with minimal changes, thereby maximising user familiarity. The result of this process is a flow that is easy and intuitive for users, while being simple enough for the engineering team to implement and maintain consistency.

Design the home screen

The home screen design is a crucial aspect of any app. It not only sets the tone for the user's experience but also helps them navigate the app, discover content, and engage with its features. A well-designed home screen contributes to user satisfaction, retention, and the overall success of the app.

For a brand new product, the home screen must strike a balance between shaping the way we want users to see and use the product and the tasks they want to accomplish when landing on it.

Given its importance, the home screen design was one of the first presented to stakeholders and also the last to be finalised. Early designs focused on aligning the UX strategy with business objectives. After stakeholders approved the high-level schematic, I delved into detailed UI design and testing to ensure the interface is visually appealing and easy to use.

Efficient handover for implementation

Humm was the first project we worked on using Figma, a cloud-based design environment that helped keep everything in one place and made design feedback and handover more effortless. Despite its convenience, there is often a gap between what has been designed and the scenarios engineers need to consider. Therefore, it's important for designers to collaborate with engineers early on to identify all scenarios and states a screen would have.

To bridge this gap, I experimented with a new annotation system where I sliced and numbered "blocks" on a screen and documented the variations, states, and behaviors in an organized way. This system has evolved over time and has been praised by engineers for improving the efficiency in the development process.

Takeaways

Humm was one of the first projects I worked on upon my return to Australia. It provided me with a taste of what it's like to work for a client as a product designer. Although our contract with Flexi group ended after design handover, I’ve got a few key learnings from this project:

Empathise with your client

This is typically true when designers are not involved in problem discovery and strategy conversations. We are brought onboard to do what the client believes we do best, which is to craft beautiful experiences and interfaces. In order to succeed, designers should try to understand the client's business and customers through their perspective and trust all the work that led up to the design phase. Early on in the project, it is important to have as many conversations as needed to build a relationship, align expectations, and fill any knowledge gaps. This will nurture a smoother and more efficient process throughout the project.

Bring stakeholders along the journey

We value working autonomously and believe that fewer interruptions lead to better designs. However, to build trust, it's important to communicate frequently with stakeholders. This includes sharing plans, updating progress, and providing transparency to show that we are on the right track. It's also important to mentally prepare for the possibility of the project changing course due to various reasons. By walking the same journey as our stakeholders, we can stay informed about any potential changes and be proactive in addressing them.

Involve engineering from the start

This principle is closely linked to another important one: start with the end in mind. Our designs are ultimately meant to be built. By involving engineers early on, we can create more technically feasible designs, streamline the handover process, avoid rework, and ensure that what is designed is actually built.