top of page
Foil World
UX/UI Design
I was the main designer creating the updated version of Foil World's website. In this I created wireframes, mockups on Figma, and implemented final designs on Wordpress. I worked with another designer to help implement my designs, and held weekly virtual meetings to present my progress to him. I hosted a final presentation of Phase 1 of this project to the owner. This project is still in progress for Phase 2 and 3.
Figma Mockups Overview
Because there are many elements to this site, and it is still in progress, we decided to divide it up into multiple phases. For Phase 1, the focus was on the Reviews tab in the main menu on the very right.
The purpose of this Reviews tab is to be a catch-all for every YouTube review done on different brands and each different type of foil board.
The first steps was choosing the color palette, which I continued working with the colors of the existing logo that they had. Next was font choices which I search for and downloaded into WordPress from different sites.
Choosing a catch phrase and font inspiration
Reviews tab which displays different brands when hovered over
Images are a automatically rotating slideshow of photos taken by Foil World
Header Ideas
While working on the Reviews tab, one of the main focuses was creating and deciding on a header for each type of foil model. These were the 3 mockups with just a few adjustments on each.
There was just one big problem we came across. Because of the variety and amount of foils, we needed to find a better way to organize this all...
To solve this problem I decided to implement a secondary menu that does not disappear. This way, users can click through different types of foils without having to revisit the home page, go through the reviews tab, and select the brand all over again.
This was a simple shortcut that made the site more effective when navigating through different models.
When hovered over the secondary menu, we designed it to drop down and show the different foil model specifications.
Because the secondary menu is remaining on the page at all times, once clicked on a specific model, only the bottom half of the page would change displaying all of the statistics and reviews for it.
Implementing designs on WordPress. . .
After many meetings, we finalized designs and began the process of mimicking our designs onto WordPress. I learned that designing through WordPress had many unexpected limitations in terms of the placement and function of elements I had hoped to incorporate from my Figma mockups. Though we were not able to fully mirror the mockups, we came relatively close overall.
Hero image with logo stays on the page with a second menu displaying types of foils.
Landing page is still in progress, but will contain short description of Armstrong foils
Hover interactions are shown for the secondary menu
After scrolling down, user will see the selected foil and a short description
Now, users are able to scroll through review videos of their selected foil
The secondary menu allows the users to quickly change between different models within the brand
A wrap on Phase 1, and next steps...
After presenting my final designs for Phase 1 which contained strictly redesigning the reviews feature, Phase 2 comes after. Phase 2 will contain restructuring the home page to get viewers interested and excited to explore the site.
Through this project, I learned how to present and advocate for my designs, as well as how to use many other tools in Figma, and starting from scratch with WordPress. I plan to carry what I've learned into my school projects and future work.
bottom of page