Site Gen Theme Design

Site Gen Theme Design

Designed a responsive theme for for a site generator that is dedicated for students and professor to utilize as their own personal website.

Project Overview

Site Gen Theme Design

Tasked to design a clean, modern, and responsive theme for Never Ending Solutions Site Generator that can be used to create personal websites for students and professors.

Tasked to design a clean, modern, and responsive theme for Never Ending Solutions Site Generator that can be used to create personal websites for students and professors.

Timeline
Timeline

Jan 2024 - Feb 2025

Jan 2024 - Feb 2025

Team Members

Team Members

Manuela Mensah

Manuela Mensah

Role

Role

UI/UX Designer

User Experience Researcher

UI/UX Designer

User Experience Researcher

Tools

Tools

Figma

Figma

Project Overview

Understanding the task:

For this assignment I focused on designing a visually appealing and easy-to-use theme to create a professional personal website. We wanted the site to be simple and easy to use ensuring users don't have any issues or problems when understanding its functionality.

For this assignment I focused on designing a visually appealing and easy-to-use theme to create a professional personal website. We wanted the site to be simple and easy to use ensuring users don't have any issues or problems when understanding its functionality.

Research

Main Focus & Criteria

I focused on figuring out the most important sections to include for the personal website. As students and faculty would be able to use this site, I looked for inspiration and focused on the key elements users added to their sites.

I focused on figuring out the most important sections to include for the personal website. As students and faculty would be able to use this site, I looked for inspiration and focused on the key elements users added to their sites.

Layout:

  • Hero section — Large header image and a brief bio.

  • About section — detailed bio with a headshot.

  • Contact section


Typography:

  • Clear and readable font. 

  • Bold and distinctive font for headings.


Color Palette:

  • Visually appealing and professional Color Palette

  • Limited number of colors to maintain a clean and consistent look.

Layout:

  • Hero section — Large header image and a brief bio.

  • About section — detailed bio with a headshot.

  • Contact section


Typography:

  • Clear and readable font. 

  • Bold and distinctive font for headings.


Color Palette:

  • Visually appealing and professional Color Palette

  • Limited number of colors to maintain a clean and consistent look.

Responsiveness:

  • Ensure the theme is responsive and looks great on all devices, from desktop to mobile


Customization Options:

  • Provide basic customization options

    • Ex: Color schemes and font choices.


Accessibility:

  • Design the theme to be accessible to users with disabilities.


Performance: 

  • Optimize the theme for performance to ensure fast loading times.


SEO: 

  • Consider SEO best practices when designing the theme.

  • Search engine optimization

Responsiveness:

  • Ensure the theme is responsive and looks great on all devices, from desktop to mobile


Customization Options:

  • Provide basic customization options

    • Ex: Color schemes and font choices.


Accessibility:

  • Design the theme to be accessible to users with disabilities.


Performance: 

  • Optimize the theme for performance to ensure fast loading times.


SEO: 

  • Consider SEO best practices when designing the theme.

  • Search engine optimization

Responsiveness:

  • Ensure the theme is responsive and looks great on all devices, from desktop to mobile


Customization Options:

  • Provide basic customization options

    • Ex: Color schemes and font choices.


Accessibility:

  • Design the theme to be accessible to users with disabilities.


Performance: 

  • Optimize the theme for performance to ensure fast loading times.


SEO: 

  • Consider SEO best practices when designing the theme.

  • Search engine optimization

Research

Grayscale Iterations I

After researching existing designs and analyzing user preferences, I created multiple grayscale iterations, consistently seeking feedback from the team to refine the designs.


With a clear vision in mind from my research, I explored various design possibilities based on what users had previously engaged with. We ultimately decided to focus on a one-page layout, as the free design would offer a more seamless experience for users who prefer all their content in a single, easily accessible space.

After researching existing designs and analyzing user preferences, I created multiple grayscale iterations, consistently seeking feedback from the team to refine the designs.


With a clear vision in mind from my research, I explored various design possibilities based on what users had previously engaged with. We ultimately decided to focus on a one-page layout, as the free design would offer a more seamless experience for users who prefer all their content in a single, easily accessible space.

Certain iterations weren't chosen because it didn't display enough information when turned into a hi-fidelity design and we wanted the theme design to be simple and efficient for users.

Designing a mobile application, Fundify. An easily accessible application that focuses on monitoring students' finances which includes income and expenses.

Designing a mobile application, Fundify. An easily accessible application that focuses on monitoring students' finances which includes income and expenses.

Design Process

Finalized Grayscale Iteration

I created the finalized iteration based on feedback from potential users and the team. This iteration showcased the intended look and feel for the Site Generator. I focused on ensuring it highlighted the necessary information that would be helpful for users creating their personal site.

Usbaility Testing

Conducting User Testing

To ensure users needs were met I conducted user testing and asked current students various questions around what they would look for in a personal website and if there was anything missing from the one I created.


Before the finalized grayscale iteration the website didn't include a experience and skill section, this was added shortly after iterations of user testing and feedback from the team.

1.

1.

1.

Add a section for work experience, so everyone is able to showcase their previous experience

Designing a educational tool for current and incoming students

Add a section for work experience, so everyone is able to showcase their previous experience

2.

2.

2.

"The choice of typography goes well with the site and overall seems simple to use. It's not overwhelming the user"

"The choice of typography goes well with the site and overall seems simple to use. It's not overwhelming the user"

"The choice of typography goes well with the site and overall seems simple to use. It's not overwhelming the user"

3.

3.

3.

"The blue boxes make me think I can contact the user, will I be able to do so?"

"The blue boxes make me think I can contact the user, will I be able to do so?"

"The blue boxes make me think I can contact the user, will I be able to do so?"

Design Process

Hi-Fidelity Designs

Usbaility Testing

Design Systems + Components

Reflection - Key Takeaways

Reflection - Key Takeaways

Reflection - Key Takeaways

Reflection

Reflection

Reflection

When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.

When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.

When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.

Ready to Connect?

If you liked any of the projects you viewed and want to discuss more please don't hesitate to reach out!


© 2026 Manuela Mensah

Ready to Connect?

If you liked any of the projects you viewed and want to discuss more please don't hesitate to reach out!


© 2026 Manuela Mensah

Ready to Connect?

If you liked any of the projects you viewed and want to discuss more please don't hesitate to reach out!


© 2026 Manuela Mensah

Ready to Connect?

If you liked any of the projects you viewed and want to discuss more please don't hesitate to reach out!


© 2026 Manuela Mensah