📃 Case Study – Redesign of Rahi Website

Redesign of Rahi Website

Rahi Systems is a B2B industry leading global IT solutions provider that offers a wide range of services and products in data center infrastructure, cloud solutions, network infrastructure, audio-visual solutions, and security solutions. They help organizations with their technology needs, optimize their IT infrastructure, improve productivity, and reduce costs.

Project Duration: 8 Months

The Problem

Rahi’s website design looks outdated compared to it’s competitors, and parts of it’s user experience are unpolished. An overhaul is overdue and will ensure the website remains competitive in the long run.

The Solution

We identified issues on the existing website and applied a UX design framework, considering user needs and preferences. The result is a revamped website that sets new standards for seamless interactions.

My Role

I led the project and worked on all aspects from strategy and planning to execution with respect to design and developmentwhich includes new design system, visual, UX, motion design and interaction design. We also revamped the UX of the key pages with the help of the design team, while my developer colleagues helped implemented the designs under my guidance.

  • Product Strategy
  • Project Management
  • User Research
  • Interaction
  • Product Management
  • Prototyping
  • Development
  • Testing
  • Collaboration
  • Visual

UX Design Process

Process We Followed

We followed design thinking process throughout the journey. Here is the visualisation of the framework for better understanding

process we follow

Double Diamond Design Process

double dimand process

Stage 01

Discover

In the discovery phase, our goal was to deeply understand the problem and its significance. To achieve this, we conducted primary research through interviews, surveys, and observations. By gathering data directly from users, we gained valuable insights into the problem space, allowing us to prioritize user needs and address the challenge effectively.

  • 1. Identify the needs of the Users
  • 2. Develop a clear understanding of business objectives
  • 3. Evaluate technical constraints
  • 4. Analyze Data
  • 5. Competitive Analysis

Identify Users and their Needs

Here, we understood the target customers, their goals and motivations. Also, assess what current users think of the website through user surveys and interviews.

Getting access to business users

We started inside the company by being proactive, reaching out and working with all areas of the business.

1. Product Owner

The product owner is an important person to involve when recruiting users for research and concept validation, as it is in their best interest to conduct this research to ensure the success of the product. Additionally, if they have influence within the company, they can help with the recruitment process and may have connections with people or customers in the industry that we can reach out to for research purposes. Overall, partnering with the product owner has proven to be a valuable asset in the user recruitment process.

2. Technical Architects

We established a relationship with a technical architect or solutions architect to gain a better understanding of the customer and user needs from a technical perspective. They regularly meet with clients to provide business solutions and were able to provide valuable insights to us. This helped us improve our understanding of the technical needs and requirements of our users.

3. Technical Support

Technical support teams are often the first point of contact for users who experience problems or have questions about the product. They have regular interactions with usersand are thus able to identify the most common issues and pain points that users encounter. We collaborated closely with the technical support team to gather insights about user problems and pain points. By leveraging their expertise, we were able to better understand the user experience and identify areas for improvement in the product. Their feedback was invaluable in guiding our efforts to enhance the product’s usability and user satisfaction.

4. Sales & Business Development Team

Sales and account managers hold the closest relationship to clients–they understand their desires and demands, and can help build bridges for you, pose questions on your behalf and you could even try to attend customer meetings.

interview scheduling

Interview Scheduling Template

RS-Interview-Questions

Interview Questions

Interview Highlights

Develop a clear understanding of business objectives

We got clear insights into how the website should be designed to meet the company’s goals and objectives by interacting with stakeholders and product owners within the company, conducting market research to identify customer needs, and analyzing competitors’ websites to see what works and what doesn’t.

Evaluate technical constraints

When designing a website, it’s important to be aware of any technological limitations or challenges that could impact the design, functionality, or user experience.We performed UX audit to pinpoint and address process, usability and design issues effectively.

Earlier Website Development Process

Design-Process

UX/UI Audit

UIUX-Analysis
UIUX-Analysis

Analyze Data

We analyzed current data in order to create a website that effectively meets the needs of its target audience. We collected the information about the website’s target audience, their preferences, behaviour, and needs, current website performance and audience overview as well as the current trends and technologies in website design.

analysis data
analysis data

Competitive Analysis

We conducted competitor analysis to gain insights into the strengths and weaknesses of competitors, identify opportunities for differentiation, and create a website that effectively meets the needs of its target audience.

competitive analysis

Survey

With the help of survey we collected data and insights from the website’s target audience which can be used to improve the website’s design, content, and functionality. This can lead to a better user experience, increased engagement, and ultimately, better business outcomes.

survey

Stage 02

Define

In Define stage we have gone through the insights gathered during the Discovery stage and used them to define the problem we are trying to solve. This stage involves synthesizing the research and user data gathered during the Discovery stage to identify the user’s needs, pain points, and goals.

  • 1. Creating personas
  • 2. Defining the problems

Creating Personas

Creating personas during the Define phase is a common practice to help teams better understand and empathize with their users or customers.

Defining the problems

In this stage, We defined the problem based on the insights gathered during the discover stage. It involves framing the problem statement and identifying the core issues that need to be addressed.

pain points

After gathering the findings from the research, I worked with the team to define the problem statement.

After developing the problem statement,we tested it with stakeholders to ensure that it accurately reflects their needs and priorities. This helped us to refine the problem statement and ensure that everyone is aligned on the problem that needs to be solved.

  • 1. Prioritize features and improve functionality
  • 2. Improve design and branding
  • 3. Prioritize accessibility
  • 4. Prioritize performance
  • 5. Increase scanability
  • 6. Expand content and restructure pages
  • 7. Responsive design
  • 8. Collaboration with cross-functional team

Stage 03

Ideate

During the ideation phase, With the help of brainstorming, sketching and other creative techniques we generated a wide range of potential solutions to the problem/challenge that mentioned in the define phase.

  • 1. Card Sorting
  • 2. Brainstorm Sessions
  • 3. Information Architecture
  • 4. Affinity Mapping

Card Sorting

After getting better understanding of the scope and goals of the project, we moved onto card sorting to help organize and structure the information or content that will be included in the design.

Card-Sorting

Brainstorm Sessions

We started with a brainstorm session to generate a large number of ideas and concepts related to the design problem. This helped us to set the foundation for the design work to come.

Brainstorm Sessions

Information Architecture

After brainstorm sessions, we moved on to IA which helped us to organize, structure, and present information in a user-friendly and intuitive manner.

Information Architecture

Affinity Mapping

In Affinity Mapping we organised and categorised ideas and information into related groups. In this we grouped ideas or concepts together based on their similarities and creating clusters of related ideas.

Affinity-Mapping

Stage 04

Prototype

During the prototype stage, we explored different design concepts, tested product functionality, and identified potential design flaws. We also gather feedback from stakeholders and end-users to ensure that the final product meets the needs of its intended audience.

  • 1.Wireframes
  • 2.Design System
  • 3.High Fidelity Design
  • 4.Interactive Prototype
  • 5.Micro-interaction

Wireframes

We created wireframes in the early stages of the design process which served as a guide for the design and development team to follow and get clarification on functionality and it’s working as per design got it reviewed with all stakeholders have a clear understanding of the project’s scope and goals before any actual design work begins.

Wireframes

Design System

We created design system which helped us create consistent and coherent user experience across different platforms and products.

High Fidelity Design

We created high-fidelity design to improve the quality of the end product also streamline collaboration, user testing and accelerate project timelines.

Interactive Prototype

With interactive prototype we created working model of a product that simulates the user experience and allows users to interact with the product.

This helped us to get the user feedback early in the design process, before investing time and resources in development.

This helped us to test the functionality of the product before it is built.

An interactive prototype helped us to visualize the design ideas in a tangible way. It helped stakeholders understand the design concept and provide valuable feedback on the layout, usability, and overall user experience.

Micro-Interaction

We used micro interactions to make a user experience more seamless, intuitive, and enjoyable to users as they interact with a product or service.

Stage 05

Testing & Iteration

During the prototype stage, we explored different design concepts, tested product functionality, and identified potential design flaws. We also gather feedback from stakeholders and end-users to ensure that the final product meets the needs of its intended audience.

  • 1. Usability Testing
  • 2. A/B Testing

Usability Testing

We tested the product with real users to gather feedback on its usability, effectiveness, and efficiency. It helped us identify design issues, improve the user experience.

Steps we followed in Usability Testing

  • 1. Define the product/specific section for testing
  • 2. Define the objective for the test
  • 3. Create tasks based on test objectives
  • 4. Recruit Participants
  • 5. Test setup
  • 6. Run pilot study
usability

A/B Testing

We conducted A/B testing to make data-driven improvements, optimize user experiences, and drive better results, all while reducing risk and ensuring ongoing usability and relevance.

Steps we followed in Usability Testing

  • 1. Find a problem
  • 2. Create a hypothesis of how you could solve it
  • 3. Create a new design or different copy based on your hypothesis
  • 4. Test the new version against the old one
  • 5. Analyze the results

A/B Test Method

We did some research and created several different designs. The goals of the redesign were to improve the visuals and increase attention to specific sections.

Home Page

Results

The version A showed a big increase in attention on banner but the services mentioned below were not getting enough attention.Also we noticed that locations mentioned in footer were getting more click to see more details, with version B bringing over 13% more attention to the desired sections of the home page as we introduced map with all the locations details and solutions offering in banner with an overview, but here also we noticed accessibility issue with the banner so we improved the design and this design change brought a 53% increase in CTA clicks.

The team believes this is due to the some design changes, structural changes and added contrast on the page bringing more attention to the important elements.

Stage 06

Development

After completing the testing stage and obtaining approval for all the designs from stakeholders, including those modified based on testing feedback, we proceeded to the development phase.

  • 1. Design hand-off
  • 2. Front-end and Backend Development

Design Hand-off

In design hand-off we transferred approved designs development stage. The goal of a design hand-off is to provide all the necessary information and assets to developers to be able to effectively implement the designs.

Front-end and Back-end Development

Front-end and back-end development are essential for creating a functional and effective website. Front-end developers focus on creating an engaging and user-friendly experience for the end-user, while back-end developers work on the technical aspects of the application that enable it to function correctly. Good communication and collaboration between designers and developers are crucial to ensure that the website or application works seamlessly and provides a great user experience.

Front-end Development

  • 1. Theme Creation: Creating theme that fits the design requirements of the website. The theme will dictate the look and feel of the website, including layout, typography, and color schemes.
  • 2. Customization: Customize the theme to match the design requirements, including adding logos, fonts, colors, and images.
  • 3. HTML/CSS/Javascript: Write HTML/CSS/Javascript code to build the website’s front-end functionality, including page layouts, navigation menus, and interactive elements.
  • 4. Responsive Design: Ensure the website is responsive and can be viewed on different devices, including desktops, laptops, tablets, and smartphones.

Back-end Development

  • 1. WordPress Installation: Install and set up WordPress on a web server.
  • 2. Database Creation: Create a database for the website using a tool such as phpMyAdmin.
  • 3. Theme Integration: Integrate the customized theme into the WordPress installation.
  • 4. Plugin Integration: Install and configure necessary plugins to add desired functionality to the website, such as SEO optimization, contact forms, and social media integration.
  • 5. Content Creation: Add content to the website, including pages, blog posts, and images.
  • 6. Custom Development: Write custom code to build additional functionality and features that cannot be achieved using pre-built plugins.
  • 7. Testing: Test the website’s functionality, security, and performance, including browser compatibility, load time, and user experience.
  • 8. Deployment: Deploy the website to a live server and ensure it is accessible to the public.

Stage 07

Measuring Success

In Measuring success, we evaluated the effectiveness of a product’s design in meeting user needs and achieving business goals with the help of quantitative and qualitative metrics.

1. Successful collaboration between cross-functional team

Let’s see how we changed
the process

2. Design Impact

Implementing a dynamic website design boosted users first impression of site. We implemented functional and visually pleasing elements to create a positive and engaging user experience.

Before

After

Here, we worked on consistency, created design system, categorised USP points, improved overall sitemap of the website and added interactive elements which result in increase in overall customer interaction.

3. Performance Metrics

Performance metrics

Result and Impact

Following the revamp, we observed a significant impact on our business. This resulted in a remarkable increase in overall user numbers by 45%, a 2.5x improvement in session rates, a substantial 78% reduction in bounce rates, and a 2x increase in average session duration.

4. Page Speed

When we design interactive sites, the pages can get bogged down. All the weighty elements can slow the page’s load speed to a crawl. Users don’t stick around if it’s takes more than two seconds to load. They’ll leave for another site if yours takes too long to load.

As we implemented interactive features on the site,  we worked on the load time improvement also considered factor affecting it while designing the website.

Before

After

5. Mobile-Friendly

Mobile-friendly design is essential for improving user engagement on a website, especially considering that the majority of online traffic comes from mobile devices. Here are some ways that mobile-friendly design can improve user engagement:

  • 1. Improved user experience: A mobile-friendly design ensures that users can access and interact with a website or application easily on a mobile device. This can improve the overall user experience and keep users engaged for longer periods of time.
  • 2. Faster loading times: Mobile-friendly designs are optimized for mobile devices, which means they have faster loading times. This is crucial for user engagement, as slow loading times can quickly lead to frustration and cause users to abandon the website or application.
  • 3. Better readability: Mobile-friendly designs use fonts, colors, and layout that are optimized for smaller screens. This can improve readability and make it easier for users to engage with the content.
  • 4. Simplified navigation: Mobile-friendly designs often have simplified navigation, with menus that are easy to use and accessible from any page. This can improve the user experience and encourage users to engage more with the content.
  • 5. Touchscreen-friendly design: Mobile-friendly designs are optimized for touchscreen devices, which means buttons and menus are designed to be easy to use with a finger or thumb. This can improve the user experience and make it easier for users to engage with the content.

It All Starts With A 'Hello'.