An Introductory UX/UI Guide

Cindy Do Abstract

Within the Cal Poly Graphic Communication (GrC) department, we have a concentration for User Experience/User Interface (UX/UI). However, the UX classes that students in this concentration are required to take are mainly upper-division classes, so students may have a difficult time exploring user experience earlier in their college career. The goal of this introductory UX/UI guide is to provide students who are interested in the UX/UI area a place to start. I also hope to share the information and resources that I found helpful to me when I first started learning about UX/UI. With UX/UI also being a relatively newer concentration in the GrC department, there is an opportunity to create a learning resource for students interested in the topic, but do not know where to start. Having this introductory UX/UI educational resource can benefit students within the GrC major interested in learning more about this area or are looking to get started.

Introduction

UX/UI has been a popular field of study in the Cal Poly Graphic Communication department since its fruition. Most students in the department are under the conception that jobs offered in the field tend to be higher paying than print, packaging, and management applications. Cal Poly offers online resources for students to get more involved in clubs, programs, and activities related to UX/UI. According to Hired.com, the year 2020 showed a 289% increase in interest in UX roles (Teixera). A lot of interest in UX/UI was sparked from the Covid-19 pandemic, as remote work has paved the way for unique opportunities to rethink branding and product/user communication (Teixera).

An article by Ira Kaushik talks about the resources that would have been helpful at the start of her UX design career, because she admits feeling lost and not knowing where to start at the beginning of her journey. In a list of over 100 topics, she names resources for UX design and research, the UX design process, what to do before starting a project, design principles, and general career advice (Kaushik, 2020). There are some resources online for people seeking to learn more about UX/UI and or gain a certification of training, but because the field is so broad, the courses tend to have a more narrow scope and focus on a specialized topic. Courses can be found through Youtube, via email, and even some universities like UC San Diego, University of Michigan, and Georgia Tech (Wakefield, 2017).

The intent of this project is to provide an inclusive, easily accessible online resource for early GrC students. To do this, it is important that I follow a strict process of drafting, designing, and developing. After meeting with my mentor, we decided I would deliver the following:

1. Information architecture: An information architecture provides a map for my website, organizing and structuring the content that will be displayed.

2. Use cases and interaction framework: Use cases are actions that users may want to do within the website and how they will do it. Interaction frameworks are rough sketches that show the use cases in action. The interaction framework will transition into wireframes later on.

3. Wireframes: I used low and mid fidelity wireframes for this project. My low fidelity wireframes are sketches to get a feel of how to lay out the content. These low fidelity wireframes will be cleaned up into mid fidelity wireframes done on Figma.

4. Design guide: The design guide shows the typography, colors, and logos that will be used on the website.

5. Final website: The final website made in Webflow is fully functional.

The following paper will walk through the process of developing these deliverables, and ultimately, how they could be advanced or furthered in the future.

Methodology User Survey

Before starting on my deliverables, I sent out an initial user survey to the Cal Poly GrC department to get a better understanding of who I was designing for and what my audience was interested in. I asked questions regarding the survey-taker’s grade level, the concentration they are interested in, self-efficacy questions to gauge how comfortable people are with self-learning, and the type of UX/UI topics the survey-taker is interested in learning more about.

From my survey, I was able to gather 28 responses, all of them being from Graphic Communication students from varying years and concentrations. The results from this survey, seen in Figure 1, allowed me to prioritize certain content for my website based on how interested the respondents were in the presented topics.