Revitalizing Instapay's Website for Enhanced Product Awareness and Merchant Engagement
Revitalizing Instapay's Website for Enhanced Product Awareness and Merchant Engagement
Revitalizing Instapay's Website for Enhanced Product Awareness and Merchant Engagement
Timeframe
[2020] - [4 two-week sprints]
Brief description
Instapay, an invoicing app created by MCPayment, a payment gateway company, aims to revolutionize digital payment usage which is a necessity during the pandemic. See the figma prototype in the section below
My Role
UX Design
Content Creation
UI Design
Company
Instapay x McPayment
Team
[Agile] - 1 Product Owner, 1 UI UX Designer, 1 Front-end Developer
Project Type
Responsive Website
UX Deliverables
high-fidelity mockups
mvp
figma prototype
UI Kit
Sitemap
Persona
Website / File link
instapay.id
Overview
Problem Statement
Problem Statement
This project aims to rejuvenate the outdated website for Instapay, an invoicing application. Our primary goal is to enhance user experience by introducing advanced features and improving overall usability. By doing so, we intend to better assist merchants, our end-users, while simultaneously empowering the Marketing team with effective tools to heighten user awareness.
This project aims to rejuvenate the outdated website for Instapay, an invoicing application. Our primary goal is to enhance user experience by introducing advanced features and improving overall usability. By doing so, we intend to better assist merchants, our end-users, while simultaneously empowering the Marketing team with effective tools to heighten user awareness.
Solution
Solution
In an 8-week sprint, I conducted an audit of the old Instapay website, and with the insights gained, executed a redesign. The new website now showcases fresh visuals, a compelling tone of voice, clear product context, and improved navigation. Its modern aesthetic resonates with our millennial audience, and strategic CTAs guide user actions. This not only enhances user experience but also empowers the business team with a more effective marketing tool.
In an 8-week sprint, I conducted an audit of the old Instapay website, and with the insights gained, executed a redesign. The new website now showcases fresh visuals, a compelling tone of voice, clear product context, and improved navigation. Its modern aesthetic resonates with our millennial audience, and strategic CTAs guide user actions. This not only enhances user experience but also empowers the business team with a more effective marketing tool.
Key Features of the Instapay Website
Promo Info
Promo Info
Payment Info
Payment Info
Product Info
Product Info
News & Event Blog
News & Event Blog
My Role
As the sole UI/UX Designer, my responsibilities were comprehensive, playing a pivotal role in every step of the project.
As the sole UI/UX Designer, my responsibilities were comprehensive, playing a pivotal role in every step of the project.
Design & Illustration:
I was in charge of the overall user interface design, creating a user-friendly and aesthetically pleasing layout. All the illustrations were created from scratch to ensure they aligned with the brand and appealed to our target users.
Design & Illustration:
I was in charge of the overall user interface design, creating a user-friendly and aesthetically pleasing layout. All the illustrations were created from scratch to ensure they aligned with the brand and appealed to our target users.
Content & UX Copy:
I crafted the website's content and UX copy, ensuring that the information provided was clear, concise, and communicated effectively to the user, enhancing their understanding of the product.
Content & UX Copy:
I crafted the website's content and UX copy, ensuring that the information provided was clear, concise, and communicated effectively to the user, enhancing their understanding of the product.
Collaboration & Communication:
My role also involved continuous collaboration with the product owner and front-end developer, ensuring that design decisions were both aligned with the product vision and technically feasible.
Collaboration & Communication:
My role also involved continuous collaboration with the product owner and front-end developer, ensuring that design decisions were both aligned with the product vision and technically feasible.
Challenges
Resource Constraints:
Being the sole UI/UX designer in a small team, I was responsible for all design aspects of the project. Balancing multiple tasks such as interface design, illustrations, user experience planning, and interaction with the product owner and developer presented a significant challenge.
Resource Constraints:
Being the sole UI/UX designer in a small team, I was responsible for all design aspects of the project. Balancing multiple tasks such as interface design, illustrations, user experience planning, and interaction with the product owner and developer presented a significant challenge.
Designing from Scratch:
As part of the redesign, creating new illustrations and visual elements from scratch was a time-consuming and complex task, given the need to ensure they were on-brand and visually appealing to the target audience.
Designing from Scratch:
As part of the redesign, creating new illustrations and visual elements from scratch was a time-consuming and complex task, given the need to ensure they were on-brand and visually appealing to the target audience.
Efficient Communication:
Given the small team size, effective communication was crucial. Ensuring that the product owner's vision, the developer's technical considerations, and my design objectives were in harmony was an ongoing challenge.
Efficient Communication:
Given the small team size, effective communication was crucial. Ensuring that the product owner's vision, the developer's technical considerations, and my design objectives were in harmony was an ongoing challenge.
Time Management:
With a broad range of responsibilities and a small team, managing time effectively was vital. Prioritizing tasks and coordinating effectively with the team members to meet deadlines added to the project's challenges.
Time Management:
With a broad range of responsibilities and a small team, managing time effectively was vital. Prioritizing tasks and coordinating effectively with the team members to meet deadlines added to the project's challenges.
End-User Focus:
Keeping the end-users’ needs and preferences in mind while juggling multiple roles and responsibilities was a challenge. Despite the workload, it was crucial to remain user-focused and create a design that resonated with our target audience.
End-User Focus:
Keeping the end-users’ needs and preferences in mind while juggling multiple roles and responsibilities was a challenge. Despite the workload, it was crucial to remain user-focused and create a design that resonated with our target audience.
Feedback Loop:
Without a separate testing team, gathering and implementing user feedback was a challenging process. Ensuring that the website was not only visually appealing but also functional and user-friendly required an effective feedback loop and iterative design process.
Feedback Loop:
Without a separate testing team, gathering and implementing user feedback was a challenging process. Ensuring that the website was not only visually appealing but also functional and user-friendly required an effective feedback loop and iterative design process.
The Process
Given the limited resources, I implemented an efficient, sprint-based design process that encompassed wireframing, mockup creation, prototype design, and illustration creation, all iteratively across 4 two-week sprints, enabling us to adapt to changes and deliver a product meeting both user needs and business objectives.
Given the limited resources, I implemented an efficient, sprint-based design process that encompassed wireframing, mockup creation, prototype design, and illustration creation, all iteratively across 4 two-week sprints, enabling us to adapt to changes and deliver a product meeting both user needs and business objectives.
WEBSITE AUDIT
UNDERSTANDING TARGET MARKET
Main questions I asked
What is the goal of this website?
Who is the target market of this website?
When does the user use the website?
How the user going to use the website?
What is the goal of this website?
Who is the target market of this website?
When does the user use the website?
How the user going to use the website?
GOAL & TARGET MARKET
Goal:
1st Goal:
To redesign the Instapay website with an improved user interface and experience that facilitates easier access to information, leading to increased user awareness and engagement with the product.
1st Goal:
To redesign the Instapay website with an improved user interface and experience that facilitates easier access to information, leading to increased user awareness and engagement with the product.
2nd Goal:
To empower the Marketing team with a more effective platform that can be used to promote Instapay and its features.
2nd Goal:
To empower the Marketing team with a more effective platform that can be used to promote Instapay and its features.
Target Market:
Small to Medium Business Owners:
Business Owner need an efficient, reliable invoicing system to manage their transactions, track payments, and maintain records. Instapay provides a solution that simplifies their financial operations.
Small to Medium Business Owners:
Business Owner need an efficient, reliable invoicing system to manage their transactions, track payments, and maintain records. Instapay provides a solution that simplifies their financial operations.
Freelancers:
Freelancers, like graphic designers, writers, or consultants, often juggle multiple clients. They need an easy-to-use invoicing system that can handle different payment terms and track their income.
Freelancers:
Freelancers, like graphic designers, writers, or consultants, often juggle multiple clients. They need an easy-to-use invoicing system that can handle different payment terms and track their income.
E-commerce Vendors:
As online selling becomes increasingly prevalent, e-commerce vendors need a streamlined method for invoicing and accepting payments from customers. Instapay's digital platform suits their needs perfectly.
E-commerce Vendors:
As online selling becomes increasingly prevalent, e-commerce vendors need a streamlined method for invoicing and accepting payments from customers. Instapay's digital platform suits their needs perfectly.
Retailers:
Traditional retailers transitioning to digital transactions can benefit from Instapay's efficient invoicing and payment system, helping them modernize their operations.
Retailers:
Traditional retailers transitioning to digital transactions can benefit from Instapay's efficient invoicing and payment system, helping them modernize their operations.
Millennials:
Given their tech-savviness and preference for digital solutions, millennials across professions may find Instapay particularly attractive for managing payments and invoices.
Millennials:
Given their tech-savviness and preference for digital solutions, millennials across professions may find Instapay particularly attractive for managing payments and invoices.
USER PERSONA
See the example of one representative of the group
See the example of one representative of the group
COMPETITOR ANALYSES
To evaluate the market and get more accurate ideas at the ideation stage of the process, we conducted competitor analysis
To evaluate the market and get more accurate ideas at the ideation stage of the process, we conducted competitor analysis
SITEMAP
Once I had a clear idea of our users and their needs, I was able to ideate on a final sitemap for the website.
Once I had a clear idea of our users and their needs, I was able to ideate on a final sitemap for the website.
DESIGN COMPONENTS & ILLUSTRATIONS
Prototype
I created hi-fi with Figma, so I can deliver the handover smoothly to the developer.
I created hi-fi with Figma, so I can deliver the handover smoothly to the developer.
Web Desktop Prototype:
Web Mobile Prototype:
Final Results
Improved Responsive Instapay Website
Improved Responsive Instapay Website
⚠️
User Problem
User Problem
Users faced difficulty navigating the original Instapay website due to sparse information and poor content organization.
Users faced difficulty navigating the original Instapay website due to sparse information and poor content organization.
✅
Solution
Solution
The revamped Instapay website with fresh visuals, clear context, improved navigation, and strategic CTAs
The revamped Instapay website with fresh visuals, clear context, improved navigation, and strategic CTAs
Web Desktop Look:
Web Mobile Look:
✨Thanks for watching✨