Jump to section

Jump to ↯

Innovative Design

Homepage Wireframes

Iteration 1 (Mid-Fi)

Iteration 2 (Hi-Fi)

The Final Product (and Challenge)

What I learned

Innovative Design

Innovative
Design

Designing a website for a marketplace organization to promote student entrepreneurism.

View the Website

Hats I wore

Web Designer

Timeline

Sep 2024 — Nov 2024

Skills

UX/UI

Web Design

Team

Designers:

Assem Syrgabayeva, Karen Lou

Project Manager:

Benjamin Yu

Who?

Innovative Design is a design agency that provides photography, branding, and UX/UI services for student organizations at USC and private businesses in the Los Angeles community.

The Client + Request

Trojan Marketplace

An organization that strives to strengthen the USC entrepreneurial ecosystem by providing student entrepreneurs with vibrant marketplace events, professional resources, and dynamic social mixers.

They needed us to design a website to be visited by vendors, event visitors, and sponsors.

Goal

My role was to design a responsive homepage while maintaining the client's brand consistency and communicating with team members.

Starting the Design

Mood boarding

Our mood board aligned our understanding of what style we were aiming for.

Empathy Maps

USC vendors

Says

Where to apply...?

So what is TMP?

When does it happen...where can I find more details?

Setup time? I can’t sign up through the button.

It seems the current website isn’t finished...

Perhaps I should just contact them.

This is so jank.

Thinks

What is the Trojan Marketplace?

Should I apply?

What will Trojan Marketplace do for me?

How will this benefit my business? To what extent?

I want to see the event details. -> Where, When?

Where can I apply?

The button is not working...a lot of the website doesn’t

function. How can I contact them?

I want to know the timeline and how to prepare.

I want to see past events.

Does

Scrolls out of curiosity

Looks around the homepage

Stops to read the event details

Reads a bit of “What is TMP”

Clicks into Food.

Scrolls around and goes back to homepage

Clicks on About Us and scrolls around

Click on Apply and Vendor button

Scroll to find contact information

Feels

Curious

Focused and determined

Confused and slightly discouraged

Customers

Says

What is Trojan Market Place?

Should I go?

What’s over there?

Who might want to come check it out with me?

Thinks

What is TMP? I want to know more about it.

Ah I understand now.

Why should I go though? What interesting things will I see?

These pictures are a little vague. I don’t want to click into

everything.

Will I be able to put this event on my schedule?

Do I need to sign up somewhere? Probably not.

I don’t want to go alone...

How do I know which vendors are going to be there?

It’s not very clear on the vendor’s page.

Does

Scrolls out of curiosity

Reads description

Goes to “Fashion”

Clicks into one of the vendor’s pages.

Goes back

Scrolls and looks around some more.

Goes to home and looks at time, date, location

Texts in a group chat

Feels

Curious

Interested

Calm

Slightly lost

Potential Sponsors

Says

What is Trojan Market Place?

What’s in it for me? What impact does the event have?

I don’t know how to access the sponsor application.

Okay this is hard to understand. It seems the website

isn’t finished.

I don’t know whether these vendors will be there or if

they are just past vendors.

Thinks

What is TMP?

Why should I sponsor? What will I get out of this?

I don’t know how good of an investment this will be.

What vendors will be there? The website doesn’t make it

clear.

Where can I see the vendor’s information?

I could visit the event. Where are the logistics?

ok I see it now...It’s a little confusing.

How do I apply as a sponsor? Who can I contact if I

wanted to learn more?

Does

Scrolls on homepage

goes to vendors page

Looks around

Goes back

Looks at previous sponsor

Clicks on About us

Click on Apply

Looks at sponsor application section

Feels

Neutral

Slightly intrigued

concerned

I created empathy maps based on 3 target audience categories to approach the website from the users' point of view.

Sitemapping

The team produced a sitemap to describe the information architecture; where CTAs go, what information must be included, and where the information should be placed so that users can navigate with ease.

Homepage Wireframes

As I designed the landing page, I had to keep CTAs at the forefront of my mind as well as take into the design's responsiveness and feasibility in Webflow (the required website builder).

From the top down,

Emphasize CTAs
Numbers for impact
Showcase featured items at past events and quotes from past vendors
Display upcoming event details

From the top down,

Emphasize CTAs
Numbers for impact
Showcase featured items at past events and quotes from past vendors
Display upcoming event details

Scroll!

I wanted to showcase some upcoming vendors to get users excited about the event using a grid-like design and a filter system.

Iteration 1 (Mid-Fi)

Prioritize what's really important.

After discussing with the team, hearing external opinions, and taking in client feedback, I decided to reorder them. The upcoming event was moved up and I reformatted the vendors preview to be more grid-like to be more straightforward.

A challenge was defining specifically what should be on the "About" page rather than the Homepage. We classified that any information that was specifically talking about the organization's history, mission, and values should be migrated over. The landing page would mainly serve to spark curiosity.

Iteration 2 (Hi-Fi)

I incorporated clearer sections to improve navigation and ensured contrast was not an issue. A last CTA was placed at the bottom to lead curious users where they want to be.

Challenge: Style Consistency

Because design work was split between 3 designers with different schedules, we did our best to discuss design decisions. "Vendors" page deviated especially due to scheduling complications.

Next time, I will ensure that a basic design system is established and clear meeting times are set so we may align results.

The Final Product (and Challenge)

The Final Product
(and Challenge)

No CMS.

Because there were so many vendors and all their information was linked to spreadsheets, I discussed with the client to consider investing in a CMS Webflow plan to allow the website to be easily sustained. However, we ended up having to manually input all the data manually.

Last changes:

To enhance responsiveness, we chose to omit the floating assets. I decided to remove the Filter system as the vendors on the homepage would only be a preview—the list would be on the "Vendors" page.

Last changes: