Leveraging the insights gained during the exploration phase, I set out to complete the copywriting content for all the pages. The website's main purpose was to sell and to inform so I began by first focusing on identifying where to place the Calls to Action (CTAs). Once I had that mapped out, I took all the information I had about the company and products' unique features and advantages, and filled it in the relevant areas.

The copy aimed to connect with users on both functional and emotional levels, highlighting energy savings, durability, and aesthetic appeal.

This text content goes in the hero section of the home page, serving as the user's initial point of engagement upon entering the website. It emphasizes the innovative nature of the product, and then immediately highlights two key metrics the typical customer would expect to know.

During the discovery phase, I learned about the importance of highlighting specific brand attributes. This content gives the user a great primer about the company's core values and promises to their customers.

This text content was given to me by the client, but it was all combined in one giant paragraph, making it disinteresting and flat. I decided to create three separate sections, which communicated the feature attibutes in a much clearer way and just had better visual appeal.

The client had hired a designer before me, and gave me their file so I could edit the text content directly in the file. (Just copywriting was the original scope of this project.) Once I started working in this file however, I noticed that the previous designer did not use Figma in all its functional ways, there was no Auto Layout or even frames used. Working in this design file was extremely frustrating, and in the end the design was not responsive at all.

As someone with experience in creating design systems in Figma and in Web Development, I communicated to the client that I believed they would benefit greatly if I took the designs and remade them to fit a design system. After a bit of back and forth, they accepted and I began work on creating this design system based on the webpages provided.

Building upon the wireframes, I developed a responsive design system that included standardized aspects of the design: a consistent color palette inspired by energy-efficient lighting, typography choices that conveyed professionalism and modernity, and imagery that showcased the aspirational benefits of the product. Creating the design system and documentation made development very seamless and opened up opportunities for efficient content creation in the future.

Atoms phase of the design system

I delivered a responsive design system that made it so much easier to adapt to various devices and screen sizes.