Web design: SMC Interaction Design (IxD) + Activision Website

Brief

Design and Build a website to showcase student projects for a class that collaborated with Activision.

Requirements

Contained within the SMC Interaction Design (IxD) program's existing website. It will serve as a template for other projects, not just the one with Activision. It will serve as both a marketing tool for the SMC program, as well as a documentation site of student work.

Timeframe

1 month

My Main Role

Web Design
Web Development

Team

Irene Rivera (Web Design)

Tools

Figma, Webflow

Client

SMC IxD Program

Website Walkthrough

Process

I created the designs and developed this website as part of my job as a student aide with the web team at the SMC IxD program. The design is driven both by the needs of the visitors of the website, and the goal the client would like to achieve with the website.

Stakeholder Interview

To start the design process, I met with the client to discuss requirements, and the goal of the website. My objective in these interviews were: 1) understand my clients goals, as well as the goals of their intended audience they they understand them; and 2) list what the requirements of the projects are.

Audience Specific Goals

General Audience
Create awareness for the Bachelor's program. Help with advocating for the program in terms of funding and support.
Potential Industry Partners
Seeing past results from collaborating with IxD program.
IxD Program Faculty and Staff
A way to document student work and process in the industry partnership projects.
Prospective Students
See the work created by students in the IxD program to learn more about the program itself, and be inspired.

Requirements

Reusable Template
The design of the website should be reusable for other projects, and easy to onboard for future student workers to plug in content.
Includes all necessary content
Luke, the professor of the IxD + Activision project provided us with all the content that need to be in the website. We need to figure out a way to organize it.

Information Archecture

To build a building, I need a blueprint first. I worked with Irene together to create a site map of a previous project sites for the IxD program.

Old Site

The old site had several issues:
1) There were no way to return to the IxD website itself.
2) The branding deviates from the IxD website style guide.
3) It seems strange to separate research from prototype when they are all individual projects.

Sit Maps

The site map for the IxD + Redbull site.

The site map for the new IxD + Activision site.

Wireframes

With the audience specific goals and the requirements in mind, Irene and I collaborated to create multiple versions of wireframes to communicate the idea and gain input and buy-in from stakeholder. I tested with several of my classmates casually to inform my recommendation to the client finally for Version C.

Branding

I followed the branding style guide created by the designers for the IxD main website, Playground Vision.

Iterations

I worked on taking the design from the lo-fi wireframe to high fidelity versions of the prototype, and reached out to multiple stakeholders for feedback, before moving on to the final prototype.

Development

After client approval of the prototype, I moved on to develop the site on Webflow.

Reflection

What could be done better?

This project was a very short terms project so there was not enough time to conduct card sorting or other testing to validate the site map we created. I would love to be able to test with website visitors the our target audience for my next web design project.

What worked?

Prototyping, and communicating each step of the way using Figma has been very helpful in gaining stakeholder buy-in and helping with collaboration and management of the project.