Screen Shot 2022-10-12 at 3.32_edited.jpg

JACKETS FOR JOBS WEBSITE

UX/UI DESIGN & VISUAL DESIGN (FREELANCE PROJECT)

PROJECT DATE: 2018

Team

1 UX/UI Designer (me!)
1 Software Developer

Tools

Invision
Invision Studio
Sketch

Timeline

Overall: 3 months
Discovery & Research: 1 month
Design: 2 months

Met with stakeholder to gather requirements and expectations of new website
Conducted a competitor analysis of other non-profit websites to understand the non-profit space
Developed website breakdown/site map
Reviewed progress with stakeholder
Created sketches of website pages
Reviewed work with software developer
Created wireframes & prototypes for stakeholder review
Worked with a software developer to implement work

DESIGN PROCESS

OVERVIEW

Jackets for Jobs is a non-profit organization that provides people with interview appropriate clothing and training to land a job.

The goals for their website redesign were to create a look that was fresh, popped, and was colorful while maintaining their current branding. Also, to showcase their success stories and attract donors.

The target audiences for this project were people looking for a job, potential donors, and potential volunteers.

SOLUTION

I served as the solo designer for this freelance project and worked with a software developer to complete it. I helped create a new and fresh website look and feel and incorporated a way for potential donors and volunteers to partner with Jackets for Jobs.

WEBSITE PLANNING

Before starting wireframes I began planning for the structure of the website. I started jotting down my ideas in a word document and then developed a site map. I used the requirements and expectations I gathered from my stakeholder as well as the competitor analysis to develop this. Next I reviewed both with the stakeholder to ensure this was her intended direction.

WIREFRAMES

I created low fidelity wireframes to communicate the vision of each page of the website.

I presented my work to my stakeholder and went through one round of edits until I arrived at the wireframes shown below. Next I moved on to create high fidelity prototypes.

PROTOTYPES

After the wireframes were signed off on I created high fidelity prototypes. My goal was to create a clean but colorful design to meet the goals specified by my stakeholder. The stakeholder wanted to fill in content and images at a later time so I kept filler text and placeholders for images in the prototypes.