Assignment 5: Interactive prototype & Presentation

Revisions | Interactive Prototype | Screenshots | Work Breakdown | Presentation

Revisions

Our low-fi prototype testing provided some helpful feedback on the design and functionality of the Skillshop interface. For our first interactive prototype we made some important changes to the navigation and the general layout of our site. We also went through a process of vocabulary development to ensure links and labels throughout the interface were clear and consistent.

Revised Scenarios

Abigail Reyes- "In Time for the Wedding": Job Search

Abby just got off the phone with her best friend Sabrina. Great! It Sabrina’s wedding in about 3 weeks and she has to fly to Los Angeles for the celebration. Abby has to worry about finding Sabrina a gift as well. Her last job in Boston ended 4 days ago and she has just enough money to buy a one way ticket on JetBlue to California. Abby really wants to go to Sabrina's wedding and be able to buy her a special wedding gift.  Abby has not been on the west coast for a long time and is really looking forward to catching up with her friends in Los Angeles and the Bay Area. If time and money permits, Abby wants to try attend her friend David’s big birthday bash in San Ramon next week. All she needs is some extra pocket money so she can buy Sabrina and Doug a gift, and of course buy herself a nice dress for the wedding.

After contemplating for ten minutes, Abby decides that she will fly to San Francisco in a week, work there for 2 weeks and then head to Los Angeles in time for Sabrina’s wedding. She can live with her friend Emily who lives in Berkeley. Gulping down her juice quickly, Abby reaches for her laptop and logs onto to SkillShop.com. She logs into her account and performs a search for temporary jobs in Berkeley. Apart from location details, Abby searches for jobs based on day and time. She prefers taking morning/afternoon shifts so she can socialize with her firends in the evening. The system immediately gives her 12 results for jobs in Berkeley.   Abby selects 2 of the job postings and clicks on “Apply for all checked jobs” button. “Thank Goodness I have SkillShop.com”, she thinks to herself, jumping back into bed.


Catherine Miller- "Goodbye Paper": Getting Started with SkillShop

It’s early Monday morning and Catherine arrives to her office at 8:30AM after dropping her kids off at school. The first item in her to-do list is to get familiarized with SkillShop features in order to take full advantage of the application. Last week she created a profile for her catering company and had the details uploaded to SkillShop.

She turns on her desktop computer and sips on her coffee as she waits for the machine to boot up. She is very excited about the fact that she will be able to manage most of the hiring work online now. She launches the browser and types in the URL for SkillShop. The profile along with the photo she has uploaded looks pretty nice. Last week she walked all the employees through the SkillShop application and requested that each of them create their own account and maintain their updated schedules. She clicks on “Schedule” and finds that all the employees have already updated their schedules. From the schedule she is able to see that two weeks from now she needs to find three more people for an upcoming catering event. Catherine plans to post the job requirements on SkillShop by the end of the day today. She is extremely relieved that she no longer has to sort through the paper sign-up sheets to determine her employee’s schedules.


Catherine Miller- "Jeez Louise ": Job Posting

It’s a beautiful Sunday morning outside as Catherine unlocks the office door. She decided to swing by to make sure everything was in order for the big event that evening. Although most of the staff that were on call had confirmed that they would be available, Catherine thought she would play it safe by double-checking with everyone the morning of. Today she was very glad she did. After checking her email and messages, Catherine discovers that she is one worker short. Louise, one of her core staff members seems to have cancelled

Catherine immediately logs into her Skillshop account. From her dashboard she clicks on the “Post new job” link. She enters the appropriate information for the event that evening and indicates that she is willing to pay extra because of the short notice.

She knows that the hard part is over. All that was left to do was to wait for the replies and pick the best candidate. “I think I will go have a cup of coffee from the café next door while I wait, it so beautiful outside,” she thinks to herself.


Catherine Miller - "Last Minute Madness": Employee Search

Catherine just got off the phone with Todd, her full-time chef at Berkeley Catering. Todd had called in sick over the weekend, and Catherine was wondering what to do since she was already short-staffed and had a big event coming up in 2 days. It was exam time so most of the students who work part-time had already notified her of their unavailability.

Catherine quickly logs on to her Skillshop account and clicks on the Find Employee link. She needs to find a chef in 2 days. She fills in all the requirements for the job and clicks the submit button. Immediately Skillshop returns 15 results that match her criteria and sorts the search results based on the rating the employees have received from previous employers. She clicks on the individual results to view more details about the employees and to preview their resumes. Within mintues Catherine finds the top 2 or 3 candidates she wants to contact. Glad that she has SkillShop to bank on in last minute situations like these, Catherine sips her cup of coffee and starts checking her email.


Catherine Mille
r - "What a Rockstar! ": Feedback Entry

It’s Monday morning and Catherine has arrived at her office a little early. She is in a great mood because the event she was in charge of catering the night before was a great success. She sits down on her desk, checks her voicemail and proceeds to check her email. She finds an email from Skillshop.com reminding her to post feedback for Sarah Grant, a temporary worker that Catherine hired through the Skillshop system to help out at the event the night before.

Catherine clicks on a link that takes her to a Skillshop login page. After entering her username and password she is now ready to fill out the online rating form. Catherine thinks Sarah did a wonderful job and gives her high scores in all the categories and writes a few extra positive comments about Sarah’s impressive performance and attitude. 

After submitting the form and returning to the Skillshop dashboard, Catherine clicks on the 'My Network' link to view the list of her employees and flags Sarah as a preferred temporary worker. Next time Catherine is short-staffed she will be sure to remember to call Sarah.

Revised Tasks

Task 1- Jobseeker Job Search
You are in need of some extra pocket money so you want to find a job in Berkeley for April 22nd. You are busy in the morning but can work anytime between 11AM and 5PM. You have past experience working as a server and host but prefer to find a server job because it pays better.

Task: Search for a server job that fits your availability and apply for it.

Task 2- Employer Account Signup
As an employer you heard about SkillShop, a temporary hiring marketplace for the food service industry, and you want to check it out and explore some of the system’s features and functionality.

Task: Sign up for a free user account

Task 3- Employer Job Posting
Now that you have an account with SkillShop you’ve just checked your staffing schedule for next week and notice one of your servers cancelled for a large event next Thu evening April 19th.

Task: “Post a new job” and fill out the appropriate information for the event.

Task 4 -Employee Search
As an employer you received a last minute cancellation from your full-time chef. You want to find a replacement in time for your large event in two days.

Task: Search for a chef that is available to work a day shift in 2 days.

Task 5- Employer Feedback
You get an email notification from the SkillShop system reminding you to post feedback for Abigail Reyes, a temporary worker from a recent event.

Task: From the employer dashboard find the leave feedback form and fill out the rating form for your temporary worker.

^back to top

Differences in Low-Fi and Interactive Prototype

Interface Wide Changes

One change that was made between the lo-fi prototype and the first interactive version takes effect across the entire design. Required fields of forms are now indicated everywhere by the same two cues: a red field label and an asterisk. This should not only assist colorblind users to identify required fields, but make them more obvious to other users as well.

Dashboard

The navigation of the dashboard proved to be a major stumbling block for users during testing. With two rows of tabs across the top of the page, users had difficulty both in distinguishing what was able to be clicked, and in understanding where they were at any given time. To address this problem, we simplified the top navigation bar, and moved the second one to a vertical orientation at the upper right corner of the dashboard. Our intention was to divide the navigation a.ong functional lines. The upper, horizontal bar contains navigation that is more site-related: Home, About Us, Contact Us, Logout. The lower, vertical bar contains navigation relating to functionality that is more centered around the user and tasks they may wish to accomplish: My Profile, My Network, My Messages, My Schedule, Find Employees/Find Jobs, Job Postings/My Preferences, Leave Feedback/My References.

Additionally, on the employer's dashboard, Post Job is no longer a direct link from the dashboard. Concerned that this important functionality may get lost "below the fold", we determined to move this function into the subsection of the dashboard called "Job Postings", which will always be immediately visible.

Signup Process

Participants in user testing universally mistook the step indicators at the top of the signup pages for radio buttons, so we have changed to a different style of step indicators, which should reduce user confusion.

Next, we added more optional questions to the jobseeker signup page, providing the ability for users to immediately set up default preferences for their job search. The purpose of this is to provide users with search results as soon as possible on their dashboard when they have finished the signup process.

Advanced Job Search

The advanced job search seemed to offer most of the options that users wanted, with the exception of the inability to limit the job search by wage. We added this as search criteria.

In the feedback for the lo-fi protoype, it was suggested that photographs were not necessary in the detailed views of results for job searches, and that this was something that employers may not have time to obtain and upload. After careful consideration of this, we have decided to keep the ability for employers to upload a photograph of their establishment or a logo image. We feel that in addition to providing a good anchor for displaying search results in a well-organized manner, the images will help to provide visual cues for users who have been exposed to a high volume of search results.

^back to top

Storyboards

Storyboard Task 1: As a jobseeker, find a job that fits your criteria.

Storyboard Task 2: As an employer, sign up for a free user account.

Storyboard Task 3: As an employer, post a new job to fill a gap in your schedule.

Storyboard Task 4: As an employer, search for an employee.

Storyboard Task 5: As an employer, leave feedback for your temporary worker.

^back to top

Interactive Prototype

Overview

Our process of UI implementation closely followed the scenarios we focused on. We decided to include most of the functionality associated with the tasks involved in each of our scenarios. These included Job Search, Job Posting, Employee Search, Registration, and Reputation System.

What was Left Out

Because the project is very large in scope, we decided to hone in on the parts of our system that would be most important and interesting to implement. As a result some parts of the system were intentionally left out. For example, we decided not to implement most of the internal messaging component that Skillshop would theoretically have.

But within the areas we decided to focus on, there were a few parts of the user interface that were left out. One feature that was not implemented was the ability to save any changes made to the system. For example, giving an employee a rating does not really save that rating nor does the information go anywhere. This is because most of the interface does not yet connect to a backend that handles those user requests. Most of our pages generate fake data (for example search results and schedules on the employer and employee dashboards) that closely mimics what users would be able to see in their routine interactions with the system.

The reason some of these features were not implemented was in part due to time constraints, but mainly because, for the purposes of this prototype, we were more concerned with the layout and presentation of information on the different pages of the site. We wanted to make sure that the appropriate tasks could be performed (even if results were sometimes faked) and that users would find the interactions simple and intuitive. We have, however, started an initial backend implementation that currently supports simple database interactions (such as registering a new username and password) and will grow to support more functions associated with the “search” and “reputation” and “scheduling” areas within the system. 

Tools

The interactive prototype was created through a combination of HTML, JavaScript, CSS, and PHP languages. The one tool that was used by all group members to generate the web pages was Macromedia’s Dreamweaver application. The WYSIWYG component of the software helped us better visualize designs and make many changes without actual knowledge of much HTML. We could easily include buttons, tables, text bars, and other widgets through the many easy-to-use features that the software tool provides. A general template was created and distributed in the form of an external CSS document, allowing each group member to have a starting point that could be modified to suit the needs of the part being worked on.

On the other hand, most of our group had never used this software tool in the past. Dreamweaver is a relatively advanced tool that even professionals use to help design and build webpages. As such, it took a bit of time for some of us to learn some of the basic functionality and capabilities. Also the software does not provide a simple way to include data storage functionality and links to an external database. Any part of the interface that required dynamic connection to our database had to be hand-coded using PHP and MySQL commands.

How to Run It

Our interface is built using JavaScript, HTML, and CSS. We used PHP and MySQL for the backend. The interace can be run on multiple browsers including Microsoft Internet Explorer and Mozilla Firefox.

To begin, click on the provided link and step through Tasks 1-5 listed above:
First Interactive Prototype

^back to top

Screenshots

Employer Dashboard (new interactive)
Employer Dashboard (old low-fi)

Jobseeker Dashboard (new interactive)
Jobseeker Dashboard (old low-fi)

Employer Signup (new interactive)
Employer Signup (old low-fi)

Jobseeker Signup (new interactive)
Jobseeker Signup (old low-fi)

Employer Create Posting (new interactive)
Employer Create Posting (old low-fi)

Jobseeker Advanced Search (new interactive)
Jobseeker Advanced Search (old low-fi)

^back to top

Work Breakdown

 

Saud Al Shamsi
Debbie Cheng
Alana Pechon
Bindiya Jadhwani
Meghalim Sarma
Scenario Review
50%
0%
0%
50%
0%
Prototype Construction
20%
40%
5%
20%
15%
Storyboards
20%
40%
20%
20%
0%
Writeup
35%
5%
35%
25%
0%
Website
0%
90%
10%
0%
0%
Presentation
25%
25%
25%
25%
0%

^back to top

Presentation

SkillShop Presentation

^back to top