Strategic Mission Elements is a small engineering services company that was looking to redesign their website. They felt that their site was outdated and didn't engage with their target audiences, so my task was to elevate their brand and deepen their impact.
The two audiences SME wanted its website to reach were potential new hires and businesses who were interested in forming partnerships with them. When I reviewed their website, this intention wasn't immediately clear — there weren't enough actionable items for the user to follow through with. I mentioned this to the client, who agreed with my assessment and, luckily, was able to send over additional documents that I could pull information from. From these, I learned that there was so much SME did that they weren't advertising, and I resolved to showcase these capabilities more prominently in the redesign.
In order to make sure the visual style of the company matched its values, I ran through a branding exercise based on word association with the client, and we determined that they wanted SME to be perceived as trustworthy, knowledgeable, and innovative.
The client had also expressed some interest in keeping a similar style to some documents that they already had made, so, taking some design cues from their existing collateral and using the three brand words as an additional guideline, I presented three visual systems for the client to choose from (shown below). However, each option did involve the addition of orange and yellow to their color palette, to complement the blues and teals already present in their branding and to give the visuals more energy as a nod to their sense of innovation.
The client ultimately chose the first option, which highlighted their trustworthiness and was most similar to their existing material; they felt that showcasing their professionalism would be best, given their industry.
The single-page layout was limiting their content too much, so I expanded into multiple pages in order to showcase their services, products, and specific career opportunities. Since the new website was laying out so much more, new content, I felt that it was important to organize all of it into a low-fidelity wireframe first. I focused on including action-oriented language, as well as many call-to-actions.
I worked in Sketch, and, because their website would be relatively static, I prototyped in Marvel. With feedback and additional content, I was able to iterate into a high-fidelity wireframe and apply the branding that would pull it all together visually.
Each of the images below link to their respective prototypes.
Other skills I practiced during the development of this website were using CSS Grid to maintain a 12-column layout and using git for version control. The site is also fully responsive.