Challenge Summary
We need your help to come up with a UX solution for a mobile application that will allow users exchanging services from the food industry. In short words, the application will allow vetted locals covering shifts at restaurants, bars, country clubs, catering halls, and dinners. Users will be able to post their availability as well as business owners to post the offers.
We are looking forward to engaging users through a very simple yet useful process.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Browse Freelancers
3. Post Offer
4. Offers Set
5. Offers Details
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Login/Register
2. Browse Freelancers
3. Post Offer
4. Offers Set
5. Offers Details
6. Profile View
7. Rate Service
8. Shifts
9. Profile/Settings
10. Notifications/Activity
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile application for the food service industry.
Concept Design Goals
The application will serve business in need of-of unexpected coverage issues due to increasing in business or absent employees while providing freelance job opportunity in the foodservice industry.
The most important features you need to keep in mind:
- Speed! Being able to quickly post available shift and quickly accept them.
- Fun seamless use. This app should have a feeling of being built by the people of the food service industry, for the people of the food service industry".
- Open to target to include people looking to get work in this field with no experience. A college kid can pick up a shift as a banquet server without any need of real experience.
We expect the final design will be vibrant (colors! wisely), clean and simple. Please avoid cluttered information, we do like spacing.
Workflow
1. Business owner
- User can sing up and sign in the application.
- User can browse available freelancers.
- User can see full details of the freelancer profile. A freelancer can be added to the business owners freelancers’ pool/bench.
- User can post offers, indicating essential data as location, payment, etc. User has a pre-selected set of freelancers he wants the offer to be sent to (pool/bench). Persons who are not on this list won’t be able to receive the offer.
- User can see the requests he/she receives for any posted offer. As well as notifications for this type of activity.
- User can decide to confirm or decline an offer.
- Once the freelancer shows up and finishes the job, the business owner can mark the service as complete, and rate the transaction.
2. Staffer/Freelancer
- User can sing up and sign in the application.
- During the sign up process, the user create his/her profile, by filling out some required data (video, resume, etc).
- After completing the initial process, user is able to see the available offers nearby.
- User can see the details such as shift time, payment, etc. As well as details about the business owner.
- User can apply to any offer.
- Once the business owners accepts, the user gets notified.
- When the user finishes his task, he receives a notification indicating the business owner has marked the service as complete, from this moment, the user can rate this transaction and leave comments.
Multi-role Note
A user can be either business owner or freelancer. The application layout and navigation must support accessibility for both types of users.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to seeing your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Register/Login
User is able to create a new account and login with basic data as first name, last name, email, password. User can sign in through social networks such as linkedin, facebook, google.
In some part of the registration process, user should be able to choose the main role between Business Owner or Staffer. The required information should include:
For Business Owner
- Business name.
- Business description
- Photo.
- Address.
FYI: a business owner can have only one business associated to the account.
For Staffer
- Resume (attachment feature).
- Photo.
- Short Bio.
- Presentation video (optional).
- Hour rate.
- Address.
2. Browse Freelancers
User can see the list of available freelancers on the network. Could make good use of a map or list view, whatever you consider appropriate for the best experience.
Search or filter features would be helpful to narrow down the results, featuring the adjustable distance from office radius parameter (5,10, 15 20 miles).
User should be able to see categorize the services types as (probably as a filter parameter too):
- Hostess.
- Waiter/waitress.
- Banquet server.
- Food runner.
- Expediter.
- Bus boy.
- Bar back.
- Prep cook.
- Line cook.
- Bartender.
- Potter.
The list/set should include (or any other useful data according to you):
- Profile picture.
- Name.
- Hour rate.
- Location.
- Overall rating.
User can add or remove a freelancer as part of the pool/bench.
3. Post Offer
User can fill out information about the offer he/she wants to make to his/her selected group of staffers. Create a form or way to capture this information, including:
- Offer title.
- Payment.
- Location.
- Work Attire (options): All, black pants, shoes, shirt, white shirt or uniform provided.
- Service Type: user is able to select which service type (s) related to the offer.
- Target:
-- Freelancers pool (default): User can see/select from the list of the selected freelancers before posting.
-- Emergency pick up: it means the offer will be available to any user, not only from the pool.
User can update an offer, extend an existing shift or re-book a freelancer via the app. Consider adding access these actions somewhere.
Lightning Offer
This is a special feature that should allow the user quickly send an alert to all the pool/bench of freelancers he has in the queue. One single tap should send an alert immediately to the freelancers about a quick offer in this restaurant from this business owner. The placement of this item in the navigation is up to you, as well as the workflow as long as it’s quick!
4. Offers Set
User can see a list/set of available offers nearby. Could make good use of a map or list view, whatever you consider appropriate for the best experience.
Search or filter features would be helpful to narrow down the results. Distance range parameter would also be helpful on this feature.
The list/set should include (or any other useful data according to you):
- Offer title.
- Business owner information.
- Payment.
- Location.
5. Offers Details
User can see the details of an offer, either from the offers set page or through notifications (direct call from a business owner post).
The page information should include:
- Offer title.
- Payment.
- Location.
- Work Attire.
- Service Type (s).
- Business owner information:
-- Photo.
-- Name.
-- Business Name.
-- Address.
-- Overall rating.
User can accept or decline the offer.
6. Profile View
This page can be accessed from an offer details or browse freelancers connection, full details of a user basically. It’s the same for both roles with slight modifications on the information displayed depending on the role.
Freelancer Profile
- Photo.
- Name.
- Bio.
- Resume (attachment).
- Presentation video.
- Address.
- Overall rating.
- CTA: Add/Remove from pool/bench button.
Business Owner
- Business Name.
- Address.
- Overall rating.
7. Rate Service
Once a service is finished, users can rate among each other.
Review should include:
- Offer title
- Reviewed person information (business owner/freelancer).
- Rate (stars, thumbs up, etc).
- Comments.
- CTA: Submit button/link.
8. Shifts
This page displays “Upcoming” and “Completed” shifts. These items should display the following info at minimum (you are allowed to explore the content):
- Offer title.
- Business owner or Freelancer info (depending on the user role).
- Date.
- Review or Pending Review status (depending on the user role).
- Link to offer details page.
9. Profile/Settings
Profile Data
User should be able to see/edit his personal information. Create a page model for editing the freelancer profile data and the business owner profile data.
Payments
This section should also allocate payment methods, for receiving and paying (add/remove credit card, bank account, etc). This will be handled by a third party resource, so it’s just FYI but you need to least add a section for payments with a “Manage Payments” button which will open this third-party component (no need to design what happens after manage payments).
Referral Link
We need a section to explain a referral program. Users can invite other persons to join to benefit from rewards. This section must contain a short explanation and an evident “Invite Friend” button/link.
10. Notifications/Activity
Throughout all the workflow, users receive notifications. Create a notifications section or mechanism to help the user receive this important information (create samples for each specific situation):
- A business owner posted a job offer addressed to me (freelancer - part of the selected group of the business owner). I can accept, reject, view details.
- A freelancer has accepted a job offer I posted (business owner). I can confirm, decline, view freelancer details.
Branding Guidelines
- Open to suggestions. We like green and pink, fan of gradients and simplicity.
- Fonts open to suggestions.
- Use placeholder for the logo.
- Keep things consistent. This means all graphic styles should work together.
References
Use this for reference only. DO NOT COPY anything.
- Snagajob & Zeel: similar process (hiring services). Liked the visual features.
- Lyft: liked the simplicity of the experience, very straight forward.
Screen Specifications
- Mobile (iPhone): 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Business owners (BO) in the foodservice industry.
- Experienced people (WF - Work Force) looking for work who are in need of more income but can not commit to full-time employment (freelancer).
Background - Why it helps the users?
Work Force overall in the U.S. the Food Service Industry (15,000,000) has over a 70% turnover rate = 10,500,000 a year miss a shift. With an average of 29,000 people a day missing a shift both BO/WF need an answer to quick and reliable work. BO does not want to disrupt service and they can't afford to have an abundance of people on payroll to cover shifts.
Using this application the BO will also greatly reduce the cost of onboarding new people and payroll taxes and insurance. WF the majority of people who work in this industry in the U.S. see this type of work as transient and most have other jobs or commitments, (actors, writers, teachers, students, working mom/dads, web designers and models) that they want to continue to peruse on their time. Having the ability to work (similar to uber) on their schedule without having to commit to "daily employment" with one particular restaurant would be greatly welcomed.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.