UX RESEARCH | UX DESIGN | UI DESIGN | USABILITY TEST
Umbrella:
The Future of Staffing
Overview: Umbrella takes the task of connecting the business with the worker in the most streamlined and efficient way possible. Fill shifts in the same day, pay workers easily and ensure all jobs are always completed on time. Manage your entire business from one app.
Role: Senior Product Designer
Date and Timeline: 2022/2022 - 10 Weeks +
Toolkit: Figma, Miro, Zeplin, Asana, Aha!
Project Outline
The Problem
Business owners and managers have numerous day to day tasks that require their full attention. Finding and retaining workers is something that they should not need to focus on, freeing their time for growth.
The Solutiom
A product that can be accessed from any device which will connect employers with millions of workers. Businesses can instantly fill both gig work as well as full time employment, freeing up the attention of the business owner to focus on other tasks.
Connecting workers with the right work
•
Connecting workers with the right work
Connecting workers with the right work • Connecting workers with the right work
User Personas
-
![]()
A supervisor at a large company. Day to day work involves managing multiple people while driving growth.
Steve Smith
Supervisor -
![]()
A CEO who works 80 hours per week. He has 100's of people working below him and look to him for guidance.
Bill Johnson
Business Owner -
![]()
Runs Human Resources for a mid sized company. Responsible for maintaining a trust among 50+ employees.
Amy Stevens
Human Resources
Colors Palette
Umbrella Blue
Connection Orange
Secondary Orange
Color
Umbrella Blue
Connection Orange
Secondary Orange
Grayscale Range
Hex
#12284C
#F26522
#F69320
#252525
#F4F4F4
Purpose
Highlight CTAs and key information; use sparingly to draw attention
Foundation for headers, primary backgrounds, and strong visual branding
Reserved for interactive elements - links, buttons - not for decoration
Provide readable text contrast and subtle visual hierarchy
Consistency is essential: Sticking to these approved colors maintains a unified brand experience. Rochester Blue and Dandelion Yellow are deeply recognized as the university's signature colors.
Functional use of Interactive Indigo: This color is intentionally reserved to signal interactivity. It should not be used outside links/buttons to preserve clarity and usability.
Balanced visual design: Bright accents like Dandelion Yellow uplift UI appeal, but should be balanced with neutral backgrounds for professionalism and readability.
Typegraphy
Inter is a variable font family carefully crafted & designed for computer screens.
Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
Wire Frames
The Outcome
We delivered a mobile-first redesign that streamlined navigation and prioritized the user journey across devices. A clear enrollment funnel was established with persistent calls-to-action such as Apply, Visit, and Request Info. To elevate the university’s research reputation, we introduced modular storytelling blocks featuring faculty profiles, lab highlights, and breakthrough discoveries.
The new design system emphasized WCAG accessibility compliance and scalable components, ensuring consistency across departments. Together, these solutions modernized the brand experience while aligning the site with the university’s strategic goals of enrollment growth and research visibility.
Directly aligned digital design with strategic business goals (enrollment + research).
Created a future-proof, scalable system that serves multiple audiences.
Balanced brand storytelling with functional usability.
Demonstrated measurable results in traffic, engagement, and conversions.
Strengthened the university’s position in a competitive higher-education landscape.
