EllePower Website - Capstone

After initially meeting with the client to discuss the project and align the website design goals with her existing branding, content, and design preferences, I was able to leverage my previous background in web design to lead the development of a strong UX design in Figma. I developed a brand guide reference that established fonts, colors, and spacing, created custom design elements like vines, watercolor backgrounds, and edited client photos, and worked with Edale to iteratively improve the design in Figma by integrating weekly feedback from the client.

Once the design was approved, we began working on implementing the pages using the client's business and CMS platform, Systeme.IO. One challenge we ran into was that the website builder is a drag and drop block based tool, which limited our control over HTML elements and CSS styles. We chose to prioritize the client's ability to update content using the platform without understanding code over strictly adhering to the original design in Figma, while keeping it as close as possible.

To achieve this, we created and saved custom reusable blocks, allowing the client to easily recreate content, including menus, headers, and gradient text boxes. We could also save whole pages as blocks, so if a breaking change was made, it would be easy to restore the original page. We also created blocks specially designed for smaller devices, setting each page to show either desktop or mobile blocks depending on the user's screen size.

For important features that couldn't be implemented using blocks, we added custom HTML, CSS, and JavaScript code, for example, swapping out images in the hero based on screen size to prevent overlapping text and image issues in the native editor, and highlighting the Coaching CTA link with specific CSS styling. However, we limited these custom features and created reusable blocks containing the code when possible so the client could easily add them as needed to future pages.

Despite the challenges, we were able to implement our design and create the pages in Systeme.IO, including Home, About, Contact, Podcast, Testimonials, Resources, and What Is IPV. This project taught us a lot about communicating with clients, the benefits of iterative design and development with frequent feedback, collaborating while keeping the website design consistent, managing projects and large task lists, following web accessibility requirements, and working with client friendly CMS systems rather than writing code.

You can check out the website at www.ellepower.ca/us, but do note our client still has more content to add as she prepares to launch EllePower. I really enjoyed getting to work directly with a client and contribute to a project with such a positive impact, and I can’t wait to watch EllePower launch and make a difference in the world.

Thanks for checking out my project!