Yapily Studio. UI Customisation tool for Hosted Pages

About team and my role in project

The Design team consisted of  Design 3 members. We all were collaborating together with PO, VP, PM and development team. 

My responsibilities: 

Team members: 

About

So what is Yapily Studio or UI Customisation tool? In two words - it's minimal and frictionless onboarding. Clients should be able to use the Hosted page and Pay by link almost immediately, with only two extra steps:

For who? 

Perfect scenario if anyone from client's company could easily customise the Hosted Pages.  But for the start there are two key personas Peter the Product Manager and Sally the Engenier. 

Define the problem

In order to align with the brand's identity as much as it's possible, customization is necessary for Hosted Pages. 

However, during the MVP stage, it's not always possible to include every desired feature. Over-customization can also be overwhelming for users and take forever to complete.

What does success look like?

The time spent on customizing screens should not exceed 10 minutes.

Metrics: 

Design Process

Research.

Before creating any wireframes it's good to have an answer to these questions:

Outcome: 

To solve the first issue, I conducted 4 unstructured interviews, after which I created several options for UI design, and with the help of Hallway user testing, I got the winners: brand logo, colors, button shape, and fonts were determined.

It is also possible to add a choice of colours from the box of ready-made solutions.

Customisation tool. Wireframes 

You can see initial wireframe below. 

The user was given the opportunity to select steps in the flow (1 pic) and customize quite a lot of parameters (2 pic)

There were several reasons why the design didn't work. 

Firstly, the design for hosted pages was being developed simultaneously with the tool in the Console and Admin panels, while the requirements for content and the number of steps were constantly changing.

Additionally, at the same time, a new country was added with more steps in the flow, making it necessary to include all steps and rendering the option to select steps unavailable, at least for now. 

Customizing a large number of elements also took much more time, with not all parameters known, such as corner radius or shadow opacity percent. 

Each parameter is a variable that must be taken into account when creating new screens or making changes to current ones.

Outcome: 

It was decided to limit ourselves to a few key colors and not to give the option to change the font and button parametrs such as corner radius at the MVP stage.

Variables for Hosted pages

During the process, we had to consider how to approach the variables to ensure the most color combinations possible, while minimizing any mistakes users might make while customizing.

In the end, I was able to provide the user with 6 variables that can be used to customize the background, panel, font, a common color for buttons and icons (with varying degrees of transparency), and the color of the button's text. With this range of customizable colors, most potential color combinations can be achieved. The default color combination is monochromatic.

Examples

Final design

Creating a design for the Customisation tool in the console was the simplest step since all the necessary components, patterns, and spacing already exist in the Design system.  It was easy to put everything together as a constructor. The only aspect that required further refinement was the "choose the color" option, as it was taken out of the box solution, it works for MVP. 


So what Sally or Peter can do on the screen below?

Next steps

Understanding user behavior is crucial, which is why conducting unmoderated interviews followed by unstructured interviews with users who have experienced difficulties can provide valuable insights. 

Gathering the information is superimportant  to ensure that we are meeting the needs of our users.