Branding ◦ UI Design ◦ Website Design ◦ Workshop Leadership
How can we create a fun brand to promote experimental interaction, while supporting usability?
Student Media Tech helps the PSU Student Media groups create, manage, and maintain web content, as well as introduces them to new technologies such as AR/VR. When I joined the group as a web designer, I was solely responsible for creating the brand of Student Media Tech (SMT), including logos, website design, and student outreach via flyers and workshops.
One of Student Media Tech’s main goals is the encouragement of experimentation, and the desire to spark creativity in their students. Because of this, we wanted the brand to be interactive, approachable, and fun.
Early Stages
Starting out fresh was exciting and challenging. We had many questions and concerns: how can we be innovative and fun in order to stand out to students, while promoting good usability and experimentation in our brand?
How can we standout as a unique student service, while being under the parent group of Student Media? How can we notify students about us, when our offices are hard to reach?
Site Map & Wireframes
After determining the site pages and wireframes, I went into sketching layout designs and creating the first round of mockups.
Early sketches for the SMT website design
Sketches for services page
Book appointment concept (services page)
Early Website Mockups
I created many rounds of mockups, and in the beginning the team and I wanted to try an illustration style with more colors. The final production site honors the framework of the original wireframes and mockups, but with content divided into larger divs rather than the small “card” style of the mockups. My approach to the website was all about experimentation, and then narrowing down later on the elements which work best for our website needs. I feel that this approach was beneficial because it allowed me to enjoy experimentation without pressure.
Blog page - Wireframe
Blog page - Mockup
Blog page - Live Production Site
Homepage - Wireframe
Homepage - Mockup
Homepage - Live Production Site
Early Logo Renders
Finalized Logos
We wanted an instantly recognizable and clean logo for the Tech group. The finalized logo features a slash in reference to web development coding, and brand colors that match the Student Media parent group.
Social Media Graphics
It was important that we have a strong social media presence because we communicated with the student body primarily via Instagram. Additionally, we posted physical flyers and digital announcements on school TV’s.
Workshop Planning
I collaborated with my coworkers in planning and leading multimedia workshops for students, as well as mini workshops for my fellow coworkers. Subjects included sound recording and editing, creating cinemagraphs, how to make a GIF, interactive layout design, and more.
Outcome & Final Thoughts
I enjoyed being part of a team, and attending tech and design conferences together to learn and share our knowledge with students. Organizing and teaching workshops helped me to better understand the subjects myself and to approach design in new ways.
I learned to have fun with experimenting in design. And even if those experiments don’t make it to the production and developer stage, what’s important is what I learned along the way.