Role
Web Designer
Timeline
1.5
Tools
Figma, Wordpress
Platform
Elementor
Type
Senior Showcase
Scroll
Four designers. One graduating class. One website to
launch them all. Fourground wasn't just a portfolio — it
was a career launchpad built against the clock.
Four designers. One graduating class. One website to
launch them all. Fourground wasn't just a portfolio — it
was a career launchpad built against the clock.
4
4
Designer careers launched from
a single platform
Designer careers launched from a single platform
1.5
1.5
Months from brief to live senior
showcase
Months from brief to live senior showcase
100%
Positive user feedback at the
senior show
Positive user feedback at the senior show
100%
Phase I
Discovery
The senior show needed a digital canvas — a marketing tool that captured the
essence of the graduating class through visuals, narrative, and multimedia. Four
graphic designers needed a front-end web presence to push their work to market
and get exposure to potential employers and clients.
The senior show needed a digital canvas — a marketing tool that captured the
essence of the graduating class through visuals, narrative, and multimedia. Four
graphic designers needed a front-end web presence to push their work to market
and get exposure to potential employers and clients.
The brief was clear: build something that makes four distinct designers feel like a
unified, professional force — while still letting each voice come through.
The brief was clear: build something that makes four distinct designers feel like a
unified, professional force — while still letting each voice come through.
Figure 1.0 — Fourground Hero Visual
Brand Design
Web Design
User Research
Phase I
Discovery
Phase II
Define
Most portfolios scroll vertically because that's the default. We
asked — what if the layout itself communicated that these
designers think differently?
Most portfolios scroll vertically because that's the default. We
asked — what if the layout itself communicated that these
designers think differently?
Two defining decisions shaped the entire visual identity:
Horizontal Navigation Layout — Breaking from vertical scrolling to create a distinct, engaging
experience that signals creative confidence from the first interaction.
Dynamic Logo System — Geometric shapes and structures from the logo were carried
throughout the entire site. Visitors experience a visual language that builds recognition with every
scroll.
Figure 1.1 — Brand System
Figure 1.2 — Visual Language
Phase II
define
Phase III
Ideation
The horizontal navigation system was designed around the F-shaped reading
pattern — users scan horizontally first, then vertically down the left side. The
layout was structured around three anchor sections that mirror how the eye
naturally moves: "Who we are," "What we do," and "Where to find us."
The horizontal navigation system was designed around the F-shaped reading
pattern — users scan horizontally first, then vertically down the left side. The
layout was structured around three anchor sections that mirror how the eye
naturally moves: "Who we are," "What we do," and "Where to find us."
Design Decision
Layered cake theory informed how sections were stacked and revealed — each
horizontal panel acting as a distinct "layer" that rewards exploration rather than
passive scrolling.
Layered cake theory informed how sections were stacked and revealed — each horizontal panel acting as a distinct "layer" that rewards exploration rather than
passive scrolling.
Figure 1.3
Figure 1.4
Figure 1.5
Figure 1.6 — Site in Motion
Phase III
ideation
Phase IV
Test
Final testing revealed something worth noting: users preferred vertical scrolling as
their primary navigation, using the horizontal side nav as a secondary tool. A
reminder that even bold design decisions need to bend to how people actually
behave.
Final testing revealed something worth noting: users preferred vertical scrolling as
their primary navigation, using the horizontal side nav as a secondary tool. A
reminder that even bold design decisions need to bend to how people actually
behave.
The hover effect on each designer's portrait — revealing it as a link to their
portfolio — became a standout moment. Users noticed and appreciated the
discovery mechanic. That single interaction drove most of the portfolio click-
throughs at the show.
The hover effect on each designer's portrait — revealing it as a link to their
portfolio — became a standout moment. Users noticed and appreciated the
discovery mechanic. That single interaction drove most of the portfolio click-
throughs at the show.
Phase IV
test
Phase V
Conclusion
The senior show turnout was strong. Four designers walked away with exposure,
portfolio traffic, and job prospects. The platform worked. More importantly, it
taught me that design systems have to carry identity — the logo geometry woven
through every screen is what made Fourground feel intentional rather than
assembled.
The senior show turnout was strong. Four designers walked away with exposure,
portfolio traffic, and job prospects. The platform worked. More importantly, it
taught me that design systems have to carry identity — the logo geometry woven
through every screen is what made Fourground feel intentional rather than
assembled.
"Four designers. One voice. The site had to feel like a studio,
not a class project."
"Four designers. One voice. The site had to feel like a studio,
not a class project."
Brand Identity
Front-end Design
UX Design
Figma
WordPress
Phase V
conclusion
Strategic Product Designer
San Antonio, TX
Strategic Product Designer
San Antonio, TX
Strategic Product Designer
San Antonio, TX