Home

Case Studies

UX/UI Design

PickUP
GoldNest
Action Technical
PickUP
GoldNest
Action Technical

UI & Web Design

Allied Plastering
Fitbit App

Resume

LinkedIn logo

Allied Plastering Co.

Fall 2023

freelance project

OverviewWorkTakeaway

Freelance UI/web project for a plastering service company

Duration

6 weeks

Role

UX & Web Designer/Developer

Deliverables

Website

Team

Solo

Tools

Figma, Webflow

Case study in progress!

Project Overview

In Winter 2023-2024, I was hired by Allied Plastering Co. to redesign their website in Webflow. Allied's previous site was unexpectedly taken down and they were losing noticeable business. It was urgent I designed and published their new site as quickly as possible.

Project Highlights:

  • Conducted competitive audit.
  • Designed high-fidelity wireframes & prototypes in Figma.
  • Iterated design changes based on client feedback.
Project Goals
User Goals

Easily view plastering portfolio and provided services. Easily find contact information and file for a quote.

Stakeholder Goals

Redesign and publish live website as quickly as possible.

Brand Goals

Establish a set of brand values in line with existing company vision statement.

Research

This rebrand project provided the opportunity to conduct user research beyond the user insights we gathered previously, and understanding the needs of primary users and gym admins.

Research Goals

These are our research goals for insights

Interview Questions

We chose qualitative and quantitative questions

Interviews

Due to a sudden change in the company timeline, we only had time for
a handful of interviews. I interviewed two participants who were each members of exclusive communities.

Visualization exercises

My design team and I performed multiple visualization exercises to define GoldNest's core values, with the ultimate goal of refining its brand identity: tone, colors, typography, and logo. We began building from GoldNest's existing brand vision: "here you are never alone"

Personas

We developed mood boards to refine our brands into pertinent imagery and words. We asked ourselves what words and images come to mind when we thought of "belonging"

You'll notice that our visualizations of "belonging" revolved around warmth and nature (mountains, ocean). We defined these recurring observations as a theme of "being a part of something much larger than yourself."

From these images we developed 3 words that encapsulated these feelings.

Defining Brand Values

After 5 weeks of research, visualization exercises, and collaborative discussions, we felt ready to decide on 3 core brand values for GoldNest that would guide the rest of the branding process:

Deliverables

Logo

After 3 weeks collaboratively laying the foundations for logo work from our visualization exercises, we had a starting point.

The "nest" – a community where people come together to form genuine relationships
Digital Designs

We quickly moved away from literal representations of "G" logo designs and pushed toward abstract interpretations.

  • Play on "G" in nest shape with leaf was on brand, but a bit too cliché  – we needed to explore the more abstract
  • Two orbiting circles "coming together" encompassed our tone
Final Logo

We quickly moved away from literal representations of "G" logo designs and pushed toward abstract interpretations.

  • Play on "G" in nest shape with leaf was on brand, but a bit too cliché  – we needed to explore the more abstract
  • Two orbiting circles "coming together" encompassed our tone
Colors

Primary Colors

With colors it was important to capture but ensure our value of warmth was upheld.

  • Two orbiting circles "coming together" encompassed our tone
Blah

With newly defined brand guidelines, we began integrating designs into existing screens:

Personal Achievements

  • Designed wireframes founded on user insights and product needs for newsfeed feature - primary home screen on iOS app.
  • Led handoff for a primary app feature to development team.
  • Ideated challenge of invite system diagnosing needs of our userbase
an Ongoing Process

While we decided on the brand identity in logo, color, and typography there is still more work that needs to be done.

Independent project

A mobile solution for equitable player matching to find, organize, and establish pickup games and meaningful connections

PickUP

mobile app to find pick up games

ResearchDesignsTakeaway

Duration

Ongoing

Role

UX Designer, UX Researcher

Project Type

Independent

Tools

Figma, Flutter*

** This is a concept project **

My role: Lead UX Designer and Researcher

Responsibilities: Independent project to conduct user research, draw insights from research into design stage, build and iterate design wireframes & prototypes.

Why Design PickUP?

a strong user need

As an avid pickup Ultimate Frisbee player, I understand the existing user paint points in finding pickup sports games:

  • Frustration of organizing meetup start times
  • Difficultly securing field space when competing with scheduled extra curriculars
  • Finding equitable player matchups
  • Player safety

I can't tell you how often I've experienced concerns over player safety, or how many times I've heard from women players that they skip pickup games due to safety concerns in what tend to be male-dominated spaces.

I want to create a virtual space for players to connect, helping them improve existing pickup communities and foster new ones through the love of the sport and shared positive experiences.

Goal: "Create a virtual space for players to connect, helping them improve existing pickup communities and foster new ones through the love of the sport and shared positive experiences."

Research Process

Competitive Audit

Tools Used

Google Sheets
What are existing apps and services doing to meet this user need?

Facebook:
Reach: Global. Accessible to anyone with an internet connection.
Unique Value: Anyone can search for and join pick up groups, connecting with other players within their communities and across the world.

Meetup:
Reach: Most popular meetup app for finding, connecting, and meeting people with similar interests.
Unique Value: Large user base and huge selection of recreational activities to find and join like-minded communities.

INFINITEHOOPS:
Reach: Pick up basketball groups all around the world
Unique Value: Specifically designed for helping users find pick up basketball games.

Competitive Audit Table

My greatest competition was Facebook, which is strong at hosting pick-up group pages. Facebook’s discoverability is lacking—many groups are invite-only or are otherwise non-discoverable with the search function.

Niche apps like Plei or PickupUltimate were so specific in who they were targeting that they failed to reach a large enough user base to sustain functionality.

PickUP Unique Value

Facilitating player-to-player and player-to-group connections to help every user find a pick up game near them.

Initial Interviews

I developed a few key questions to ask interview participants:
  • How often do you play pickup games (soccer, ultimate frisbee, basketball, etc?)
  • Can you describe your current method for finding pickup games?
  • What challenges if any, do you face when looking to play a casual pickup game?
  • Which websites if any, or apps have you used to find pickup frisbee games?

Identifying User Problems

Problem:
‍
"Difficult to find pick up games with same-gender matchmaking."

Problem:
‍
"As someone new to the area, it’s difficult to find pick up groups by word of mouth or online."

Problem:
‍
"Pick up groups on sites like Facebook often show outdated meetup information."

Informed Personas

Based on user insights collected from interviewing pickup attendees, I developed two personas to characterize some of the most common user needs.

I used the “How Might We” exercise to brainstorm statements that would inspire design features based on user needs.

Early Design Process

I wanted to keep these key user insights at the forefront of my design process:

Tools Used

Figma

1. Safety and fair play is the core spirit of pickup games

2. Sense of community motivates the preservation of pickup groups

Design System

I followed an 8-point grid design system, being the most responsive system for design layout scalability between screen sizes. Scaling element sizing, spacing, and typography based on 8-pixel scaling.

*upscaled for demonstration purposes

Brainstorming

In my initial design brainstorm I made sure to include key app features that were required to meet user needs:

  • Group function + screen
  • Player matching tool
  • Profile page
  • Instant messaging feature
  • Sport and time selection

Early Wireframes

From brainstorming sketches I developed preliminary digital wireframes in Figma.

I included interactive features allowing users to narrow their search by sport. I also began developing a profile page for users to track their group and player connections. I wanted users to be able to find games nearby, which is included through a map interface on the home screen.

Early Prototypes

With testing functionality in Figma, my prototype was ready for user testing!

Blue lines indicate click paths and interaction between design elements. These interactions make it possible to test the unfinalized prototype with users in a usability study.

Accessibility

Designing an app accessible to users of all backgrounds is paramount. I followed accessibility and human interface guidelines laid out by Apple for best design standards. Including everything from button sizing, typography, colors, icons, and on.

These factors contributed to my decision to change the color scheme further along in the design process

Moderated Usability Study

With a functioning prototype I brought my design in front of potential users with the goal of testing key features like the search function.

Study Instructions:

  1. Sign up
  2. Find a pick up game
  3. Navigate to the profile page

Findings

It was unclear whether the user was logged in or not. Participant asked, “Do I need to sign up to find a game?”

One participant found that overall the details in the group page were helpful, but the UI displaying days of the week was “too busy” and “overwhelming”

Participant really liked how "joined" groups were displayed on profile page

Refining Designs

Using data collected from the usability study to iterate on designs is invaluable to improving the design and how they serve users.

Final Touches & Animations

I designed a simple onboarding animation welcoming new users to the app

At the end of the animation the user is prompted to sign up for the app

Style Guide

After finalizing designs I created a style guide to codify my design system

This style guide incorporated sticker sheet functionality so that I can easily reference and copy design elements to new features.

Takeaway

Impact

I began this project as a conceptual case study, yet I have determined that my findings from user research and my UX informed designs would benefit the pick up game community.

Will I develop this into a functioning mobile app? Maybe. This app will need continued user testing and iteration, but presents a strong case study in demonstrating and addressing this user need.

Jump to top

PickUP

mobile app to find pickup games

Jump to top

arrow
PREV
PickUP
Allied
Plastering Co
LinkedIn logo
Brian Frederick
briancfred@gmail.com
Seattle, WA