CTEWorkforce

Endorsed by organizations including the U.S. Department of Labor, Virginia's Commonwealth Cyber Initiative, and the U.S. Army, CTEWorkforce was established to address the growing demand for skilled cybersecurity professionals through specialized training and workforce development.

Company Website Redesign

Project:CTEWorkforce's primary website (cteworkforce.com)

Timeline:

Redesign 1: June–September 2022
Redesign 2: June–September 2023

Team: Me (Digital Interface Designer)

Tools: GoDaddy, Wordpress, Google Workspace

Key Objective

Redesign the company's primary website, cteworkforce.com

Significant Outcome

2 redesigns were undertaken within two years, each resulting in an increase in new visitors by at least 10% in the first month.

Competitive Analysis — Comparing Ten Competitors' Websites

Before redesigning CivilianCyber's website, I compared ten competitors' websites, evaluating their hero sections, visual elements, purpose, target audiences, calls to action, navigation, and homepage layouts to understand how they marketed their job training programs.

Civilian Cyber Audit Summary

Design Proposal — Proposing Navs and Home Pages

After concluding the audit and analysis, I began to develop my design proposal. Despite the Chief Digital Officer having proposed their version of layouts and sitemaps, I also developed my own low-fidelity wireframes and sitemaps to provide alternative suggestions. After presenting multiple suggestions, my proposals were preferred and approved.

1st Redesign — Updating the Original GoDaddy Website

Since the original website was hosted on GoDaddy, we completed the first redesign there for convenience. Throughout the process, I created several layout variations to review with the company and gather feedback. After multiple revisions, the redesigned website was published and received positive feedback.

2nd Redesign — Transitioning to WordPress

A year later, the company wanted to expand its content and improve the website's visuals. Due to GoDaddy's design limitations, we decided to transition to WordPress for greater flexibility. Although I had no prior WordPress experience, the transition gave me an opportunity to learn the platform and apply my basic coding skills.

Final Product — Before & After the Redesigns

Below is a comparison of the website across its different redesign stages. Throughout these updates, the website continued to attract new visitors, with traffic steadily increasing.

Demo Website Design for Clients

Project:Demo website for YourCareerCounselor

Timeline: September 2023 - October 2023

Team: Me (Digital Interface Designer), 2 Developers

Tools: Figma, Framer, Moodle

Key Objective

Designed an interactive demo website for CTEWorkforce's YourCareerCounselor workforce development platform, showcasing its proposed interface and functionality to prospective clients.

Significant Outcome

The demo video helped attract multiple prospective clients within one month of its presentation.

Step 1 — Translating PowerPoint Mockups into Figma Wireframes

After receiving the executives' initial PowerPoint mockups, I began creating high-fidelity wireframes in Figma using a placeholder company, Bob's Widgets. During this process, I collaborated with the web developers to establish our approach, select the tools we would use, and explore Moodle's UI capabilities and technical limitations.

Step 2 — Introducing Framer for Interactive Prototyping

After completing the Figma wireframes and prototype, the executives wanted a more realistic and interactive version. I proposed using Framer instead of rebuilding the designs on a platform like WordPress. This allowed us to transfer the Figma designs directly into Framer, saving time. I then linked the interactive elements and prepared the demo website for publishing.

Step 3 — Rebuilding the Website in Moodle

While the Framer demo website was being developed and published, the web developers began rebuilding it in Moodle as a test run for the final product. Throughout this process, I provided additional design recommendations to help guide the implementation and maintain consistency with the original design.

Final Presentation & Future Development

Using the Framer demo website, I edited a video recorded by our team to showcase its features and functionality. The video was then presented to prospective clients to demonstrate the platform and generate interest. The next phase involved developing the final product in Moodle, incorporating each client's specific requirements.

Redesign with CSS

Project:Website for YourCareerCounselor.com

Timeline: November 2022 - December 2022

Team: Me (Digital Interface Designer)

Tools: Moodle

Key Objective

Enhance the visual design and user experience of YourCareerCounselor.com through CSS and PHP customization, creating a more polished, intuitive, and engaging website.

Significant Outcome

At least 500 mentors and mentees used the website to access courses in 2023.

Redesign Process — Color: #HELPM3; 😱

When I was first assigned this project, I felt intimidated by my limited knowledge of coding and Moodle. To overcome this learning curve, I immersed myself in Moodle tutorials and used my basic HTML and CSS skills to inspect the code. I started with simple changes to fonts and colors before moving on to redesigning UI elements and creating new designs.

Final Product and Reflection — Color: #BADA55; 😎

Following the redesign, the project was handed off to a web developer for further coding and implementation. The website went on to serve students and mentors in the YourCareerCounselor program. Its appearance has since changed following another redesign in September 2023. This experience helped me overcome my initial concerns and build confidence in my abilities. I also gained hands-on experience with PHP, Moodle, Cyberduck, and Visual Studio Code.