Purpose
This study analyzes how effective users can navigate the SDG&E website, assess usability issues, validate those issues by user testing, and develop solutions while understanding the website.
Process
While the SDG&E site looks clean and simple for users to navigate, after usability testing combined with analytics, I realized that the navigation has architectural and organizational issues.
Insights
My testing showed main users came to the site with questions about customer services links or acquiring information regarding safety and outage much more than they did about the events and news. Therefore, this study’s main focus was to create a layout incorporating the top-visited contents with a Semantic UI framework that aims to be user-friendly. In this case study, I will focus on redesigning the homepage architecture and navigation from the initial web layout and improve the visibility of important components to improve content search and information accessibility.
Objectives
Improve and reorganize the navigation system.
Enhanced the search and browse-ability.
Represent a manageable featured content.
Add the Customer Service tap directly to the top navigation that links to its own improved page.
add reminders
Add visual effects to differentiate the links and contents users looked at before.
Create visible color change on links and buttons at the hover and click stage.
User Experience
The focus is to evaluate why users open the SDG&E website and how the site allows them to find what they need, and if the user can clearly identify which navigation heading to choose from. The challenge of this site is to provide its frequent-users services while exposing them to the necessary information.
For the user-testing to find usability issues, I approached three users to find problems. They all are considered excellent target audiences for this task because they use this website frequently. While collecting feedback from users and interviewing, I realized that users’ primary reason to open the site is looking for customer service links much more than they did news about the utility. Therefore, the main focus will be on how users can easily find relevant information and how effectively they can navigate to obtain clear feedback about their experience and satisfaction with the website.
Usability Issue 1.
Problem:
There are no indications of recognizing where pages are located, and there are no visible visual effect to differentiate the contents that users looked at before.
Solution:
Because frequent users intend to revisit the website to find more information about the subject, it has to indicate where the information the user is interested in located. To help users get to the content and provide more clarity without confusion, we can use breadcrumbs or highlighted menu treatment. Pictures 1 is choosing from the Customer Services tab in the navigation bar. Picture 2 is the selection page from the Customer Service category. (Request Change of Mailing Address). There is no indicator showing the user how she got to this page within the site.
This can be solved by adding breadcrumbs or implementing different colors on visited links or by adding visual elements.
Usability Issue 2.
Problem:
Content organization- Information Architecture issues.
There are several navigational categorizations in the site that fit different usability needs. Overall, the site has four navigational menus. There are Random and unpredictable categories hidden under the tab called “More info” next to Residential and Business buttons that are primary navigations in the main navigation. This is a very generic name for such an important position. Does that mean all the other less important options are under that category?
Solution:
The website needs better comprehensive navigational planning to create well-thought-out solutions based on the users’ needs. The category lists are quite large. Many pages are very short and can be combined in one page to keep related information together, and some can be removed. There are also a lot of redundant tabs. Displaying Some of them are useful and some causing clutter. To address a wide range of services, navigations need to be titled and categorized better so that users can find information faster, especially when they revisit the site. Many short pages can be combined or reduced to keep visitors closer to find what they are looking for.
Usability Issue 3.
Problem:
Content Color Choice.
Even though the SDGE site is impressive, users feel lost trying to find their way around the site. The color of the menu navigation background and website background is similar. The contrast between the navigation background color and its surroundings and website background color is not sufficient, and that small difference looks like the designer’s mistake.
The color contrast is not enough, and the two backgrounds blend into each other. Users can not differentiate them from one another.
Even though the list of residential options with the home metaphor menu is selected in the mobile layout, the darker blue color of rollover is insignificant and hardly recognizable.
Solution:
Even small issues like low contrast in navigation bar color can affect users’ experience on the site, and providing a better color choice makes the website more understandable.
A small change in the color scheme will go a long way in giving users a more pleasant experience and helping them recognize and evaluate where they are on the website and how to find their way back before causing them to leave the site.
Wireframe Mockups
Prototyping
This prototype aims to provide more opportunities for users to find the information they are looking for with an improved and reorganized navigation system. This website offers a range of information with a large list of services for a wide number of users, and the navigation is the opportunity to use the right terms and shows important information. To address a wide range of services, navigations need to be titled and categorized better so that users can find information faster, especially when they revisit the site.