REPLICATING & REDESIGNING
The final design
Desktop
Mobile
INTRODUCTION
The client
Inovirtue, a digital startup, specializes in providing a range of B2B digital solutions. Among its offerings is a coaching app called NWOW, an acronym for New Way of Working. The primary product is a web application designed to facilitate online video call sessions between coaches and their clients. In an effort to broaden their range of offerings, Inovirtue has made the strategic decision to expand their portfolio by introducing a new B2C product that leverages the functionalities of their existing coaching app.
Designing a new product
A product allowing providers to offer their services, via paid 1:1 video calls to their social reach
INTRODUCTION
About the project
The requirements
Design a new B2C product called Trusted Call, that allows providers to generate revenue from their social media presence through video call sessions. For instance, a makeup influencer adds a link to their social media pages, enabling their followers to book a one-on-one tutorial video session or initiate an instant call.
The challenge
To design a MVP web app for a provider and a consumer. Reusing features designed and built for B2B product NWOW with a new brand.
The team
UX Designer x 2
Product Owner
Developers x 10
The timeline
September 2022
INTRODUCTION
Responsibilities
Collaborated closely with my UX design colleague to define the problems, ideate solutions and design components.
Solely responsible for designing the consumer's web app, which included navigation, new features and components.
IDEATION
User Flows
We started the ideation process by started by creating happy path user flows for both the provider and consumer. Here are flows of the initial user journeys.
Provider sign up process
.png)
Consumer books a session or instantly calls the provider
REDESIGN
Component library
Our initial UI challenge was to create a new component library that aligned with the updated branding guidelines. Leveraging React for building Inovirtue products, we opted for the Ant Design UI library as the primary white-label component resource. We then customized the library to match the branding styles of NWOW and Trusted Call. Additionally, we designed custom components for each product and organized them into dedicated libraries within the Figma design tool. Close collaboration with the UX Designer, Product Owner, and Front-End Developers ensured a cohesive outcome throughout the process.
NWOW
Trusted Call
Primary button
To showcase the distinctions the updated primary button now features a new background color, height, border radius, and typography.
Height 40 px
Border radius 30px
Primary colour HEX 141414
Typography
Roboto Regular 16px
Height 56 px
Border radius 16 px
Primary colour linear
HEX 53E88B/15BE77
Typography Poppins Bold 16
New custom components
I designed a new custom component cards for mobile that provides consumers with the option to instantly call or book a session with the service provider. This example showcases the implementation of atomic design method, which helps front-end developers understand the composition of components within a card and its various stages. This system proves to be valuable in comprehending the structure and sources of components within the overall design.
Atoms
Molecules
Organism
Design
REDESIGN
Log-in
This is an example of a feature we were able to duplicate and rebrand. These are the desktop design log-in screens for NWOW (left) and Trusted Call (right).
REDESIGN
Booking feature
The booking feature allows the consumer to book a session with the provider. The developers used third-party scheduling API onsched, which meant that the flow was pre-set, but we could apply our own front-end design. Although the booking procedures for both products bear some resemblance, there are variations between them.
In the case of the NWOW product, customers are assigned to one or two coaches, and they are limited in the number of sessions they can book per month. On the other hand, the Trusted Call product allows customers to book an unrestricted number of sessions with any provider.
NWOW
.png)
Trusted Call
NWOW
Trusted Call
Furthermore, for the NWOW, the consumer's employer pre-pays for the sessions, whereas with Trusted Call, the consumers have to pay for their own sessions through the third-party payment provider, Stripe.
NEW DESIGN
New features
As part of the design process, it became evident that consumers required a means of accessing their call logs, allowing them to easily get back in touch with their provider and keep track of their calls in connection to payments. After completing an instant call session, the user is directed to the call history page, or they can access this page via the menu.
Call history
.png)
Multiple profiles
Since this is a B2C product, the user has the flexibility to use Trusted Call both as a consumer and provider. With this in mind, we developed a feature that enables the user to create a new profile and switch between profiles seamlessly once they are logged in.
CONCLUSION
Learnings
Through this project, I gained valuable insights and identified areas where I would have made different decisions. I strongly believe in the design thinking process and the importance of creating a product that effectively solves user problems, thereby enhancing their experience. Ideally, I would have conducted user research and tested competitor apps. However, we successfully addressed this challenge by conducting comprehensive competitor research, which led to the development of user stories. In retrospect, I realize the significance of conducting user testing on prototypes, as it plays a crucial role in uncovering potential usability issues.
​
Looking back, one aspect I would have handled differently is checking the accessibility of the designs. Although the branding was already established before my involvement, I later discovered that the contrast between the text color and the background color on the primary buttons does not meet WCAG guidelines.
​
Furthermore, this project deepened my understanding of involving developers early in the design process. Collaborative meetings with front-end developers allowed us to discuss components in detail, leading us to the decision of duplicating the existing component library with new branding and incorporating new custom components.