TxGIO Navigaton Design
Balancing Collaboration and Autonomy during a Logo Launch
Overview
As part of TxGIO's rebranding efforts, I was tasked with integrating a new logo and branding elements into TxGIO's navigation bar. I used a combination of product management and UI development to lead collaborative efforts among design, development, and marketing. This included expanding the project scope to include enhancements to the hero section, resulting in a visually aesthetic and functionally optimized landing page and navigation bar to support TxGIO's public logo launch.
Role
Timeline
2 weeks
Team
Product Manager (me), UX Designer (me), Marketing Strategist, Front-end Developer, Application Developer
Methods
Release planning, product backlog, prototyping, UI development
Product Management
Improving the Design/Dev Workflow
As the first designer at TxGIO, a significant challenge I've tackled throughout every project is establishing more efficient workflows between the marketing, design, and development teams. While the company does have a high-level project manager that oversees major initiatives, the absence of project management for smaller projects (like this one) highlighted a major need for dedicated workspaces and streamlined communication channels to support cross-team collaboration. I've worked with the development team over time, using project documentation and retrospectives to collect data points and identify bottlenecks in current workflows.
Building a Collaborative Workspace
Recognizing the need for a dedicated workspace to support cross-team collaboration, I took the initiative to set up a workspace using Microsoft Loops - a product already available to the team through the agency's Microsoft 365 subscription. Creating the workspace involved establishing a backlog and encouraging team members to contribute to a shared task board, allowing visibility into the team's task dependencies, workloads, and timelines. The workspace also served as a repository for project-related documentation, which included the project overview, goals, and needs, as well as design files, content assets, and a working list of team questions and answers.
Balancing UX Advocacy and Developer Autonomy
Over time, I put the puzzle pieces together - because there was no designer before me, a lot of TxGIO's developers have also been wearing many hats, usually overseeing an entire application as its product owner, designer, and developer. Navigating the dynamics between offering a design perspective and still empowering developers to maintain autonomy was complex.
Transparent communication and collaboration enabled a balance where I could advocate for UX enhancements and still empower developers to make their own design decisions for their product. I utilized my knowledge in front-end development to make design annotations developer-ready and eliminated as much decision-making as possible on their end by providing user-friendly, visually appealing options. This approach streamlined the project workflow while fostering a collaborative environment.
UI Development
Creating Design Options
I gave two design options to the Datahub developer for the navigation bar. Option 1 used the same blue/white color scheme as the current designs, with the small change that the blue color was switched to a new blue in the brand palette, improving the graphic elements on the page to be AA accessible and sticking to brand guidelines.
Option 2 changed the style of the hub by switching to a white navigation and switching the DataHub logo font color. This option was a bit more of a change, but also more on brand with the full color logo. The old blue color would be switched out with the new, accessible blue in both options. Option 2 was chosen by the Datahub developer as the final design, with UX advocacy and developer autonomy working together to make meaningful changes.
Making an Accessible Hero Block
A new hero block wasn't necessary for the logo launch, but the current one was inaccessible and visually unappealing. The header "TNRIS is now TxGIO" looked like an afterthought, and the entire landing page didn't speak to the modern, clean logo that the was being announced.
I was careful not to dive into a redesign of the entire page since it was out of scope, but I used new branding guidelines and inaccessibility as key drivers for updating the hero block. I created an overlay that would make any background photo contrast accessible and picked an image on brand. I moved the header into the hero block so that the page content is clear and screen readable, and updated the second header to use brand colors.
Using Interactive Prototypes for Annotations
The changes for the website were a little more extensive, so I created an interactive prototype using CSS annotations and page highlighting to explain each section in detail. I broke the annotations up into click-through sections to make the information more digestable for the web developer.
Interactive Prototype
(no really, it's interactive. click it!)
Next Steps
The logo launch was the first step of the agency rebrand and a complete website redesign project is about to kickoff. While this small project tackled the rebrand of the navigation bar, the site architecture and navigation menu need some TLC and should be some of the first things addressed before building out new pages in the website redesign.
Lessons Learned
Design is subjective. And not just in the art sense. "Design" means something different at every company, and learning how to work with your team and what their needs are can help streamline workflows and create a better experience for everyone. This project was so fun to work on because it was a true team effort, and having an easy way to collaborate and communicate with each other can make a huge difference.
