Sarai Garcia

LA Tech Website

image mockup of an open laptop that displays the homepage of the LAtech.org website

Overview

The LATech.org website redesign was a collaborative effort done by a team with my role being a lead UX/UI designer. We redesigned the LA Tech website to align with a new brand identity while improving navigation, content structure, and overall usability for students, partners, and volunteers.

​

This project is a current work in progress, building is yet to be done for this website.

Role

Co-Lead UX/UI Designer

Project Scope

  • Wireframing (Desktop and Mobile)
  • Responsive Design
  • Building with Wordpress

Challenges and Goals

  • Align the website with LA Tech’s new brand identity
  • Create a clear and consistent visual style
  • Design new pages without existing structure or content
  • Improve navigation and content organization

Process

Worked through a structured design process from research and inspiration to wireframing, iteration, and final implementation.

  • Sitemapping
  • Website Inspiration
  • Style Establishment
  • Wireframing
  • Revisions
  • Building

Research

Inspiration

  • Non-profit youth-focused websites
  • Emphasis on bold visuals, large typography, and clear CTAs

Client Input

  • LA Tech provided visual inspiration based on pages that they saw and wanted certain elements incorporated into their websites.
    • Clean testimonials and mission statements• Clear calls to action for sign-up and volunteering• Increased use of white space compared to previous design

Design Exploration

The team brought forth 2 different styles for the client to show how the new branding could be implemented into the website. We explored two design directions to interpret the new brand:

  • Version 1 emphasized
    • • Bold shapes and solid color blocks• Smaller text with structured layouts
  • Version 2 emphasized
    • Larger typography and more white space• Floating shapes and full-color imagery

Version 1

Version 2

Final Home Page

Combined elements from both directions to create a balanced, visually engaging, and brand-aligned experience.

Desktop

Mobile

Page Building

Mentorship Page

Designed a new mentorship page from scratch to engage alumni as mentors.

​

Key elements included:• Strong call to action• Impact statistics• Testimonials

​

Used Figma Make to generate initial structure, then refined layouts to align with branding and content needs.

Process

Due to the fact that there was no preexisting page, the page needed to be created from scratch. Upon recommendation from my creative director, I took to Figma Make and prompted the program to create a wireframe for the mentor page. With this, I took elements from what Figma Make provided and inspiration pages from the client to design the mentors page for LATech.org.

What Figma Make Provided

Reflection

My first experience with the Figma Make tool allowed me to come up with a page structure and idea for content. It gave me the opportunity to develop my wireframes faster, organize page content, to deliver the end result in a timely manner.

Initial Design

Wireframe Progression

The most recent progress for the wireframes contain 10 complete pages, both in desktop and mobile formats.

(image below scrolls to the right, displaying all wireframes that I contributed to and led design process for.) →

Impact

  • Improved navigation for students, partners, and volunteers
  • Created a cohesive digital experience aligned with the new brand identity
  • Expanded site functionality with new pages and content to increase and support engagement

Updates

Website is to be launched by end of April, built on Wordpress. (In Progress)

Reflections/

Considerations

With no initial web guidelines for this project, my team and I were able to develop a consistent style throughout the site. This project strengthened my ability to translate branding into functional web design while collaborating in a team environment and building scalable page structures.

Back to Top

Reach out to me! @saraisstudio

Sarai Garcia

LA Tech Website

image mockup of an open laptop that displays the homepage of the LAtech.org website

Overview

The LATech.org website redesign was a collaborative effort done by a team with my role being a lead UX/UI designer. We redesigned the LA Tech website to align with a new brand identity while improving navigation, content structure, and overall usability for students, partners, and volunteers.

​

This project is a current work in progress, building is yet to be done for this website.

Role

Co-Lead UX/UI Designer

Project Scope

  • Wireframing (Desktop and Mobile)
  • Responsive Design
  • Building with Wordpress

Challenges and Goals

  • Align the website with LA Tech’s new brand identity
  • Create a clear and consistent visual style
  • Design new pages without existing structure or content
  • Improve navigation and content organization

Process

Worked through a structured design process from research and inspiration to wireframing, iteration, and final implementation.

  • Sitemapping
  • Website Inspiration
  • Style Establishment
  • Wireframing
  • Revisions
  • Building

Research

Inspiration

  • Non-profit youth-focused websites
  • Emphasis on bold visuals, large typography, and clear CTAs

Client Input

  • LA Tech provided visual inspiration based on pages that they saw and wanted certain elements incorporated into their websites.
    • Clean testimonials and mission statements• Clear calls to action for sign-up and volunteering• Increased use of white space compared to previous design

Design Exploration

Final Home Page

The team took elements from both styles and combined them to create the final versions below. Content and images were adjusted per client feedback.

Version 1

Version 2

Final Home Page

Combined elements from both directions to create a balanced, visually engaging, and brand-aligned experience.

Desktop

Mobile

New Page Design Process

Mentorship Page

Designed a new mentorship page from scratch to engage alumni as mentors.

​

Key elements included:• Strong call to action• Impact statistics• Testimonials

​

Used Figma Make to generate initial structure, then refined layouts to align with branding and content needs.

Process

Due to the fact that there was no preexisting page, the page needed to be created from scratch. Upon recommendation from my creative director, I took to Figma Make and prompted the program to create a wireframe for the mentor page. With this, I took elements from what Figma Make provided and inspiration pages from the client to design the mentors page for LATech.org.

What Figma Make Provided

Initial Design

Reflection

My first experience with the Figma Make tool allowed me to come up with a page structure and idea for content. It gave me the opportunity to develop my wireframes faster, organize page content, to deliver the end result in a timely manner.

Wireframe Progression

The most recent progress for the wireframes contain 10 complete pages, both in desktop and mobile formats.

(image below scrolls to the right, displaying all wireframes that I contributed to and led design process for.) →

Wireframe Progression

The most recent progress for the wireframes contain 10 complete pages, both in desktop and mobile formats.

(image below scrolls to the right, displaying all wireframes that I contributed to and led design process for.) →

Impact

  • Improved navigation for students, partners, and volunteers
  • Created a cohesive digital experience aligned with the new brand identity
  • Expanded site functionality with new pages and content to increase and support engagement

Updates

Website is to be launched by end of April, built on Wordpress. (In Progress)

Reflections / Considerations

With no initial web guidelines for this project, my team and I were able to develop a consistent style throughout the site. This project strengthened my ability to translate branding into functional web design while collaborating in a team environment and building scalable page structures.

Back to Top

Reach out to me! @saraisstudio

Sarai Garcia

LA Tech Website

image mockup of an open laptop that displays the homepage of the LAtech.org website

Overview

The LATech.org website redesign was a collaborative effort done by a team with my role being a lead UX/UI designer. We redesigned the LA Tech website to align with a new brand identity while improving navigation, content structure, and overall usability for students, partners, and volunteers.

​

This project is a current work in progress, building is yet to be done for this website.

Role

Co-Lead UX/UI Designer

Project Scope

  • Wireframing (Desktop and Mobile)
  • Responsive Design
  • Building with Wordpress

Challenges and Goals

  • Align the website with LA Tech’s new brand identity
  • Create a clear and consistent visual style
  • Design new pages without existing structure or content
  • Improve navigation and content organization

Process

Worked through a structured design process from research and inspiration to wireframing, iteration, and final implementation.

  • Sitemapping
  • Website Inspiration
  • Style Establishment
  • Wireframing
  • Revisions
  • Building

Research

Inspiration

  • Non-profit youth-focused websites
  • Emphasis on bold visuals, large typography, and clear CTAs

Client Input

  • LA Tech provided visual inspiration based on pages that they saw and wanted certain elements incorporated into their websites.
    • Clean testimonials and mission statements• Clear calls to action for sign-up and volunteering• Increased use of white space compared to previous design

Design Exploration

The team brought forth 2 different styles for the client to show how the new branding could be implemented into the website. We explored two design directions to interpret the new brand:

  • Version 1 emphasized
    • • Bold shapes and solid color blocks• Smaller text with structured layouts
  • Version 2 emphasized
    • Larger typography and more white space• Floating shapes and full-color imagery

Version 1

Version 2

Final Home Page

Combined elements from both directions to create a balanced, visually engaging, and brand-aligned experience.

Desktop

Mobile

New Page Design Process

Mentorship Page

Designed a new mentorship page from scratch to engage alumni as mentors.

​

Key elements included:• Strong call to action• Impact statistics• Testimonials

​

Used Figma Make to generate initial structure, then refined layouts to align with branding and content needs.

Process

Due to the fact that there was no preexisting page, the page needed to be created from scratch. Upon recommendation from my creative director, I took to Figma Make and prompted the program to create a wireframe for the mentor page. With this, I took elements from what Figma Make provided and inspiration pages from the client to design the mentors page for LATech.org.

What Figma Make Provided

Initial Design

Reflection

My first experience with the Figma Make tool allowed me to come up with a page structure and idea for content. It gave me the opportunity to develop my wireframes faster, organize page content, to deliver the end result in a timely manner.

Wireframe Progression

The most recent progress for the wireframes contain 10 complete pages, both in desktop and mobile formats.

(image below scrolls to the right, displaying all wireframes that I contributed to and led design process for.) →

Impact

  • Improved navigation for students, partners, and volunteers
  • Created a cohesive digital experience aligned with the new brand identity
  • Expanded site functionality with new pages and content to increase and support engagement

Updates

Website is to be launched by end of April, built on Wordpress. (In Progress)

Reflections / Considerations

With no initial web guidelines for this project, my team and I were able to develop a consistent style throughout the site. This project strengthened my ability to translate branding into functional web design while collaborating in a team environment and building scalable page structures.

Back to Top