AppExpress Cake4Kids Volunteer Work Application Concept Designs Challenge

Welcome to the AppExpress Cake4Kids Volunteer Work Application Concept Designs Challenge

The purpose of this challenge, we need your help to build UI Mockups for managing Cake requests, Orientation & Baking classes for the Cake4Kids Volunteer Users

We are looking for Design Concepts on what should the user see and experience when using the application! Read the design problem carefully and suggest the best solutions!

Good luck and we look forward to your design concepts!

Round 1

Your submitted checkpoint design solution for client review:
1). User (Volunteer) accepts Cake Requests and prepare cake for that request
2). User (Volunteer) can opt for Orientation classes
3). User (Volunteer) can opt for Baking classes
Notes :
- Any comments about your solutions, make sure you capture correct flow for every page!
- Feel free submit separated screens to explains your design solutions.

Round 2

Final pages of design solution with updated solution based on client checkpoint feedback:
1). User (Volunteer) accepts Cake Requests and prepare cake for that request
2). User (Volunteer) can opt for Orientation classes
3). User (Volunteer) can opt for Baking classes
Notes :
- Any comments about your solutions, make sure you capture correct flow for every page!
- Feel free submit separated screens to explains your design solutions.

About Cake4Kids
Cake4Kids provide free birthday cakes to at-risk youth in the San Francisco Bay Area. Cake4Kids mission is to serve San Francisco Bay Area agencies that cater to disadvantaged children and youth and to provide a service that brings smiles and hope to children who wouldn't otherwise have a birthday.

Our website is our creative direction as it is old and we are going to rebuild next year. However, it accurately portrays our colors and logo, and the designers will get a sense of how we look from that. Also, feel free to check our Social Network Sites:
Facebook: https://www.facebook.com/Cake4Kids
Twitter: https://twitter.com/Cake4Kids  
Instagram: https://www.instagram.com/cake4kids/  
Pinterest: https://www.pinterest.com/cake4kids/

Challenge Purpose
The purpose of this challenge is to come up with the look & feel and flow for Cake4Kids web-based application. We are looking for the Topcoder Design Community to help us with planning our new user interface (UI) and user experience (UX). Here're the main features of the application:
1). Managing Cake Requests
2). Selecting & listing Orientation Classes
3). Selecting & listing Baking Classes

File Downloadables
Cake4Kids-Logo.zip - Cake4Kids  Logos
Cake4Kids-Design-Theme.zip - This zip contains information about What is Cake4Kids and their latest program.
Cake4Kids-Flowchart.zip - Cake4Kids Cake Request Flowchart

Design Guidelines
- Use provided Cake4Kids logo in your Storyboard Design submission (Cake4Kids-Logo.zip)
- Refer the provided Cake4Kids Flowchart when to submit your design submission. Make the application flow make sense
- We’re looking for FUN, MODERN and INTUITIVE user interface application
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with design concepts that show out-of-the-box solutions.
- Create separate screens and provided a user flow/click-path and navigation, so we can see how the interactions fits together in the application
- What should the priority features be?
- How quickly could user find the information they need?
- Fonts: Open to Designer
- Colors: Open to Designer, but need follow provided Cake4Kids Design Theme (Cake4Kids-Design-Theme.zip)
- Use Desktop size for your submission: 1024px width and height up to your design

Submission Requirements:
1). User (Volunteer) accepts Cake Requests and prepare cake for that request
Refer application flow chart for this task(Cake4Kids-Flowchart/1.jpg)
- This screen is for Volunteers.  It’s a way to matchup volunteer bakers with kids who are having birthdays.  The volunteer bakers check out the kids with birthdays and pick who they are going to bake a cake for?
- Use table layout for Cake Request screen
- It is the main page and fulfills the main function that is to match backers up with kids who are having birthdays
- Volunteer bakers will need to log in.  Before a baker can be a part of the program, they need to be approved by the administrators.
- Show these main action buttons in your Search, Select, Confirm
- We need the ability to sort by location
- Think about how user filters the Cake request

Design Problem
1. No user authentication process.
2. Standard Salesforce object(Opportunity) used to model/simulate the cake request. Not scalable. Additionally issues when need to expose on Salesforce sites.
3. Manual posting of cake requests(opportunities) to Volunteer Spot.
4. Manual update of cake request in the system when signed up by the baker.
5. Only Baker name value captured during sign up which could potentially lead to wrong baker being signed up.
6. Specialty cakes not handled separately.
7. No reporting did such as some cake requests, monthly baker’s cakes, requests by region/location, etc.

Prerequisite
1. For each location/region, a separate (campaign) region is maintained.
2. For each location/region, the volunteer contact (called Baker) has a lookup. The Baker will be added to those regions where they have specified service/interest via web-to-lead at the time of registration.
3. Each baker will have a primary region (look up to campaign).
4. Each baker can set their preference of opting out of email notifications.
5. Each baker can specify their specialty/skills in a multi-select picklist.
6. The new cake is entered into the system via web-to-lead.
7. Once details are verified, the lead is converted to a cake request (old opportunity).
8. If the cake request has a specialty specified then, only those bakers are emailed who have that specialty listed in their skill set.
9. All bakers with matching region as of cake request will be emailed.

User Flow
1. The user receives an email about a new cake request.
2. On the initial SF Site page, the user enters their Baker id and email to access the site.
3. Baker Id and email are verified against the Contact record.
4. If Contact is active the user is displayed the page with the list of all the upcoming cake requests, for those regions where this baker services/has interest, with details information  like:
- Name,
- Delivery date,
- Delivery time,
- Delivery address,
- Age,
- Gender,
- Preferred dessert,
- Preferred flavor/color/theme etc.
5. If Contact is inactive or the Baker id and email do not match the user is shown the invalid credential message.
6. If the baker specialty skills were given, then they can view specialty cake requests as well.
7. Baker can view the cake request details in a pop-up in case the request is not already taken up.
8. Only those cake requests are visible to bakers that are open or have been signed up by that baker.
9. Baker can sign up to the cake request to bake the cake.
10. If the Baker has signed up for another cake within the last 24 hours, display a message that they can sign for one cake in a 24 hour period.
11. Baker can view the cake request that they have signed up for in a separate list.
12. Baker can opt out of a cake, for which they had already signed up. Such requests would then be visible to other bakers.

System Flow
1. Once a cake request is posted all bakers in that location/region are sent a notification.
2. Upon Baker sign up to a cake request, update status on cake request and add the baker id.
3. For all those cake requests where a baker had earlier signed up but later opted out, update status on cake request and remove the baker id.
4. For all those cake requests where a baker had earlier signed up but opted out within 14 days of cake delivery, notify the operation staff.
5. For all those cake requests where a baker had earlier signed up but later opted out, notifications should be sent at the end of the day alerting bakers for that cakes region/location being available.

Additional Information:
When a cake request comes in as a lead it has the following fields that the agency entered on our form:

- Name (child’s name)
- Company (agency name)
- Birthdate
- Address (agency address)
- Phone (agency contact’s phone number)
- E-mail (agency contact’s email)
- Case worker name (agency contact’s name)
- Delivery Date
- Delivery Time
- Age
- Gender
- Preferred Dessert
- Preferred Color/Theme
- Preferred Flavor
- Food Allergies
- Cake Description

What we show to the volunteers is:
- Preferred Dessert, flavor, color/theme
- Food Allergies
- Delivery time (it is a minimum 2 hour window)
- Delivery Date
- Delivery address (agency address from above)

The volunteers only get to see cake requests for the region they requested (i.e. South Bay, East Bay, San Francisco). We are moving to a county model to further refine this for the volunteers. They would LOVE to be able to filter by City within the county.

Here is the link to the request form:
http://www.cake4kids.org/Recipient.html

2). User (Volunteer) can opt for Orientation classes
Refer application flow chart for this task(Cake4Kids-Flowchart/2.jpg)
- The volunteer sees that an orientation class is being offered, and they sign up to take the class.  They will get a confirmation.
- Show dummy data for Orientation Classes  

Design Problem
1. No user authentication process.
2. New volunteers get a link to sign up directly. Any with the link can land directly on the page to sign up.
3. Details are manually added on Volunteer-Spot.
4. Manual updates are made in the system for a volunteer signing up.
5. No reporting did such as number signups for a class, some volunteers signed up but not attended an orientation class, etc.

Prerequisite
1. New volunteer registers on the system via web-to-lead.
2. The administrator sets the lead status to contacted, once all information is manually verified.
3. The system converts the lead to contact and sets it as inactive.
4. The system sends a welcome email to this new contact with access details (Baker Id) and URL to the SF Site to register for the event (orientation class).
5. Administrator as and when available creates new events (for orientation class) with the location, the maximum number of seats, date, etc.

User Flow
1. On the initial SF Site page, the user enters their Baker id and email to access the site.
2. Baker Id and email are verified against the Contact record.
3. If the id and email do not match the user is shown the invalid credential message.
4. If Contact is active, the user has displayed a message that you have already taken an orientation class.
5. If Contact is inactive, the user has displayed the page with the list of all the events with details about timing, location, type, etc. (of orientation class).
6. The contact/baker is allowed to enter information about another person who could attend this event along with them.
7. Only one event (orientation class) can be selected by the user to register.
8. Once the user has registered for an event, then show a message against that event as registered.
9. If the event has the maximum number of people registered then show a message against that event as full.
10. Upon the event having seat and user selecting it for registering, send a confirmation email to the user.
11. Once the user has attended the orientation class, the administrator updates the contact record-setting the orientation status and the contact as active.

Additional Information:
Here is the link to the orientation calendar:
http://www.volunteerspot.com/client/invitation/193a296b4d6328a64fba9fba6828afc156a4a126/128093/false/#!128093/false/false

They basically get date, time, and location

3). User (Volunteer) can opt for Baking classes
Refer application flow chart for this task(Cake4Kids-Flowchart/3.jpg)
- The volunteer sees that a Bakin class is being offered, and they sign up to take the class.  
- They will get a confirmation.
- Show dummy data for Baking Classes  

Design Problem
1. Manual process. Not maintained in the system.
2. Details are stored in spreadsheets.
3. Bakers are not able to view newer baking classes being organized.
4. No automated system generated a notification (email) to bakers of being registered for the class.
5. No reporting did such as the number of bakers who have taken a baking class, the number of bakers signing up for a given class, etc.

Prerequisite
1. The administrator creates new events (for baking class) with the location, the maximum number of seats, date, etc.
 
User Flow
1. On the initial SF Site page, the user enters their baker id and email to access the site.
2. Baker id and email are verified against the Contact record.
3. If Contact is active, the user has displayed the page with the list of all the events with details about timing, location, type, etc. (of baking class).
4. If Contact is inactive or the id and email do not match the user is shown the invalid credential message.
5. If the event still has seats available, then the user can click and register.
6. Only one event can be selected to register.
7. Once the user has registered for an event, then show a message against that event as registered.
8. If the event has the maximum number of people registered then show a message against that event as full.
9. Upon the event having  seat and user selecting it for registering, send a confirmation email to the user.

Value Adds
1. Seamless integration of all the processes.
2. Verification & validation checks while bakers/volunteers access system.
3. Scalable & Robust model, to take on demands of the business.
4. Removal of dependency on external systems (Volunteer Spot, spreadsheets).
5. Reduced manual interventions and more efficient tracking.
6. Streamlined Methodology for posting events (cake requests, orientation/baking class).

Additional Information
The baking class info goes out in our newsletter. It is a date/time/location and short description of the class.  Then volunteers email us if they want to go. We keep a spreadsheet of attendees so we know when the class is full.

Here is the link to the baking calendar:
http://www.volunteerspot.com/client/invitation/193a296b4d6328a64fba9fba6828afc156a4a126/374422/false#!374422/false/false

 

Target Audience
- Cake4Kids Volunteers

Judging Criteria
- Is the design styled to be appealing and desirable?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Does the design perform the function it was designed?
- Is the design easy to use and understand?

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 image files based on Challenge submission requirements stated above.

Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.