About Vandar
Vandar' is an integrated payment service (SaaS) with 17 payment methods, integrated B2B services, pay-by-vandar payments, and B2C electronic wallets and one-click payments services.
The Context
In the past years, changes in Vandar's service structure and an increased focus on B2B customers had rendered the website's content and structure ineffective. The use of outdated technology hindered the process of implementing changes and adding new content. Customers relying on the website's content for service inquiries faced difficulties due to the outdated nature of the information. As a solution, we decided to redesign the website with a new branding approach and based on the new service structure.
Design Process
When you have a myriad of business requirements, constraints and politics, a systematic approach is paramount. Design thinking with a proper kick-off allowed us to define a business vision. This was followed by discovery and delivery phases.
-
Discovery Phase
In the discovery phase, we gathered stakeholder requirements, documented issues, and prepared the information architecture with sitemap, navigation, and wireframes.
-
Delivery Phase
Delivery phase is the solution space that makes ideas tangible, usable and beautiful. Deliverables: UI & interaction design, design system.
kick off
The main challenges revolved around aligning different teams and their project roles. As the project lead, I streamlined activities and clarified task pathways on a single page for effective coordination:
-
Content Structure
To ensure accurate content structure in line with the service roadmap, we held sessions with the content team. This ensured content aligned with the new service structure and business audience needs.
-
Brand Attributes
Through brainstorming and prioritizing brand attributes across categories, we established the foundation for crafting a mission statement. Our goal was to partially preserve the previous spirit like color, imagery, and graphics in a new style.
-
UX Strategy
In the UX domain, we validated assumptions through user research, aligning with business goals. We reduced risks by defining success metrics that matched business objectives.
-
Technical limitations
We engaged our tech team for a website redesign. We defined technical needs, discussed features, and addressed compatibility. Our collaboration ensured performance, security, and scalability considerations.
How Might We
We expect the new design to guide users in accessing their required services, reducing the load on the sales and support teams for customer onboarding. Additionally, we anticipate the new design to streamline the customer acquisition process and lead to increased conversions. With a fresh branding approach, the new design aims to position Vandar as a comprehensive provider of B2B services, focusing on businesses and standing out from competitors
User Persona
We created our persona, and website audience and mapped out their requirements based on conducted research and long-term organizational vision.
Competitive analysis
We analyzed Iranian and international services similar to Vandar's offerings to gain insights into website design best practices. This competitive benchmarking process helped us identify strengths and weaknesses in our website design, and informed our decisions for improvement.
Successful benchmarked products
Revolut structure and sitemap
Information Architecture
Products were implemented based on the newly designed navigation structure. This structure was also utilized for the redesign of Vandar's dashboard and enables users to effortlessly locate the desired products on the website while conveniently accessing the details of each feature associated with the respective product.
Evaluation via Tree Tests
To ensure an intuitive understanding of the site‘s structure I tested the sitemap on-site with potential users through so-called tree-testing by giving them relevant tasks, such as "If you wanted to request a demo for the Direct Debit service, where would you click?" "If you wanted to request a demo for the Direct Debit service, where would you click?" Based on the test results, the sitemap has been adjusted accordingly.
Building the Site Structure
Jointly creating low-fidelity wireframes. The advantage was a direct buy-in of the approximate structure.
Icon Design
In the redesign project, we created icons for Vandar's products. Our product design team collaborated with the branding team to ensure alignment with Vandar's principles. Using familiar iconography forms, we aimed to communicate each product's purpose effectively. Our goal was to establish a visually cohesive and consistent iconography system, enhancing the user experience and brand recognition.
Furthermore, the images for the hero section of each product were also designed based on the corresponding product iconography. This ensured consistency throughout the website and provided a visually appealing and intuitive user experience.