SPI Website Design

SPI Website Design

SPI Website Design

In collaboration with Loyola University's Student Peace Initiative, I was tasked with designing a website for that helped the organization with outreach and spreading their message of peace and open dialogue.

"Trader Joe’s Story: A Legacy in Motion" is an interactive storytelling installation designed for the Trader Joe’s Pop-Up Shop that explores the history of the brand. This project combines the physical with the digital to create a unique viewing experience.

Timeline: September - November 2025

"Trader Joe’s Story: A Legacy in Motion" is an interactive storytelling installation designed for the Trader Joe’s Pop-Up Shop that explores the history of the brand. This project combines the physical with the digital to create a unique viewing experience.

Design Brief

The Student Peace Initiative is a coalition of students invested in open, productive dialogue surrounding the world's current affairs. The group's major event is the Peace Conference, which encourages students to submit an abstract that aligns with the year's theme. Working with Loyola's Student Peace Initiative, senior UX designers in Professional Practicum worked to deliver a high fidelity web design that provided outreach to new volunteers, uplifted the group's message, and encouraged people to submit abstracts for the

Peace Conference. 

Role

  • UX Researcher

  • UI Designer

Bringing Ideas to Life

Week 1-2:

Thematic Analysis


Before meeting with the SPI team, it was important to do some brainstorming into what might be important to include in the website.

Week 1-2:

Thematic Analysis


Before meeting with the SPI team, it was important to do some brainstorming into what might be important to include in the website.

User Interviews

From this brainstorm, we narrowed our thoughts down to 20 key interview questions.

  1. What are the primary goals, messages, and/or values of this initiative?

  2. Who is your primary target audience, and what are their needs or motivations for visiting the site?

  3. What impact should SPI have on a user?

  4. What are the most fundamental aspects and particular efforts that a user should know when learning about SPI?

  5. Are you trying to grow or engage this audience further, and what challenges have you faced in doing so?

  6. What are some challenges you face when trying to get engagement from students and/or volunteers?

  7. How do you want the journals displayed?

  8. What existing visual assets (logos, images, icons) should be included, and where can we access them?

  9. Are there any websites, ads, or organizations you admire or want to emulate? Why?

  10. What would your ideal SPI website look like? Would you like previous events/information to be displayed?

  11. How are the themes chosen for the conference each year?

  12. How do you usually advertise the SPI and its events?

  13. Is there a registering process to attend the events, or is it on an open seat/first-come-first-serve basis?

  14. What look and feel do you want the website to convey, and how prominent should the branding be?

  15. What would your ideal SPI website look like? Would you like previous events/information to be displayed?

  16. What parts of the website do you expect to be updated regularly? How often are updates to be expected?

  17. What is the deadline/ideal launch date for this website, plus any milestones?

  18. Is there a budget for this project?

  19. Is there money allocated for domain name, unlimited access (to add unlimited photos and videos), etc.?

  20. What is the ideal outcome of a user accessing your website?

Meeting with the Client


In our group meeting with the client, we discovered some key insights into the goals for the SPI website:

Meeting with the Client


In our group meeting with the client, we discovered some key insights into the goals for the SPI website:

1

Users need a clear, immediate understanding of SPI’s mission, theme, and opportunities.

Visitors, primarily students, professors, and schools, come to the site to understand what SPI is, what it stands for, and what events or opportunities are available. They need the mission, yearly theme, upcoming conference/festival information, and “anyone can join” messaging to be instantly visible. The homepage must quickly communicate what SPI does, why it matters, and how people
can participate.

2

The site must streamline participation: submitting abstracts, registering, and getting involved.

The most essential actions for users are submitting abstracts, learning event details, volunteering, and reviewing past work. SPI measures success by engagement and participation, so the site must prioritize clear navigation, strong calls to action, and an easy submission/registration flow. A clean information architecture similar to websites like Mesa or BLM will help users find what they need at
each stage.

3

SPI wants to grow beyond Loyola, and the website must support this expansion.

The organization’s goal is to become a national initiative, attract students from other schools, and operate independently from Loyola branding. The website should therefore feel professional, scalable, and visually bold, capable of hosting more programs, partners, and events in the future. It must also serve as a valuable reference for students (e.g., showcasing conferences, journals, and archives).

4

Visual identity should balance academic credibility with bold, inclusive design.

SPI gravitates toward a look that fosters connection, peace symbolism (olive branch, dove), bold interactive visuals (inspired by Global Citizens, BLM), and flexible color palettes that shift with yearly themes. Their branding should feel welcoming, visually engaging, and academically rooted. The site should also house archives, journals, past events, and festival/conference distinctions in a way that’s digestible and visually compelling.

Week 3-4:

Lo-fi to Hi-fi


Week 3-4:

Lo-fi to Hi-fi


Lo-Fidelity

Home, Archive, Events, About, Get Involved

Mid-Fidelity

Home, Archive, Events, About, Get Involved

High Fidelity

Home, Archive, Events, About, Get Involved

Final Prototype

Like what you see?

You can find me on:

LinkedIn

Create a free website with Framer, the website builder loved by startups, designers and agencies.