Project duration: July ’22- August ’22
Project type: Employer (Yapsody India Private Limited)
Tools: Sketch Software, Pen, Paper
Roles and Responsibility: I was a dedicated designer in the 2-pizza team for this project. My responsibilities for the project were Requirement elicitation, Stakeholder Management, UX Research, Ideation, Wireframing, High Fidelity design, Prototyping, and Dev-handoff.
What is the Product?
Yapsody is an event ticketing company and has a prominent international presence in the event ticketing market. It also fulfills various ticketing, marketing, and merchandise sales-related requirements of clients.
Since there are so many product verticles, their billing will come with its own complexities and difficulties. In this case, the user experience of billing to a successful payment funnel plays a crucial role. Many companies prefer the “Subscription Model” in these cases as we have. Which can be static or flexible or can be metered. Subscription plans can be a prime source of revenue for many companies.
What is the Problem?
Earlier product verticles like Campaign Manager, Online Store, Inventory Management, etc., were part of one Parent product and a general fixed plan. It was an unnecessary burden to our customers. Whether the client needs a product or not, it was a “General billing” (Refer fig.). In addition in some cases, there is still a requirement for the sales team to intervene, which is also unproductive use of resources.
Every user has a different business with different needs. To do that, they tend to purchase only essential and beneficial services. But here we were offering everything on a plate, which was a big problem.
Design Process
We work as a 2-pizza team structure which has Design, Frontend, Backend, and QA people in one team handling one product/verticle at a time. We follow an agile methodology with a weekly sprint system.
1. Requirement Elicitation
Requirement elicitation meetings with the stakeholder are essential to understand the business perspective of the product and key insights on the features. It also elaborates functionalities required to make the product feasible and profitable.
Insights:
- We are introducing a “product suite” system, which will have different products with different plans and tiers. For that, we need a different kind of centralized billing system like AWS (Refer to Fig.).
- Some subscriptions and tiers are also going to modify as products are going to be separate. Product usage is going to be calculated based on data points.
- Integrate the stripe interface to handle pricing associated with different products and subscriptions. It will also be a payment gateway.
2. User Research
Data Analysis: Analysing data from the billing funnel and the nature of the user movement shows a 40% user base dropping from the payment section. These can be because of two reasons.
- Users may not have clarity on what they will achieve by subscription.
- They might not be getting plans according to their requirements.
These conclusions can be hideous in getting new customers, and it means that most of the business was by the retainer customers.
Competitive Analysis: By doing secondary passive Competitive Analysis, we found some interesting ways to present complex billing matrixes in simplified ways to the customers. We also analyzed products like Gitlab, Github, Google Workspace, AWS, and Notion. All products and services are evaluated on the parameters like product suite, Consolidated billing for multiple products, Payment page layouts, and User Flow.
Marketing and Support team Inputs: These teams work on a daily basis with customers. They also helped to get some beautiful insights from the clients.
Insights:
User Persona
Requirement elicitation, user research, and Competitive analysis have given us some insights. Based on those insights, we can create user stories, user roles, pain points, and user personas.
3. Ideation
User Flow
User flow helps keep things to the point and reachable in no time possible to do the job. Moreover, this flow also ensures users keep the context of what they are up to.
Wireframing
We brainstorm on the feasible, desirable, and viable layout with respect to the user flow. From those ideations, I selected some feasible layout sections (red stars – Priority 1) from these ideations and created our final dashboard screen for billing. There were some ups and downs to keeping business decisions and user needs on the same track. At last, it all came on the same page, and we kept some ideation in scope for future expansion.
High Fidelity Designs
Once wireframes have a green flag, the high-fidelity design process gets a start. Yapsody has its design system called the “Ansh Design System” and standards for visual designs. As per the requirements, we need to design and develop some new components as a new addition to the system. That was all about the dashboard page. With that, as a by-product, we need to update our subscription plan page. For that, we realized two main things, it should be visually appealing and communicate clearly and concisely about offerings.
In addition, we follow Mobile first approach and responsive designs. As Yapsody has more active clients from the US, Canada, and European countries, designs follow accessibility and privacy regulations. Some of the shots of the billing desktop designs are presented below.
Prototyping
We are near the end of the design process, but it is never the end.
The improvement process must have an infinite loop of repetitions, as the design has.
At this point of time, we had already presented and discussed High-fidelity design with the team and stakeholders, now it’s time to prototype and record that video for the reference of the dev and QA team.
Documentation and Dev Handoff
Along with that, we maintain a document with screens and annotations. It will contain details of transitions, constraints, connecting screens, etc. Here, we already have a design system if we don’t have a design system, we have to annotate the heading hierarchy, labels, font styles, Instances details of components, etc.
These all could be done via design software or via zeplin to dev handoff. The purpose of document creation is to use a reference in case of mischievousness in handling files.
Along with this document, the Dev team has an implementation meeting, where I have to explain each screen with it’s user flow, constraints, use cases, etc. In this place, they ask their queries if they have any, and the dev team starts their work here.
4. User Test
Every new experiment in design is subject to user tests which can give you enormous data about user behavior. We provide a beta version of a new product to selected-targeted users to check its feasibility, viability, and desirability. It facilitates us to monitor user behavior on Heap and analytics. Later on, we can iterate in designs based on those insights.
The results of these tests are out of the spectrum of this case study.
Take Aways
Throughout this project, I learned key aspects of billings, payments, and payment gateways and what to take care of while designing. It gave me a clear understanding of how this finance matter works on the backend of any site. This project also provided hands-on experience in visual design. Once again called a chance to work on new elements of the Design System.
Next Steps
- Some points were kept aside during the ideation process from implementation, which are lower priorities. Implement them.
- Iterate designs on the basis of user testing data