BSNL
Website home page redesign
Team
Solo project
Year
2024
My role
Research, UI Design, UX Design, Responsive Design, Accessible Design
Audience
18 - 50+ years age group
Research tactics
UX Audit, Competitor Analysis, Persona, Empathy Map, User Scenario
Bharat Sanchar Nigam Limited (BSNL), a government-owned telecom company headquartered in New Delhi, serves a large user base across India. However, it has seen limited improvements over the years, leading to a gradual decline in user trust. To remain relevant and competitive in the digital age, it is essential to modernize the platform in line with current usability and design standards.
Challange
The BSNL website offers a poor user experience due to outdated design and complex navigation. A redesign is needed to make it more user-friendly, accessible, and aligned with modern web standards.
Objective
-
To design existing BSNL website with modern look and simplified navigation.
-
To design and develop a responsive website that delivers a seamless and consistent user experience across all devices, including desktops, tablets, and mobile phones.
-
To implement an accessible design that adheres to WCAG guidelines.
Heuristic evaluation
The project began with a heuristic evaluation using Jakob Nielsen’s 10 usability principles to identify usability issues on the website. The homepage was chosen for their high user interaction and importance. Zero to four point scale used to measurement of the severity each heuristics.
Home page
Sign In page
Reach us page
User study
After the heuristic evaluation, primary research was carried out through personal interviews and real-time observation of users on the BSNL website. The study included both young and elderly participants to understand different user needs and behaviors. Insights from screen recordings and direct observation helped create detailed user personas and journey maps.
Persona
User journey map
Information architecture
To improve clarity and ease of use, the homepage layout was redesigned to offer a cleaner and more structured experience.
Existing information architecture
Improved information architecture
Wireframe
The basic structure of the website was first defined through wireframes. Initially, low-fidelity wireframes were sketched using pen and paper to map out the layout. These were later developed into high-fidelity wireframes using Figma for a more detailed and polished design.
High fidelity wireframe
High fidelity wireframe
Visual design
After finishing high fidelity wireframe of the home page worked on visual elements of website like fonts, color, buttons, cards and other placeholder.
.png)
Responsiveness of the screen design
While designing the website, responsiveness across all major devices—including large, medium, and small screens—was carefully considered to ensure a seamless user experience on any device
Static mockup
After completing the visual design, the wireframes were replaced with refined visual elements to create static mockups of the website. Both light mode and dark mode versions were developed to enhance accessibility and provide users with viewing options that suit their preferences and needs.
Light mode
Dark mode
%201.png)
Interactive mockup
Final thoughts
This project aimed to revamp the BSNL website with a user-centered approach, addressing usability issues and modernizing the overall experience. Through heuristic evaluation, user research, and iterative design, the platform was redesigned to be more intuitive, accessible, and responsive across devices. The improved interface not only enhances navigation and clarity but also supports a broader range of users, from tech-savvy individuals to older adults with limited digital experience—ultimately helping restore trust and engagement with BSNL's digital services
