Crosstown Fiber: Web Design
Crosstown Fiber, Chicago’s specialists in fiber optic infrastructure, needed a refresh to their outdated website.
The client had the goal of making it easier for customers to access key information about the different industries they serve. I worked to design a site layout that was intuitive, accessible, and represented their brand in an updated, creative way.
COMPANY
MY ROLE
UX Designer, Web Designer
TEAM
1 Account Manager
1 UX Designer / Web Designer
1 Developer
PROJECT TYPE
Web
YEAR
2024
The Design Process
Website Information Architecture (IA)
To create a better user experience for the website, I worked together with the account manager overseeing the project to establish the new information architecture for the Crosstown Fiber website.
The goal was to make it easier for Crosstown Fiber’s customers to access information about the industries they serve— fintech, carriers, data centers, education, healthcare, and municipalities & government. Previously, this information was not even provided publicly on their site, which put them at a huge disadvantage in comparison to their competitors.
The updated sitemap above shows how on the new website users can easily access key pages and find the relevant information they are looking for.
Interactive Prototype: Low-Fidelity
To help envision the new site layout and design, I drafted a low-fidelity prototype in Figma to show my team and the client the design direction I wanted to take. For my initial design session, the client informed me that they wanted their site to be simple, accessible, and have a lot of geometric elements. I made sure to keep these desires in mind while I was drafting.
Below are the initial designs for the home page and the base template for the individual industries served pages. These page designs were important to establish early on in the process as the remaining site pages would reflect the major design choices that the client liked from these.
Home
Industries Served: Fintech
Client Feedback
After reviewing my initial designs, the client & account manager provided helpful feedback regarding changes they wanted to see moving forward. Their three most important key takeaways were:
Simplify the “Industries We Serve” section of the home page to remove repetitive content.
Remove any unnecessary call-outs for company statistics, seeing as the client did not have any relevant content they wanted to include there.
Condense the about page so that the descriptions for the leadership team and advisory board were easier to read and less overwhelming.
Crosstown Fiber Branding
While iterating and bringing my designs from low to high fidelity, it was important to keep in mind Crosstown Fiber’s brand guidelines including their iconography, typography, logos, and colors.
HEX #F3640F
HEX #272466
HEX #000000
HEX #999999
HEX #D2D2D2
HEX #F8F8F8
Interactive Prototype: High-Fidelity
By combining the feedback I received as well as elements of Crosstown Fiber’s branding and style guide, I was able to create a high-fidelity prototype that addressed all of the client’s design concerns while satisfying their stylistic requirements.
Home
About
The Outcome
From the design to development process, there were some adjustments that needed to be made based on the final version of the site that I submitted to the client for approval. By communicating with the account manager, we were able to finalize and get approval for the official images that would live on the site.
Throughout the remainder of the development phase, the project’s developer and I collaborated to make any necessary design changes to the website’s design. Through doing this, we were able to ensure that the website was functional while still achieving the design elements that the client really enjoyed.