Sq1 Raffle Site

UX/UI Design

Overview

The senior leadership at Sq1 often have tickets to give away to employees for events happening around the city. In order to make these giveaways as fair as possible, they introduced a raffle tool into the company's intranet. Any time tickets were available, employees could visit the raffle site, enter their name, and have the chance of being randomly selected to win the tickets. The UI for the tool they were using was looking a bit dated and there were a number of UX updates they were hoping to incorporate. I was asked to redesign the UI for the raffle system while incorporating the requested functionality improvements.

Problem

A dated UI and occasionally confusing UX coupled with a lack of needed administrative options left Sq1's internal raffle ticketing tool in need of an update. It was requested that I maintain the overall look and feel of the original tool, while simply giving it a facelift to bring it up-to-date with current UI design trends.

Solution

I updated the UX and UI for Sq1's internal raffle system by rearranging the tool's information architecture while incorporating slight gradients, large, simple iconography, and tastefully integrating drop shadows into its design.

Technologies Used

  • Sketch
  • InVision
Desktop view of Sq1's raffle ticketing system

Research

The research required for this project was quite minimal on my end since the details for the requested changes to the design and layout had already been gathered for me. Based off of the provided information, I conducted a short interview with the project manager at Sq1 to clarify some lingering questions I had and run a couple information flow questions past her. I synthesized all of the information I had to build user stories for the site to guide my design.

From the information I gathered, it became clear that there were two intended user types for this site — employees from the company looking to enter their name into a raffle and administrators in charge of creating new raffles, editing currently running raffles, and needing access to details of what employees had entered which raffles.

User Stories

As an employee on the Landing page I want to see a…

As an administrator on the Landing page I want to see a…

As an administrator on the Admin page I want to see a…

Website Goal

The goal of Sq1’s raffle site is twofold — allow employees to get details about each raffle that is currently open to enter as well as allow administrators to create, edit, and get details about current and closed raffles.

Website Breakdown

Wireframes

Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort

UX

I ensured that the UX of the site was straightforward with only the requested features included. I used large, colorful, descriptive buttons to show users how to interact with the page and pop up modals for most common tasks — signing up for a raffle, creating a new raffle, editing the details of a raffle, and seeing which employees had registered for any given raffle, ensuring users don’t have to navigate away from the page and interrupt the flow of the site. On the Admin page I included a large toggle button allowing administrators to switch the view between open raffles and those that had closed. I ensured the most pertinent information about each raffle was visible without the need to click into it to get winner and date information.

User Flow

UI

I wanted to ensure the UI for the site was clean and incorporated pieces from Sq1’s company branding including its signature red color, geometric elements, and logo. On buttons I incorporated a slight gradient and drop shadows to modernize the look and add depth to the design. I also created raffle ticket icons for use on the sign up buttons.

#E2231A

Yellow color swatch

#4D4D4D

Blue color swatch

#F5F5F5

Dark grey color swatch

#FFFFFF

Light grey color swatch

Arial

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Raffle ticket icon
Desktop view of Sq1 raffle site landing page
invision