CSUS Design Department Virtual Spring Showcase 2021
UX, Identity, Web Design
Due to the COVID 19 Pandemic, the annual Spring Show held by Sacramento State’s Design Department has transitioned to a virtual showcase. Traditionally, the Spring Show is a paramount moment for students to showcase their portfolios and design skills in a physical exhibit environment.
The goal of the website is to create the same effect in an online gallery by showcasing an in-depth look at their work, focuses, and allow them to create new connections and opportunities.
My Role
As a UX team of one and a member of the design community at Sac State, I decided to solve problems through UX and UI design in order to create a successful* Spring Showcase in a virtual space for graduate designers.
*Assessed Measures of Success:
- Design the interface around the three different departments and make sure each department is meeting their specific needs of quality presentation.
- Students feel as if their portfolios are completely and accurately portrayed to the best that an online presence can offer.
- Navigation and networking are easily possible for all users of the website by implementing a heuristic interface.
- Create a brand identity that creates excitement and buzz to attract the most amount of people to the website.
Research
The first step in my research was to fully understand who I was designing for. After analyzing the core audience members from the previous spring shows, I was able to break them into two groups: the designers and the viewers. These two groups are both users of the website, but they both have differentiating goals for using the Spring Showcase website. The designers are the graduating seniors who wish to showcase their work and the viewers are external members of the community looking to view the work.
The two types of users:
Proto Personas
I then developed several personas for each group to identify and understand their specific personalities, pain points, needs, and goals. I later elaborated on these traits in my design system to make a more efficient interface.
The Designers:
The Viewers:
Comparative Assessment
After coming to strong conclusions on the users, I assessed four other showcases with great interfaces and compelling features for reference.
#1, Lincoln School of Design: Graphic Design Showcase
The Lincoln School of Design is composed of ten different design departments and for the 2020 graduating class they had a website uniquely designed and developed for each of those departments. I am referencing the graphic design department's site because it is similar to how the CSUS site could be used and there were some interesting design decisions, interactions, and motifs I found on their virtual showcase.
What works:
The website executes a simple and heuristic interface very well. A user can easily navigate to the designer they want to see within seconds of landing on the website. They can either click on the name in the left tile or can scroll through all of the work on the right tile. A white dot responds next to the designer’s name on the left tile when their work is being displayed on the right.
What it's lacking:
Besides the simple and heuristic interface, the website does not offer much more information on the designers. It lacks insight on any emphasis on what the designers focus on is and no detail about the research and process that the designers may have done.
Also, there is a lack of consistency between the typeface and I think the SoundCloud module is unnecessary. Perhaps it’s a hierarchy issue and it's ina position of too much prominence.
Considerations:
When designing the CSUS Spring Show virtual portfolio, I will consider implementing a similar design style that is as heuristic as this one, but I will definitely be going more in-depth on the student’s identity, process, and research as it is deserving to be emphasized better than how it was done on this site.
#2, The Glasgow School of Art Graduate Showcase
The Glasgow School of Art developed a website for the entirety of their 2020 graduating class. Over 200 students were given full and in-depth virtual exhibits in this single site. This included the six different colleges they have to offer: the Innovation School, School of Architecture, School of Design (Glasgow & Singapore), School of Fine Art, and School of Simulation & Visualization. Then, in each of these respected schools, are concentrations of study that have all been divvied up. The designers and developers, in response to the different schools, created a site with many layers of hierarchy and information architecture. Despite the amount of dense information on the site the interface easy to navigate and still presents an elegant and modern aesthetic that plays off of current design and typography trends.
What works:
Since this showcase has a highly dense amount of information to present, the visual interface and layout are presented in a way where navigation becomes very detailed and offers a lot of different options. What this website does great is to highlight an in-depth look at student process and research with a tile system. Each designer designated a tile that the user can open up to get a more detailed look at the user and their work.
What it's lacking:
Although there are some nice aesthetic choices being made, I believe the information architecture of the website could have been designed better. There is a lack of hierarchy which makes it difficult to navigate at first glance. When designing for a wide range of people, we need to be empathic to those who may not have as much experience when visiting the site. Even for those more experienced, they will want to aptly navigate the interface to what they want to see, not have to search through many lines and modules of jumbled text.
Considerations:
I do thoroughly enjoy navigating this site, but I can understand how it may be difficult or too time-consuming for users to direct themselves because of the overabundance of information displayed. I will remember how this layout can be too troublesome and make sure to keep the interface simple with good hierarchy practices on the Spring Show site. Other than that, the site is well done. I am considering using something like their tile system to showcase each individual designer because it does such a great job doing so.
#3, Lincoln School of Design: Exhibitions and Museums Program
This site is a showcase for the Exhibitions and Museums department from the Lincoln School of Design graduating 2020 class. The small amount of graduating students from this program allowed the designers to create an interactive interface that feels immersive and fun.
What works:
When you visit the site you are immediately greeted with a brilliant and striking landing page. The seven designers from the program are listed in the center of the page with strong typography. The user can highlight the name of the designer and their work hovers in the tinted background, and if they would like to know more they can further explore the designer's work.
What it's lacking:
The design and execution of its functionality of this website work well, but just like the college's graphic design department showcase, it is lacking more information and detail on the designer's work and research. Though the designers do have a good bio, concentration, interests, etc… there is not enough information on their process and research. Photos of the work are not an adequate amount of information for understanding these comprehensive projects.
Considerations:
There are a few considerations that I will take from this showcase and apply to the Sac State Spring Show. I think the typography is bold and beautiful, and it very easy to navigate the website, though it is quite easy because there are only seven designers to select. It would be nice to find a way to simplify the departments to something like this because it is not only functional but visually stunning.
#4, CSUS 2020 Design Spring Showcase
The last reference I will detail is the CSUS Design Departments' virtual showcase from last year. The purpose of this website was to help the graduating students connect with opportunities for their future careers in this unprecedented new landscape and inspires them to adapt and find new avenues by which to realize their creative potential.
What works:
This site is fully interactive and has great navigational tools. The spring-themed pastel colors that are used to divvie up the three departments are useful and also look nice. The sliding interactions when clicking between the departments work very well and are a nice touch. The interactions also allow for information on the department and search/ filtering tools to help find a specific designer.
Lastly, the website transitions beautifully between being displayed on a desktop and on a mobile device.
What it's lacking:
The navigation between the departments works very well, but I think I list of displayed names, like the graphic design department from the Lincoln School of Design department, should have been used. This creates a better visual effect of the search for a specific name instead of scrolling through each designer and their work.
Lastly, process and research are missing from the student portfolios. When designing the site, there needs to be more emphasis on process and research like the
Considerations:
When designing the new CSUS Spring Showcase I will be referencing how the departments are divvied up. I think the information module is helpful also.
Other site references:
- http://csadshow.uk/class/graphics-2020/
- https://risd.gd/
- https://csus.design/
- https://www.wearecollins.com/work/medium/
- https://designlincoln.co.uk/show2020/graphic-design-portfolios/#
Competitive Audit
To summarize the assessment I had performed, I performed an audit on all of the site's features. This helped me compare and clarify why some of the sites were performing better than others.
2x2 Graph
Next, I listed all of the site's features on a graph and organized them by their amount of impact to benefit the website and the effort needed to design them. This helped me evaluate what to emphasize and prioritize in the CSUS showcase.
CSUS 2021 Spring Showcase Brand Identity
Concepting
Before building the interface of the website, I needed to come up with a new and unique identity for it. I wanted the identity to not only have exciting motifs that play off of a springtime theme but also to have a creative and interesting concept that engages every user.
Mind Mapping
With a general idea in mind, I chose four words that I thought successfully represent the Spring Show. I chose excitement, springtime, education, and exhibit and then wrote down their synonyms or other words that were related. From there I was able to draw some interesting connections that helped me pursue the concept further.
Style Guide
I first chose a color palette that reflected the excitement of graduation, but still maintained a connection to the springtime theme.
I also decided to go with a single typeface, that was strong and legible
Logo Identity:
Final Logo
Additional Branding
Ideation
User Flow
Before sketching and wireframing I wanted to map out what a particular user flow would look like for someone with a specific goal of using the site. I chose to use the proto-persona I developed Eva Walker to base this user journey off of.
Eva is looking to provide a new graphic/ UX designer with an opportunity for an internship at the design firm that she works at. She follows the link from a social media post that she was shared by a friend. Upon landing on the site, she is greeted with an interactive and fun loading page with interactive motion design, images, and illustrations. After a quick moment, an enter button appears and she clicks on it to enter. She is greeted by the simple interface. She quickly scans the interface to find the first column on the far left to pick the graphic design department, selects the pop-out button, and reads more about the department. She then closes the box and scrolls browsers the list of designers and their tiles. She finds a designer with a concentration on UX and opens his tile where she finds more about him, his works, and links for networking.
Wireframes
Desktop
Mobile Wireframes
High Fidelity
After producing the wireframes and I was sure that the information architecture would be functional, heuristic, and simple, I was able to add the visuals and brand identity that I had created to the site. Having a strong emphasis on ease for the user, I kept an aesthetic that only benefitted the function of the site. For each design program, I used a different color motion background that helped visually divvie up the programs.
Desktop
Mobile
Production
Conclusion
After the various amounts of research and refinements made to the designs, the outcome of the website is strong in several senses. To verify that all of the goals were met and desired functions were created, I added the 2021 Design Spring Showcase to the competitive audit to compare the results.
As you can see, every beneficial function that was discovered in the research has been added to the website. This now makes the 2021 Spring Showcase a unique and aesthetically interesting website with a strong identity concept—yet it also serves a more important purpose.
The main objective of the website was to create a highly functional platform for graduating designers to have a showcase their identity, portfolio, and create networking opportunities.
In conclusion, this site was able to meet all of the requirements of a successful showcase. I am excited to develop it further with more motion design and a social media campaign that will showcase individual designers and market more users to the online showcase.