.png)
.png)
.png)
.png)
Web Design · UX/UI · Front-end Development · Photography · Copy-Writing
Whom are you looking for?
Role:
User research, competitive analysis, user journey, high fidelity design, prototyping, interactions, testing
Collaborated on a bootcamp live project to create a new website for Utility Construction, including wire-framing, prototyping, and coding the portfolio page as well as designing a new logo. This live project was designed to simulate a real working environment as closely as possible, using the Agile project management methodology and the Scrum framework. There were two week-long sprints, each with daily standups, assigned deliverables, and a retrospective. The first week focused on design, and the second on development.
Utility Construction needed a fresh, modern redesign for their website and branding which drew attention to their dual specialties: architecture and construction.
Competitor research suggested that a sleek, bright design that was traditional enough to be trustworthy but bold enough to be distinctive, could help Utility Construction attract more business.
A clean layout with a large banner image, a responsive portfolio image grid, and the visual motif of a triangular overlay used with the dropdown menu, a fixed CTA button, headings, and image captions.
The completed stories and deliverables exceeded requirements and received positive feedback.
I needed to create a logo and a portfolio page for the company Utility Construction. Another student was assigned the task of creating the home page. We were informed that the live project sometimes used real “clients” and sometimes not, but that we wouldn’t be told either way. From here on out, I’ll speak about them as if they were real.
Utility Construction specializes in designing and constructing sleek, attractive commercial buildings and structures, and wanted a modern-looking site design to match. We were provided with a specific color palette and photos to use. You can see the code here.
Utility Construction works with both governmental and private clients. For public projects, cost is generally the primary factor for decision makers looking for a construction company, and contracts are generally awarded to the lowest bidder who meets all bid specifications and legal requirements.
However, Utility Construction also hopes to woo clients with more substantial budgets who are more concerned with the benefit-cost ratio than cost alone.
An analysis of competitor websites revealed a mix of designs that generally fell into one of two categories: simple and modern or dated and cluttered. Most (but not all) appeared to be using a similar basic template.
Unsurprisingly, trust is absolutely paramount in contracting construction, so it wouldn't be beneficial to attempt to reinvent the wheel here, but a striking design could catch the attention of a decision maker who is looking for the kind of modern aesthetic that Utility Construction offers. The optimal solution would find the right balance between tradition and innovation.
The target audience for this website would be someone like Jacob, a 48-year-old business owner who needs who needs a construction contractor. He's an extremely busy person, but as the project owner and sponsor, Jacob will have a lot at stake, and will certainly do his research before choosing. Of course, there are going to be specific parameters that need to be met, but for people like Jacob, who found success at a young age through innovation and initiative rather than playing it safe, a bold creative vision is crucial.
I came up with several variants of the logo for the client to choose from. The first logo takes advantage of the almost symmetrical nature of the word “utility,” shaping the two Ts as construction cranes holding the U and the Y. Taking inspiration from Utility Construction’s original focus on lighting, the second variant subtly suggests an office building with windows that light up to spell out UC. The third option is a minimal and conservative monogram with interlocking letters. The client eventually chose the fourth logo, which uses a U and C to create a crane hook, although the final design differs slightly from the one below.
I used two distinctive layout choices here, and both were inspired by the logo. The first is a triangular translucent overlay on the top left corner of each photo, behind the fixed CTA button on the bottom right, and behind the text in the dropdown menu. The angle aligns with the stripes on the U of the logo, and makes a bold statement that Utility Construction is unique.
The second involves the placement of the logo itself, with its hook aligned exactly with the bottom edge of the header, implying that it is physically supporting the navbar, and in a larger sense, always at work, just like Utility Construction.
Apart from that, I decided to keep things minimal and classic for the most part, using a clean, white background, a bold hero image and a grid layout for the portfolio thumbnails. You can view the mobile prototype and the desktop prototype: to clarify again, I was responsible for designing the portfolio page, while another student was tasked with creating the home page.
The image gallery and the triangle element was more complicated to implement than I originally hoped they would be.
As mentioned earlier, I needed to make some adjustments to the logo. User feedback indicated that the "U" would be more effective without the color I originally added between the two upward strokes, and the color of the text needed to be swapped for another to be more legible.
You made it to the bottom of this page! I think that's a sign that we should chat.
Questions? Comments? Advice? Unless you're a bot that wants to trick me into sending you money, I'd love to hear from you.
Click the button below to write me or leave me a voicemail.
To see more of my work, please check out my photography portfolio and a few additional coding projects.
Let’s connect
