top of page
Background:
While studying UI/UX Design at the University of New Hampshire, I was matched with the Canadian company, Spotwork, for an Industry Design Project to work on a real-world project along with two other students. We collaborated with stakeholders (Marketing Manager and Director) to define a problem and design and deliver a solution over a span of four weeks.
The Problem:
Spotwork’s website does not effectively direct job seekers to their specific app where they would find all the job postings.
The Solution:
Redesign and organize the website’s content to encourage job seekers to download the app where they can start job searching. All the content focused on employers will be reorganized so there is no confusion for either user.
My Role:
I worked with two other students to share the workload as UI and UX Designers. We also conducted User Research and Testing. We reported to Spotwork’s Marketing Manager regularly throughout the project, keeping her up to date with our progress.
Tools Used:
Top of Page
.png)
DISCOVERY
Competitor Analysis Insights:
-
Pop-ups to sign up for an account.
-
Awards and testimonials.
-
Hero image that assist the header.
-
Headers that reflects the user search key words.
-
Illustrations that help user understand any lists or bullet points quickly.
-
Listing the number of active users.
-
Pop-up for email listing.
.png)
Site Map:
A main part of the problem was that the information tailored to job seekers and employers were often on the same page, and there were a lot of tabs to choose from in the top navigation bar. We reorganized the tabs and relocated most of the job seeker information to the home page so it would be more accessible.
Persona:
Discovery step 1
SYNTHESIZE & DESIGN
Ideation & Low-Fi Wireframes:
Once we synthesized our research and had a new site map, we started sketching new ideas for the overall design of the mobile site. We were also implementing their newly designed logo and other new branding guidelines. We then started making low-fi wireframes in Figma to present to our host before moving on to building hi-fidelity designs to test on users.
Synth step 2
DESIGN & PROTOTYPE
Hi-Fidelity Design:
We presented two versions of the home page layout and designs to our host, and iterated based on their feedback. Some main changes were that we added more content to the home page with details job seekers would want to see such as the 4 steps to get started, including screenshots of the app. We felt that it was very important for the user to get a preview of the app before they download it.
We also added a section with new icons about the unique benefits of using Spotwork in order to effectively and quickly inform the user about the advantages of using Spotwork.
design step 3
VALIDATE
User Testing:
Users were given a scenario to set the scene followed by some tasks to complete using an interactive prototype on their screen. They were also reminded that we were testing the usability of the site, not them- so there are no right or wrong answers.
Insights from Testing:
What worked well:
Clean layout, imagery and icons, organized, 4 steps and app screenshots
Needed fixing:
-
Confusion over what the sign up button does and why you need to click it vs. downloading the app
-
No detailed contact info was not listed on the contact page- (only in the footer)
-
Top header section is a bit busy with all the wording and buttons
-
Confusion of sign up button and “I’m an employer” underlined text so close together
-
Tagline emphasizing 24 hours and instant seems odd
Possible Solutions:
-
Re-word sign up button: learn more, get in touch, start searching, let’s get started / Depends on what info they get in follow-up email
-
Top Image: less distracting so black buttons are larger, “download our app” line larger
-
New tagline ideas:
-
Start using our mobile app designed for people seeking flexible work and instant pay.
-
Start earning on your schedule with the best mobile app to find flexible work.
​
-
Final Product:
After conducting user testing, we met and discussed what issues users had with the design, along with what was working. We implemented these new insights and came up with solutions to the issues that users found in our designs.
Once our team had the final designs for both the mobile and desktop pages, we had a final deliverables meeting with our host and walked them through our design process. We shared our prototype screen and guided them through all the pages.
Old Mobile Design
Old Desktop Design
New Mobile Design
New Desktop Design
Style Guide:
validate step 4
Figma Interactive Mobile Prototype:
Expand the embedded page below to better navigate the mobile website!
Figma Interactive Desktop Prototype:
Expand the embedded page below to better navigate the desktop website!
Outcomes & Lessons Learned:
Once our team had the final designs for both the mobile and desktop pages, we had a final deliverables meeting with our host and walked them through our design process. We shared our prototype screen and guided them through all the pages.
The Spotwork team was very pleased with our designs, and let us know that they will begin implementing our designs in the coming months. Along with all the screen designs, we included a style guide and the numbers of all the Adobe Stock images so they could license them for commercial use.
Completing a real-world project was invaluable for gaining further experience of being a part of a UX team, meeting with stakeholders, collaborating with fellow designers, and presenting my work.
bottom of page