Productivity Bootcamp, established in 2015, trains young Australians in construction industry skills through hands-on activities.

The program emphasizes practical skills, strong work ethics, and safety standards, aiming to build a motivated and productive workforce. Participants gain the confidence and tools needed for success in their careers.

For the Productivity Bootcamp website redesign project, my role as a UI designer involved creating a high-fidelity prototype in Figma to enhance the site’s overall usability and appeal.

The existing website had issues with navigation, outdated design, and lacked clear, concise information about the training programs. This hindered user engagement and failed to effectively communicate the benefits of this 8 weeks tradie bootcamp.

The primary goal was to redesign the website to create a modern, user-friendly interface that improves navigation, visual appeal, and clarity of information, providing a seamless and informative experience for potential users (young people, parents, schools and sponsors). 

The challenge

One of the main challenges was reorganizing the existing content to ensure clarity and accessibility. The original website’s information was scattered and hard to navigate, making it difficult for visitors to quickly find what they were looking for. Streamlining the content required careful planning to present the training programs and their benefits in a clear, concise manner.

Improving the user experience (UX) was another significant challenge. The previous design had cumbersome navigation, which often led to user frustration and high bounce rates. Redesigning the navigation structure to be intuitive and user-friendly involved thorough user research, wireframing, and iterative testing to ensure a seamless browsing experience.

Maintaining visual appeal while ensuring brand consistency was essential. The old design lacked modern aesthetics and failed to reflect the dynamic, professional nature of Productivity Bootcamp. The challenge was to create a visually engaging design that stayed true to the brand’s identity, incorporating contemporary design elements without overwhelming the users. This required a balanced approach to layout, color schemes, typography, and imagery.

Initial Artefacts

Small sample of benchmarking and competition research (Figma)
User flows maps (Figma)

This is a small sample in the design of the wireframes for PB. Scroll over the image to review the prototype. However, the client made modifications in certain pages and forms.

Research and Planning

The prototype process began with comprehensive research with stake holders, then planning a site map. This involved gathering user feedback, analyzing the existing website’s shortcomings, and defining user personas. The insights gained were used to create user stories and map out user flows, ensuring the redesign would meet user needs and expectations.

Designing

Next, wireframes were created to establish the basic structure and layout of the site. These low-fidelity sketches allowed for quick iteration and feedback. Once the wireframes were approved, high-fidelity designs were developed in Figma, incorporating the new UI guidelines, modern aesthetics, and brand consistency.

It is imperative to keep in mind that consistency in web design is not possible without a Brand Manual. All web designs must follow the Manual to ensure offering more than just a product; there should be a positive impact on business efficiency and profitability.

Final product

The redesigned Productivity Bootcamp website features a modern, user-friendly interface that effectively showcases the program’s offerings. The new design includes an intuitive navigation structure, making it easy for users to find information about the training programs, their benefits, and enrollment details. Visually, the site uses contemporary design elements, ensuring brand consistency while enhancing appeal. Clear, concise content presentation and strategically placed calls-to-action improve user engagement. Overall, the redesign delivers a seamless, informative, and visually appealing experience for visitors.

The client’s constructive feedback on the look and functionality of the online store led to a successful creation of a layout that maximised user-friendly access. This design is highly distinctive from the preceding design created with the WIX system.

Significant focus was placed on the incorporation of social media links. Their placement in various locations offers direct access to Sunflower’s various social networks.

Considerable focus was given to the utilization of a (Buy it Now) button, offering the user the convenience of having an immediate route to payment.