While working at 3STEP Sports I was asked to redesign the companies website to better represent the brand and our message. As a team we decided to present our media and athletes first, so throughout the website athletes are represented and there is a focus on our media arm.
Overview
As the UI & UX designer, my role was to take the sitemap and setup wireframes. After, I created high fidelity designs with those wireframes.
3STEP wanted to better represent their athletes and the media portion of the company. Our job was to better represent both. We did this by showcasing athletes throughout in photos, videos, the 9 sports, and our socials. Which can be seen throughout the website. For media, added a tab to the main navigation to lead people towards that page, while also having elements on certain pages that would also lead to the media page, like on the homepage.
Redesign Challenges
Since 3STEP had never revamped their website before, there was many pages to readjust and many to create new. I ended up making over 30 screens both mobile and desktop to best represent the direction we were heading.
The main challenge was taking a lot of the old copy and repurposing it on the new site, while cutting out older copy that was no longer relevant to the company.
Overall Solution
Leveraging my skills, I initiated the creation of a clean design, responsive pages, and standardized pages, while creating a consistent visual style. I developed wireframes for landing pages, sports, about, media, and more, ensuring a cohesive design throughout.
As mentioned above, we added more photos and videos to represent our athletes, while also including our socials to show off all of our sports. For media we had jump links, and a whole page dedicated to it that the original site did not have.
Process
We have a specific process for our web redesign projects, so the following steps are standard across every website we touch as a team. I am involved heavily on the beginning of the project to setup the framework and design for the rest of the project.
Figma File & Components
Since I had to create 30+ screens for this project for both mobile and desktop I used components to speed up this process and make it overall easier for me and the developer. Many of the cards could be reused on the site, for example the social block is on almost every page.
Low Fidelity Wireframes
I then put together wireframe options. I focused on simplicity, opting to focus on card elements since thats what we decided the overall design would follow as well. As mentioned above, the main goal was to represent media and the athlete. So a lot of my designs featured photos, and locations for our media to be represented.
For example, having jump links down to the media sections on the Our Services page helps direct people right to the media portion of our company.
Visual Design
After stakeholder reviews, I created high-fidelity designs and worked on branding elements based on the final version of the wireframe.
I began with visual branding for all the screens. I used consistent font, type, size, and color. I also incorporated balance, proximity, alignment, hierarchy, repetition, and contrast.
I got feedback on my designs and ideated, then used Figma's auto layout and created a component library for all components.
Development
At this step, I hand off the finished high fidelity wireframes to the dev and assist when needed to create assets, and answer layout questions. Once the dev is complete we review the design a final time with the stakeholders and make changes if needed.
Results
With our teams efforts, 3STEP got a new revamped website that aligns better with the brand and the messaging we are trying to put out. The traffic to the site also improved once we released the new website, since it was easier to navigate and gave people more of a reason to visit the site to learn more about 3STEP.
My Impact
This case study shows my ability to lead the UX portion of the project by showcasing content-focused transformations, while creating high fidelity designs during the UI phase. I was able to showcase my skills in content design, user experience, and collaboration with the other members of my team throughout the process.
3STEP also has received many more web visits since the redesign. My thoughtful ideas of how to layout the pages in a common sense way helped create more community-engagement.
