FIVE STAR ENERGY SERVICES

UI DESIGN PROJECT

I was contracted by an underground utility and construction start-up called Five Star Energy Services in 2020 to design and build a public-facing website. The company had only existed for a few months at that point, but because of rapid growth in even its first quarter, it was soon determined that an online presence was necessary to showcase their vast services to any party reviewing a bid placement and wanting to know more about the company.

In short, I was handed a folder with a couple logo variations, a brief list of requirements, and was instructed to make something happen. Not my favorite approach—I tend to like workshopping a bit more and asking questions to get it as close to perfect as possible on the first go—but the client was not very particular on the nuances, nor did they have an abundance of time to work through the typical design process I’ve established for myself. The most important things they noted I needed to translate into the design were as follows:

  • A cohesive brand identity in line with the logos provided (which I did not create)

  • A message emphasizing the importance of safety as a cultural cornerstone of the company

  • A page listing the multiple services the company officially provides, which would indicate to potential customers what the company had expertise in and could do in a safe and efficient manner

  • A listing of strategic business partnerships

  • A section to show open careers for prospective employees and contractors (traditionally done through word of mouth or provided by the union)

  • A search function

Following industry best-practices to the best of my ability given the limited information I was provided, I created the below mockups. You can also review a live version of non-prototyped mockups here.

I’ll admit a weakness of mine (that I’m constantly striving to improve on) is my attention to beautiful aesthetics. I’m traditionally more of a function-over-form kind of guy, so it was a challenge to keep everything looking slick. I found a couple fun ways to integrate the brand into the design, such as the carousel position indicators being five stars (see what I did there?), using stock images to match and enhance the brand colors, and more subtle differences in page sections to keep things both eye-catching and minimalistic while still providing clear visual indicators of the various sections within the website.

Information architecture and clear navigation has always been important to me and, for a while, has been my bread-and-butter. I wanted the navigation to be impossible to misunderstand both in mobile and desktop, so I used simplistic/familiar conventions such as hamburger menus, page titles, section overviews on the home page, and anchor-linking to keep things as straightforward and orienting as possible.

Mobile-first design is how I was trained and has an important place here with this project. With a deep understanding of HTML/CSS/Flexbox, I alternated between the desktop and mobile mockups to ensure all elements would translate correctly between the two. Things such as horizontal scrolling carousels in the mobile version were the best and most space-efficient ways to get much of the “less important” information, such as leadership statements and partner logos, to make way for “more important” information, such as the company’s overall mission statement.

Finally, because the company was so young at the time and growing so quickly, I wanted to build the design for growth and additions without breaking the base layout/template. The Services page, for example, is designed to have a top-down approach with repeating component sections so that if the company expanded into another subfield, it could very easily be added to the list rather than needing to rebuild the page to accommodate the new information.

I am proud of these designs. However, things don’t always work out, and after not hearing any feedback or plans from the business to move forward with the actual site build, it became apparent that it wasn’t a priority for the business at that time. Fast forward a couple months and I had discovered that they contracted elsewhere to get a live site up and running. I was surprised to see that the production site contained a lot of the same design principles and elements I had originally posed to the team, so all was not for naught.