SDSU Global Campus

High-Quality Visual Designs

Visual Case Studies - Enhanced Design Impact

Webpage Redesign Move the slider to see the before and after webpage layout design.
Pre-2017 original web page design for a program page
Original
Redesigned program page layout
Redesigned
Challenges

During the rebranding initiative, we received feedback that the original program pages were loaded with "walls of content" where students experienced endless scrolling. On mobile, the lead gen in the sidebar form showed difficult to get to.

  1. Reconcile the walls of content
  2. Course tables aren't connected to integrated data
  3. Lead gen form needs redesign
  4. Consider web accessibility issues

Wireframe and sketch of the project

PROCESS

Collaborative efforts with the copywriting team, along with feedback from other departments guided the webpage redesign. Student feedback also provided.

  1. UX consideration inspired a multi-tab format. The intention is to provide information while the user remains on the same page.
  2. Wider page layout provides more breathing room in the composition.
  3. The original content in the sidebar now placed into the fourth tab.
  4. FormAssembly form redesigned and CTA buttons linking to it.
  5. Typography, H-tags, and contrast was the focus for web accessibility.

During the duration of our design projects, I've had the pleasure to mentor graphic design students and our Jr. Web Designer.

As of Nov. 2023, click below to see the updated wider page layout with multi-tabs.

Revised Layout


Results & Feedback

Stakeholders, program managers, their sponsors, and educational personnel from main SDSU campus, have said that the multi-tab solution organizes the "wall of content" in a great way!

  • The multi-tabs kept content on ONE web page
  • Significant layout redesign has a more favorable, wider viewing space
  • Both students and prospects are presented with more easily, digestible, content
  • Redesigned course data has a more refined user experience

Coming Mid-November 2023, integrated accordion dropdown of course details to be implemented. Click on the Courses tab to see the course dropdowns in action!


Landing Pages
White Labeling
Challenges

For targeted ad spend, we are tasked to create landing pages for specific educational programs with unique selling props. The goal is to generate qualified leads with visual appeal:

  1. Apply visual design to drive engagement: click through rates, inquiries/leads
  2. Use branding logo and marketing copy for efficient calls to action
  3. Determine whether to use pop up forms or placing the form above the fold

PROCESS

The app used is Unbounce, where a large number pages for various educational programs are created. There we created templates that are scalable for our programs and events.

eSports was a project where I took initiative to take the design beyond the template. R&D included: studying gaming companies, FORTNITE, comic book industry, and Comic-Con. I was able to recognize common patterns in typography, color schemes, and overall look and feel.

With feedback from the digital media manager and executive marketing director (at the time), I was able to push my design limits to go beyond and inspire other marketing touch points: flyers, socials, and events.

Looking Forward

Mentoring designers on a team strengthens collaboration, allows for exploration and risks, that leads to success of any project. Most of all, it's tremendously rewarding when we all work together!