Spencer Goryl

UX/UI Designer

I'm a designer specialized in UI and graphics. I have a high capacity for team work and the ability to efficiently prioritize tasks. I’m passionate about design and highly motivated to learn and improve.

BS Business Administration | Industrial Technology and Packaging Concentration | Graphic Communication Minor

- California Polytechnic State University San Luis Obispo

UX/UI Bootcamp Certificate of Completion

- UC Berkeley Extension

Hobbies

Soccer

Art

Design

Movies

Skiing

Television

Travel

Music

Some of My Favorite Movies

Some of My Art

Tahoe Blue Surf

Website Redesign

Overview:

Given 3 weeks with a team of 5 designers, we evaluated and made improvements to the Tahoe Blue Surf website. This project required advanced understanding of the users and the business.

Our Problem:

85% of charter bookings for Tahoe Blue Surf are currently done over the phone or in person, wasting the company’s time and resources

My Roles:

I mainly focused on the information architecture with the card sort and site map as well as designing the low/high fidelity.

Stake Holder Interview

“Our goal is to increase our bookings by at least 15%. (by the end of the season)”

The Hypothesis

By updating the UX of the booking process and redesigning the information architecture of the website, users will have a better understanding of the charter process leading to an increase in bookings

User Research

To test our Hypothesis statement we conducted cognitive walkthroughs and user interviews. Ultimately the one page layout of the site made it hard for users to find valuable information leading to frustration. Below are some key points from the users.

  • 1

    Users enjoyed the aesthetic of the website, claiming it made the site more “trustworthy” and “professional”

  • 2

    Upon opening site, users did not know what action to take first. Many did not even realize the site was scrollable

  • 3

    Users found the one page format tedious and belaboring due to the amount of information needed to remember

  • 4

    Important information regarding the charters were difficult to find, resulting in an increase in time taken to book

Heuristic Evaluation

We analyzed the current website to find specific usability issues. Below are 4 of the most impactful issues that we aimed to solve with our redesign.

1

Visual Overload

The video auto playing in the background along with constant animation effects causes confusion for the user. These effects also make the website extremely slow and unresponsive.

2

Content Organization

On desktop, the primary navigation is practically hidden, being just several vertical dots on the right side of the screen. Users must hover over each dot to read what they are, forcing users to reread their options

3

Help and Documentation

Currently, crucial information users must know before booking is practically hidden. In this example the frequently asked questions (FAQ’s) have important information, but can only be found after scrolling through the entire site.

4

Consistency and Standards

The booking form consists solely of text boxes. However, users expect to only type when completely necessary. In addition the formatting of the contact information on mobile runs off the page and is unable to be read.

Design Process

Card Sort

To start our design process we decided to do a card sort because of the lack of organization on the current site. All of the necessary information was reorganized into the categories below.

New Sitemap

The new sitemap, based off of the card sort is, significantly more consistent with industry standards. It will allow users to naturally understand the website upon arrival, and will drastically improve the loading time and responsiveness of the site.

Wireframes

Below is the progression from low fidelity to high fidelity for the home page of the site. We aimed to have a very clear content structure as well as to maintain the aesthetic of the old version.

Style Guide

Below is the progression from low fidelity to high fidelity for the home page of the site. We aimed to have a very clear content structure as well as to maintain the aesthetic of the old version.

Design Decisions

  • Dark theme with blue color palette
  • The dark theme was chosen to match the style of the original website, however the color is a dark gray rather than black to avoid over contrast. The blue color palette is much softer than the original to convey that the company is personal and friendly.

  • Modern Sans Serif Fonts
  • Source Sans Pro was chosen for the websites fonts because it was bold and easy to read. It also has a variety of alternate styles that enabled for good variation throughout the site.

  • Unique Buttons and Icons
  • When the default state is active the button appears very simple and matches the sites sleek design. When the hover state is active the button has a pop of color and depth. This makes the buttons feel very interactive and clickable.

The icons have a unique design with a bold outline that gives the site another pop of color against the dark background.

Test the Prototype

The fully clickable high fidelity prototype was built in Figma and prepared to be handed off to a developer

Outcomes

Moving Forward:

  • Conduct further usability testing

  • Hand off to developer

  • Evaluate KPI’s to evaluate the usability changes

We hope to remain in contact with the stakeholders and get this project handed off to a developer. Once the site goes live we will evaluate if the new design helped the company reach its goals by analyzing and evaluating various KPI’s.

Pet Network

Website Redesign

Overview:

The task was to make research driven decisions to improve a nonprofit organization website. The project was completed in 3 weeks with a team of 5 designers.

Our Problem:

The Pet Network Human Society is a small animal shelter located in the North Tahoe area. They sometimes struggle with staffing and public awareness of their services.

My Roles:

My responsibility was primarily to work on the wireframes and prototyping. I also participated in the user research process with interviews and analysis.

The Problem

We chose to address the problem that nearly 90% of shelters are understaffed. Becuse of this, we focused on improving the user flow for volunteer sign ups.

Stakeholder Interview

“If we could get 1-2 volunteers a day that would be life changing”

-Sarah, staff member

Our Hypothesis

By simplifying the application process, more people would be willing to complete this initial step thus resulting in more volunteers who can help throughout various times of the week.

User Research

58% of 30 survey participants are willing to spend 5-10 minutes applying to volunteer

7 out of 8 interviewees main pain point when volunteering is an unclear process

User Persona

Starting the Design Process

New Site Map

Mid-Fidelity Wireframes

These wireframes show the mobile version of our applications form. We felt it was extremely important optimize the application for mobile to increase the likelihood of people completing the process.

AB Testing

We felt there may be a better way for users to select their availability so we deiced to conduct an AB test. Although the results were not decisive we proceeded with variant #2 because it enabled users to be more specific.

User Scenario:

You are applying to volunteer at a pet shelter. You are only available M-F from 7AM-11AM and weekends from 2PM-6PM. Which of the following forms do you prefer?

Results (31 Participants):

54% of testers preferred the variant #2 format because it allowed them to be more specific about their availability

Variant #1

Variant #2

Style Guide

High-Fidelity Wireframes

Prototypes

You can test the fully clickable high fidelity prototype.

Before and After

The Result

By simplifying the application process, more people will complete this initial step, thus resulting in more volunteers who can help at various times of the week.

Project Antidote

Original IOS App Design

Overview:

Given 3 weeks with a team of 3 designers, we chose a complex problem and created an original solution in the form of a mobile application.

Our Problem:

The disconnect between users results in normalization of toxic behavior in online gaming environments.

My Roles:

My responsibility was to participate in the user research/analysis, design the user flow, and the high fidelity mock ups.

What is Toxic Behavior?

Any and all negative action(s) that cause mental distress when gaming

These include but are not limited to:

  • throwing the game for any reason

  • verbal/written insults and slurs

  • continued harassment outside of the game

Our Hypothesis

People who are passionate about online gaming feel a need to address toxic behaviors, particularly those that make people feel unwelcome in the community.

Interview Analysis

All interviewees have experienced or observed toxic behavior. They believe that the targeted actions and comments are the most damaging to the community.

Main Points

  • Difficult to have good experiences with new people

  • Toxic behavior has strong impact on youth

  • Toxic behavior leads to escalation

Competitor Analysis

We conducted competitor analysis for Headspace and Discord. We found that there were no direct competitors for our problem. This proved that there is a need to address this issue in the particular environment of online gaming.

Competitor Analysis: Headspace

Headspace is a subscription-based meditation and mindfulness app that includes articles on the science of meditation, podcasts to help the user meditate, and articles on best practices to manage stress.

Strengths:

It is a practical approach to mindfulness that is scientifically supported. It has a user friendly design with interesting animations.

Weaknesses:

The app uses a  paid subscription system. It requires commitment and regular use to get results.

Opportunities:

There is a desire for structured programs that prompt users to think differently.

Threats:

This app doesn't have a specific target audience and therefore is not the ideal solution for gaming community.

Competitor Analysis: Discord

Discord is a community application that allows users to create communities, known as servers, based on shared interests that can be made either public or private. The service allows for messaging, voice calling, video calling, and screen-sharing.

Strengths:

It is free to use and enables strong community building and interaction between people with similar interests.

Weaknesses:

It is difficult to manage activity in larger servers.

Opportunities:

There is a potential market for users that want an experience that promotes growth and learning as well as connecting with other users.

Threats:

There is very little barrier to toxic behavior and it does not integrate with other platforms

User Persona

(The Casual Gamer)

User Scenario

In this scenario Jackson is becoming concerned that his current gaming group’s toxic behavior is rubbing off on him. He finds himself being toxic to others as a result of the normalization in his group.

He wants to learn how to deal with toxicity and manage its effect on himself. He also would like to find a new, more positive group to join.

Someone recommends our app and Jackson is able to find a positive community with whom he can play games. He has also learned the best ways to respond to toxicity and how to help others targeted by it.

He, in turn, recommends Antidote to other gamers that were just like him in hopes of building a more positive gaming community overall.

User Flow

This particular user flow was chosen because it highlights the main focus of the app. Educating the user on how to deal with toxic behaviors.

Lo-Fi Wireframes

Mid-Fidelity Prototype

Experience our gamified learning process with the mid-fidelity clickable prototype.

High Fidelity

I designed the high fidelity with the intention of making the app playful and engaging

Outcomes

Moving Forward:

We have concluded that it is important to try to solve this widespread problem. However, through our testing we learned that an incentive or deeper game integration is necessary for the implementation of our concept.

Next Steps:

  • Develop a battle pass like reward system to incentivize users to use the app. Ex: in game cosmetics, items, emotes

  • UI elements that help distinguish the app for gamers

Crowley Case Group

Website Redesign

Case Study Coming Soon

In the meantime you can view the live website featuring my design.

UI and Graphic Desing Highlights

Original IOS App Design

Landing Page Navigation Design

I designed this unique navigation bar design for my UX Mentors personal website.

The design features a mockup that shows the user a preview of the pages that they can navigate too. This responsive design adds functionality to the homepage and grabs the users attention.

I designed a unique navigation system for the home page that simplified the sitemap and included a visual aspect to via the Mockup computer screen.

The concept behind the mockup screen was to show a preview of what pages the user can navigate to and grab their attention.

  • My Work
  • Resume
  • Contact
  • Gallery

What is Toxic Behavior?

Any and all negative action(s) that cause mental distress when gaming

These include but are not limited to:

  • throwing the game for any reason
  • verbal/written insults and slurs
  • continued harassment outside of the game

Brand Guidelines and UI Design

Logo Design

IOS App Concept Design

Package Design

My Work

Case Studies

Thank You

Contact me at