India’s biggest voice-centric website redesign: A UIUX Case study.

Project overview

Wafa is one of India’s first voice-centric apps, with over 5 million downloads. With its user-friendly platform for social interaction and entertainment, it enables users to create and foster communities. The platform is accessible in regional languages such as Hindi, Telugu, and Tamil, enhancing user engagement. Wafa provides a seamless user
experience distinguished by its innovative design and user-centric interface. Equipped with new and exciting features, it allows community building and meaningful connections, bridging boundaries. It offers an unlimited and enriching experience, welcoming a global audience.

Duration

3 Days

Platform

Website and mobile

Tool

Figma & photoshop

My Role

I was responsible for the entire product. From research, Competitive analysis, synthesizing and prioritizing goals, brainstorm ideas to finally designing and testing the solution. I created informed based design such as wireframes, low fidelity and high fidelity prototypes, iterating insights along the process.

WAFA Old Website.

This was the old website structure for Wafa. The website provided an introduction to the Wafa application, explaining its nature as an entertainment platform. The Wafa website had a beautiful and well-structured design. However, it became my responsibility to redesign it. Upon reviewing the website, I identified several problems in its structure and design, such as font readability issues and visual hierarchy issues. Users might have found it confusing to navigate the website and locate the information they needed. Therefore, I formulated a plan to completely restructure Wafa website.

Problem statement

This is an important section of the case study where I will explain why Wafa should undergo a redesign. I firmly believe that after the launch of Wafa, the product undoubtedly garnered significant attention. However, please note that there is a Non-Disclosure Agreement (NDA) in place, and I am explaining this in relation to the NDA. Below, I am listing the problems I have identified:

1. Font

The font is not eye-catching and has issues in letter-spacing and letter padding, making it difficult to read and understand.

2. With no proper beginning and end

Due to the visual hierarchy issue, user may become confused about where to start which main points to read and observe first.

3. The Presentation is not very good

The presentation is not impressive to users, same pattern was found everywhere. It doesn’t catch their attention effectively.

4. Mobile Responsiveness:

The mobile view was challenging to comprehend and not very user-friendly.

5. Did not have a proper design system

It did not have a proper design system, For that reason, Upcoming changes were made with different design structure as per the designer’s preferences.

Goals and objectives

1. Enhance User Experience and user interface design: Improve overall usability and navigation to ensure a seamless and enjoyable experience for visitors. Implement responsive design to cater to users across various devices and screen sizes.
2. Boost Engagement: Increase user engagement through interactive elements, compelling visuals, and engaging content. Implement features such as polls, quizzes, or social media integrations to encourage user participation.
3. Improve Branding:Enhance the visual identity of the website to align with the brand image. Consistently use brand colors, fonts, and imagery to reinforce brand recognition.
4. Enhance Mobile Responsiveness: Achieve a specific improvement in user satisfaction with the mobile browsing experience.
5. Increase Customer Satisfaction: Set goals for improving customer satisfaction through feedback surveys and reviews.
6. Brand Consistency : Ensure that the website aligns with your brand guidelines and provides a consistent brand experience. This includes using consistent colors, fonts, and imagery.
7. Enhanced Visual Appeal : Update the design elements, graphics, and overall aesthetics to create a modern and visually appealing website that aligns with current design trends.
8. Accessibility: Make the website more accessible to individuals with disabilities, ensuring that all users can interact with the content easily.

Competitive analysis

Here I want analyse wafa competitor’s and their performance.Wafa competitors are YOYO, Ola Party, Hiyaa. I observed thier web presentation very carefulyy and studied how they presented fonts and colors and vsual hirarchies. Here are the three direct and indirect competitors analyses.

Mood board

Wafa project, I need some inspiration for the Redesign, After carefully reviewing various selected sections that I found appealing, I created a mood board using the design I liked the most. below I attached my selected items.

Sketches

The next exciting phase in crafting Credible is sketching. Here, I bring the magic of ideas and user experiences to life with the stroke of a pen. These sketches serve as the very first drafts for our app, paving the way for the captivating interface that will emerge.

Mid-Fidelity Wireframes

Within the innovative realm of the Credible project’s ideation phase, the crafting of Mid-fidelity wireframes emerged as a pivotal milestone. These wireframes orchestrated the alchemical transformation of nebulous concepts into vivid, tangible realities. They assumed a central role in our design journey, illuminating the path towards defining the very essence of the Credible platform, encompassing its structural integrity, aesthetic sophistication, and functional brilliance

Lets talk design and design systems

“In the visionary stage of crafting the Credible website, I harness the invaluable insights unearthed during my meticulous research phase and fuse them with the well-defined structure meticulously laid out in the ideation and sketching phases. This pivotal juncture is where I devote my efforts to sculpting a visually captivating and effortlessly navigable website interface. Here, I delve into the realm of high-fidelity design, transforming abstract ideas into a palpable, polished design that beckons users to engage seamlessly.”

In the era of speed and performance optimization, Syne Font takes the lead. Its lightweight structure and optimized code contribute to faster loading times, ensuring that your website remains swift and responsive without sacrificing the visual appeal of your chosen font. As web design trends evolve, Syne Font is designed to stay ahead of the curve. Regular updates and a commitment to staying relevant in the ever-changing digital landscape make Syne Font a forward-thinking choice for designers who want their creations to remain contemporary and future-proof.

The magic happens when these colors dance together. The dark elegance of #0C1719 serves as a perfect backdrop for the vibrant accents of #25D4D0. This harmonious contrast not only adds visual interest but also ensures that key elements pop, guiding users seamlessly through the interface with a touch of drama.For entertainment platforms that thrive on storytelling, this color combination creates an immersive environment. From movie streaming services to gaming websites, the #0C1719 and #25D4D0 palette enhances the narrative, making every click a step deeper into an enchanting digital realm.

Final designs

I meticulously crafted high-fidelity designs that masterfully transmute abstract concepts into visually stunning and seamlessly functional interfaces. These designs seamlessly melded the essence of our brand aesthetics with user-centric elements, culminating in an immersive and harmonious user experience that breathes life into our ambitious app project.

This is the fresh and updated Wafa design for the banner page. The previous Wafa theme converted a entirely in black, but now, Wafa has undergone a transformation, becoming more appealing and exuding a sense of luxury. Notably, the fonts and visual hierarchy have been meticulously refined, ensuring that users can easily read and focus on the most vital information. This redesign has significantly improved Brand Consistency and has made mobile responsiveness even more effective.

Page1. Wafa old web design/ Page2. Wafa new design

When I changed Wafa’s old graphics, the new wafa design got a complete new life and felt more attractive. The landing page presentation the old felt like a cluttered look and users may get feel like so-much to read. The new design I arranged all in one section, it is easy to find and easy to read, understand.

In below i attached wafa new pages:

Conclusion

The Wafa redesign project has not only met but exceeded its objectives. Key findings illuminated opportunities for improvement, and through strategic design choices, successfully addressed user pain points. Positive feedback and improved metrics underscore the tangible impact on user experience and interface design.

While challenges were present, each was met with innovative solutions, showcasing the resilience of the team. User feedback & Competitive analysis played a pivotal role, guiding our decisions and ensuring a user-centric approach. The post-implementation analytics tell a compelling story of enhanced engagement and satisfaction.

In essence, this redesign not only reflects a visual facelift but a commitment to delivering an unparalleled user experience. The journey doesn't end here; it's a continuum of improvement and responsiveness to user needs.

The Wafa still working the development side, As soon as possible the link will mention here.

Thank you guys for reading, it has been a very educational and fun project for me personally. I really hope y’all enjoyed it as well and also found something useful.

You can connect with me on LinkedIn here