Work
Play
About
Resume
Trojan Marketplace
Complete web redesign and buildout for Trojan Marketplace, an annual student-run event at USC. Thank you to Ben, Aaron, Assem, and Jac 🫶
ROLE
UI/UX Designer
TIMELINE
Sept 2024 → Nov 2024 (10 weeks)
SKILLS
UI/UX
Branding
Visual Design
TOOLS
Figma
Webflow
Trojan Marketplace
Complete web redesign and buildout for Trojan Marketplace, an annual student-run event at USC. Thank you to Ben, Aaron, Assem, and Jac 🫶
ROLE
UI/UX Designer
TIMELINE
Sept 2024 → Nov 2024 (10 weeks)
SKILLS
UI/UX
Branding
Visual Design
TOOLS
Figma
Webflow
CONTEXT
CONTEXT
Trojan Marketplace is USC's biggest marketplace event, with over 40 student entrepreneurs vending and more than 1,000 visitors.
Trojan Marketplace is USC's biggest marketplace event, with over 40 student entrepreneurs vending and more than 1,000 visitors.
Started by SparkSC, the TMP committee approached us with the goal of redesigning and updating their website to reflect the new branding identity that they had crafted.
Alongside 3 other designers and one PM, our team wanted to design a site that reflected the community-driven, entrepreneurial values that TMP embodied. Over the span of 10 weeks, we ideated, validated, and built out the site in its entirety before the event's return in the spring.
THE PROBLEM
THE PROBLEM
Deliver and embody TMP's bold, playful branding in a new way.
Deliver and embody TMP's bold, playful branding in a new way.
Bring a refreshed and up-to-date look, page structure, and information to the previously designed Trojan Marketplace website.
OBJECTIVES
OBJECTIVES
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><path d="M 13.982 0 L 9.321 0 C 8.506 0 7.739 0.384 7.25 1.036 C 6.761 0.384 5.994 0 5.179 0 L 0.518 0 C 0.232 0 0 0.232 0 0.518 L 0 9.839 C 0 10.125 0.232 10.357 0.518 10.357 L 5.179 10.357 C 6.037 10.357 6.732 11.053 6.732 11.911 C 6.732 12.197 6.964 12.429 7.25 12.429 C 7.536 12.429 7.768 12.197 7.768 11.911 C 7.768 11.053 8.463 10.357 9.321 10.357 L 13.982 10.357 C 14.268 10.357 14.5 10.125 14.5 9.839 L 14.5 0.518 C 14.5 0.232 14.268 0 13.982 0 Z M 5.179 9.321 L 1.036 9.321 L 1.036 1.036 L 5.179 1.036 C 6.037 1.036 6.732 1.731 6.732 2.589 L 6.732 9.839 C 6.284 9.502 5.739 9.321 5.179 9.321 Z M 13.464 9.321 L 9.321 9.321 C 8.761 9.321 8.216 9.502 7.768 9.839 L 7.768 2.589 C 7.768 1.731 8.463 1.036 9.321 1.036 L 13.464 1.036 Z" fill="rgb(138, 138, 138)" height="12.428571428571427px" id="ylyJiB9wv" width="14.5px"/></svg>)
Communicate
How to get involved with TMP, what Spark's mission is, and USC's community of entrepreneurs
Communicate
How to get involved with TMP, what Spark's mission is, and USC's community of entrepreneurs
ACCURACY AND ACCESSBILITY
Update information for the vendors: what they're selling, where they'll be, and how to reach them
ACCURACY AND ACCESSBILITY
Update information for the vendors: what they're selling, where they'll be, and how to reach them
Post-event discovery
Design a intuitive way for entrepreneurs to contact each other, and for customers to find the vendors after the event
Post-event discovery
Design a intuitive way for entrepreneurs to contact each other, and for customers to find the vendors after the event
Refresh website branding
Use TMP's newly created design assets to consistently translate its values across multiple mediums
Refresh website branding
Use TMP's newly created design assets to consistently translate its values across multiple mediums
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
DELIVERABLES
DELIVERABLES
Responsive design for the following:
OBJECTIVES
OBJECTIVES
Homepage
What is TMP?
Call to Action
Vendors Page
Vendor Application
Vendor Directory (e.g. Desc., Category)
Archive of Past Vendors
About TMP/SparkSC Page
How We Started
Our Team
Community Page
How to get involved with the TMP community
FIGURE 01
We split up the deliverables by page among our designers. I asked to be tasked with the Vendors page design, wanting to tackle different ways to handle repetitive and dense information.
THE PROCESS
THE PROCESS
01. Starting out
Understanding TMP's brand and context, fleshing out site structure
FIGURE 02
Collaborative moodboard created around TMP's current branding. Emphasis on organic shapes, bright colors, and simplicity.
FIGURE 02
Collaborative moodboard created around TMP's current branding. Emphasis on organic shapes, bright colors, and simplicity.
FIGURE 03
Simple sitemap to lay out user flow and content.
FIGURE 03
Simple sitemap to lay out user flow and content.
02. Lo-fi
FIGURE 04
Low-fidelity wireframe establishing card structure. Playing with how to categorize the vendors.
FIGURE 04
Low-fidelity wireframe establishing card structure. Playing with how to categorize the vendors.
03. Mid-fi
Making incremental changes after consulting our client and peers
ORGANIZATION
Initial feedback showed choice paralysis and confusion with no differentiation between vendors. To combat this, I added categorical filters to make browsing more digestible.
ORGANIZATION
Initial feedback showed choice paralysis and confusion with no differentiation between vendors. To combat this, I added categorical filters to make browsing more digestible.
CLARITY
As the original freeform card structure didn't work with the newly added categories, I switched to a more rigid, grid-based system instead for clarity.
CLARITY
As the original freeform card structure didn't work with the newly added categories, I switched to a more rigid, grid-based system instead for clarity.
04. Hi-fi
Giving it life!!!!
FIGURE 07
The branding we used for our hi-fis, consistent with TMP's new social media identity.
FIGURE 07
The branding we used for our hi-fis, consistent with TMP's new social media identity.
05. Putting it together
Translating the design to Webflow
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
Designing for USC's entrepreneurs/vendors, customers, and potential investors means comprehensiveness and accessibility are top priority.
THE RESULT
THE RESULT
Talulah’s breakthrough is treating pilots the way athletes are trained: with structured progression, objective metrics, consistent coaching, and reflective practice.
Talulah’s breakthrough is treating pilots the way athletes are trained: with structured progression, objective metrics, consistent coaching, and reflective practice.
By digitizing and centralizing every stage of training (preflight, in-flight, and postflight), Talulah transforms scattered tools into one seamless ecosystem.
FIGURE 09
Hover to view!
FIGURE 09
Hover to view!
TAKEAWAYS
TAKEAWAYS
What I learned after Talulah
What I learned after Talulah
Think ahead
Coming from a traditional visual arts background, I am used to diving in headfirst and making design choices as I go. While working on this, however, I found that analyzing existing projects from the client and creating a "moodboard" in preparation helped reduce the complexity of designing a site.
Think ahead
Coming from a traditional visual arts background, I am used to diving in headfirst and making design choices as I go. While working on this, however, I found that analyzing existing projects from the client and creating a "moodboard" in preparation helped reduce the complexity of designing a site.
Think ahead
Coming from a traditional visual arts background, I am used to diving in headfirst and making design choices as I go. While working on this, however, I found that analyzing existing projects from the client and creating a "moodboard" in preparation helped reduce the complexity of designing a site.
Keep scope in mind
This is my first project building out my own designs. I learned how to keep my UI visually appealing and effective while being mindful of the limitations of the CMS.
Keep scope in mind
This is my first project building out my own designs. I learned how to keep my UI visually appealing and effective while being mindful of the limitations of the CMS.
Keep scope in mind
This is my first project building out my own designs. I learned how to keep my UI visually appealing and effective while being mindful of the limitations of the CMS.
IMPROVEMENTS
IMPROVEMENTS
IMPROVEMENTS
This was my first ever UI/UX project, done my freshman fall
This was my first ever UI/UX project, done my freshman fall
This was my first ever UI/UX project, done my freshman fall
If I were to do it all again, here's what I'd change.
Good design is beautiful *and* functional
In an effort to align with TMP's fun, organic branding, I sacrificied usability for aesthetics in some cases. Now, I would design more carefully within standard UI constraints to not only create a more pleasant experience for the user but also reduce visual strain. I'd also be more intentional about how the design translates to other screen sizes.
Good design is beautiful *and* functional
In an effort to align with TMP's fun, organic branding, I sacrificied usability for aesthetics in some cases. Now, I would design more carefully within standard UI constraints to not only create a more pleasant experience for the user but also reduce visual strain. I'd also be more intentional about how the design translates to other screen sizes.
Good design is beautiful *and* functional
In an effort to align with TMP's fun, organic branding, I sacrificied usability for aesthetics in some cases. Now, I would design more carefully within standard UI constraints to not only create a more pleasant experience for the user but also reduce visual strain. I'd also be more intentional about how the design translates to other screen sizes.
Design is a means to an end
In order to increase visibility and post-event connection for TMP's vendors, there should be less friction to reach them. Right now, the cards only lead to the vendors' respective Instagrams, but gathering more information on their preferred method of contact beforehand would allow me to make more informed decisions on how the card interface should look.
Design is a means to an end
In order to increase visibility and post-event connection for TMP's vendors, there should be less friction to reach them. Right now, the cards only lead to the vendors' respective Instagrams, but gathering more information on their preferred method of contact beforehand would allow me to make more informed decisions on how the card interface should look.
Design is a means to an end
In order to increase visibility and post-event connection for TMP's vendors, there should be less friction to reach them. Right now, the cards only lead to the vendors' respective Instagrams, but gathering more information on their preferred method of contact beforehand would allow me to make more informed decisions on how the card interface should look.
