top of page
eBird circle alt.png

eBird App Redesign 

Tag group.png

A personal project to make a popular citizen science app more engaging and welcoming to beginners.

This personal project was driven by my passion for birding and a desire to improve the experience of a popular birding app. I embarked on a full design process—from research to high-fidelity concepts—to explore ways to improve the app's overall experience. My goal was to create a user-friendly interface that inspires and supports new birders in their journey.

Date: Summer 2024​

The situation

​Williams is a leading energy company, but they knew their outdated internal software was hindering their growth and productivity. Recognizing the need for modernization, Williams partnered with my company, Publicis Sapient, for a multi-million dollar project to enhance their internal and client-facing applications.

 

Our team of designers, product managers, and engineers aimed to radically transform and reimagine their digital interface. The project resulted in a vastly improved user experience from top to bottom, which greatly improved usability, scalability, and performance. The success of this project not only streamlined operations but also led Williams to contract with us for significant follow-up work.

I was one of two UX designers on this project and worked closely with product managers and engineers on an Agile team. As the more senior designer, I partnered with the UX lead and played a pivotal role in shaping the overall design direction. My scope of activities included:

 

  • Leading client workshops to gather needs and collaborating with business users

  • Creating, iterating on, and presenting in-depth Figma prototypes for dozens of new feature concepts

  • Partnering with the client to design and implement a new comprehensive design system with numerous custom components

The current state

Williams manages natural gas pipelines and other infrastructure across the United States, and its employees and clients rely on proprietary business software to accomplish a variety of tasks. This software was initially created over 20 years ago and was noticeably out-of-date in its user interface and the underlying technology.

This project did not have a defined research phase, however, we used the first two sprints for auditing and discovery work. I worked with the design lead to audit the application, and I also spent over 20 hours shadowing users who walked me through a variety of their tasks ranging from daily gas transactions, monthly accounting operations, and administrative tasks like setting up new users and companies. Through these conversations with Williams employees who used the software, along with input from the product lead, the design team identified and prioritized the pain points and areas for improvement.

I took the lead on creating a detailed map of the current state, using a whiteboarding tool to document and annotate the main screens in the current interface and how they were related within the existing menu architecture. This grew into a diagram of over 400 pages across the entire application. This step was critical for realizing how the common tasks within the application were interrelated and helped me work with the design and product leads to sequence the redesign work in a strategic way.

Login screen of the Williams customer portal before the modernization effort

Problem

Questionnaire responses, shadowing, and interviews with users of Williams applications revealed significant opportunities for improvement. Challenges included:

  • Interface is very outdated and provides a subpar user experience

  • Legacy technology poses challenges in support, security, and user experience

  • Manual effort needed to perform business processes that should be partially or fully automated

2020-06-24 08.26.19 1.jpg
General process overview

The modernization began with the creation of a branded design system for Williams. This was part of the design team’s strategic effort to ensure a cohesive and consistent user experience across all aspects of the project. By focusing on the design system first, we established a foundation that would guide the development of every screen and feature that followed. This decision was pivotal, as the design system set the tone for the entire project and significantly impacted usability and brand adherence.

With the design system in place, we moved on to developing core components that could be reused across different screens, streamlining the design and development process. Emphasizing these core components allowed us to maintain consistency and efficiency throughout the project. As we progressed, our approach was not strictly linear; instead, we prioritized tackling the most impactful areas first. We began with the Customer Portal, addressing the more basic elements before delving into the larger program called PowerBuilder. This iterative process enabled us to revisit and refine elements from earlier stages as needed, ensuring that our solutions always represented the client’s vision and met their specific needs.

Project strategic plan.png
Process overview for feature redesign

Our team's process was adapted to the specific needs of the features we worked on, but the general style of work was highly collaborative and structured in two-week sprints, using the Agile methodology. The entire project was broken down by the product team into individual features. Therefore, a designer working on a given feature would follow the same general process outlined below.

The key to the success of this process was the relationships I had with a small number of Williams business stakeholders. These people represented different segments of the client’s user base, from pipeline operators to accountants, to IT and security managers. Because I spent time building rapport with these individuals, I could quickly get direct and honest feedback from them on my prototypes. These relationships were critical to my being able to deliver better and better feature concepts over time as I learned their priorities, preferences, and ways of working. Each feature still required thoughtful and sometimes numerous iterations to get approval, but having open communication with the client was crucial for the entire design team.

Diagram of the process our team developed and followed for feature development (design-led activities outlined in blue)

Something important to note is an intentional focus on high-fidelity prototyping over other lower-fidelity artifacts. This was a top-down decision from the account lead and design lead based on the preferences of the client, and the fact that this was a modernization of an existing application rather than the wholesale creation of a completely new application. There were some exceptions; when we created entirely new features they demanded much more attention to wireframes and exploratory designs. However, my emphasis as a designer day-to-day was mostly focused on crafting realistic prototypes to address the pain points and inefficiencies in the existing application so I could demo and iterate rapidly and collaboratively with the business stakeholders.

The thing that allowed me and my team to work quickly and with high fidelity was our early focus on creating the design system and further creating the commonly-used components that appeared across many screens so we could build prototypes quicker for each individual feature.

What I did

So, let's get into the actual work. As I covered earlier, our first task was creating a design system that would serve as the foundation for all future designs. Working with the client and the developers from our team, we chose a commercially available system (Kendo UI for Angular) as the base for the design system, which contains over 100 UI components in its library. The design team then customized the components to adhere to brand guidelines.

Excerpts from our branded design system that we created for the new GasKit application

One of the biggest issues with the current state of the application was a lack of consistency across different pages. To address this, and to make things more efficient for the engineering team, I designed a number of major elements that would get recycled throughout many screens and features. These were things like navigation elements, tables, line items, and multi-input “header” menus for querying sets of data. As a result, the designers and developers could save time by recycling these components instead of building ad-hoc instances each time they were needed, and users had a more consistent experience throughout the application.

Component examples.png

Application screen showing examples of frequently-used, repeatable components

A closer look

Using this new design system and the robust set of reusable screen elements, I was responsible for improving the user experience of the GasKit application while tackling the numerous pain points articulated by the Williams users I shadowed.

Through months of contributions on this project, I tackled dozens of features while partnering with Williams business stakeholders, internal product managers, and engineers. My role on the design team encompassed the larger and more complex features, such as Nominations and Security Admin Console, which included 8 flows and 83 total pages prototyped and 11 flows and 137 pages respectively.

New login screen with an improved layout, stronger branding, and more inviting imagery

Annotated new WFS login.png

The new designs went beyond simply updating the interface, although that was a major priority. We also added new functionality that users needed to better perform their daily tasks, such as a dashboard with widgets for quick reports and data visualization. A new system for displaying custom alerts was included, and search/filter operations were vastly improved for high-frequency accounting and pipeline management tasks.

Examples of screens using the updated page layouts and branded UI elements

Electronic bulletin board

This project also included updates to a public-facing site, referred to as an electronic bulletin board (EBB). The existing EBB for the Discovery pipeline was chosen as the initial target for updates. It was outdated and in need of a new home page as well as numerous technical upgrades on the back-end. 

I conducted a digital whiteboarding workshop with business stakeholders to gather and prioritize the features of an ideal future state. The design team used the workshop data to inform the redesign of the Discovery EBB.

Examples EBB before.png

The state of the EBB site before the redesign; note the lack of a home page which is just a stock image

The team used the same design system components as the internal app to bring a cohesive brand identity to the new EBB site. I worked to get approval from the business on new page layouts while adhering to strict industry guidelines and regulations. We brought new features to the home page like preview cards for important notices on the pipeline. The final designs were much more aligned to the Williams brand, and the first site will be used as a template for the other EBB sites to be updated in the future, ensuring a more consistent experience across all public-facing sites.

The new EBB includes important updates like a home page and improved contacts page

Examples EBB after.png

Results

Because of limitations in the project scope, I do not have detailed, quantitative user satisfaction scores that were directly measured for this modernization project. However, it was clear from the qualitative feedback I received that the upgrades to the aesthetics, usability, and back-end systems had a transformative impact on the perception of Williams and their GasKit software. All of the Williams reps I worked with for months on these features were excited about the changes I made. Another sign of the positive outcome was the fact that Williams hired us for significant follow-on work (which I was not involved in) to upgrade other aspects of their digital presence.

To the best of my ability, I have summarized some quantitative results below. These mainly take the form of increased efficiency in performing critical business tasks, which was one of the most essential metrics I hoped to improve.

Williams backsplash-1.png
50%

Reduction in time to approve new user requests

100+

New customized components in the branded design system

67%

Reduction in time to access critical reports using the new dashboard 

My key learnings

Relationships are key: I made a concerted effort to proactively engage with business stakeholders, fostering open and honest communication that established a foundation of trust. This rapport proved invaluable, as it facilitated smoother buy-in for design decisions and ensured that stakeholders felt heard and valued throughout the project.

 

Additionally, I learned the critical need for close collaboration with engineering from the outset. Initially, there were missteps due to a lack of early communication, but as the project progressed, I made it a priority to involve the engineers early in the design process. This proactive collaboration allowed us to identify and address potential issues before they became problematic, ultimately saving time and reducing the need for extensive rework.

Use fewer, more versatile components: I was meticulous about streamlining the components used across the application, particularly focusing on elements like data tables, which were prevalent throughout the GasKit app. Ensuring these components were flexible enough to function consistently in various contexts was crucial for user familiarity and predictable behavior. This approach not only enhanced user experience but also simplified implementation. Given the technical constraints of a web application, balancing complexity and performance was essential. By recycling components such as data tables and search/filter groups, we made it easier for the engineering team to develop features more efficiently, thereby accelerating the overall project timeline.

bottom of page