Challenge Summary
Welcome to Living Progress - Social Volunteer Discovery – Style Guide Challenge!
Previously we ran a design challenge to build the screens needed for this tool and you will be provided with the storyboards we built, the storyboards provided are for desktop; the goal of this challenge is to use those screens and create a style guide for both a Desktop and Mobile interface.
Round 1
Submit your initial design for a checkpoint feedback:
- Initial style guide.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus checkpoint feedback:
- Final style guide with checkpoint feedback included.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Project Background:
Insufficient progress is being made on the most pressing social and environmental challenges facing local communities and the world we all share. One of the strongest tools the world has to turn the tide on these challenges is the power of people devoting their time and talents to these challenges as volunteers and, through that experience, inspiring enrolling others in common cause to effect change. According to the US Census, about 60 million Americans volunteer each year, which is a powerful force for good, but only about 20% of the citizenry. Moreover, the opportunity to better connect people to opportunities to make a difference is enormous on a global scale.
If we fail to inspire and connect the maximum possible people to a cause where they can make a meaningful difference, we will never solve the great challenges of our time. Martin Luther King, Jr. said, "Everyone can be great, because everyone can serve." Volunteer service should be viewed as a powerful lever for change across all the UN Sustainable Development Goals. It is through volunteering that every individual can make a meaningful contribution to this bold, global agenda. It is through these hands on experiences that individuals build empathy, new perspective, and the values of community necessary to build a sustainable, just global society.
Our vision is to transform how people discover volunteer opportunities online "from search to social". By applying machine learning, predictive analytics, and persuasive UX design to our current search--based All For Good platform, the largest catalog of volunteer opportunities on the internet, we will revolutionize how people are invited into service.
This will result in more people connecting to causes they can help with their time, talent, money, and social influence. It is ultimately through the power of people that social change happens.
Design Considerations:
- See http://medialoot.com/item/ui-style-guide-template/ for a great example of a basic style guide, for inspiration.
- Also explore these references to learn more about style guides: Reference 1, Reference 2.
- Icons ARE REQUIRED for this challenge. You must include a separate AI source file or folder with vector versions of icons - SVG versions of icons are considered a bonus by the customer!
- DO NOT use Artboards - Use a single PSD storyboard for all style guide elements.
- Please logically label all PSD layers AND group them logically AND name your groups logically! If you do not do so and win placement in the challenge, you will be required to do so in final fixes.
- Minimum touch target element size is 86px height and width for this design, but feel free to use larger sizes, where it makes sense. NOTE: Since 86px is unreasonable for tappable text / hyperlinks, make sure that any tappable text is NOT tiny and also has a good amount of padding above and below it.
- Please review the IOS Human Interface Guide for consideration: https://developer.apple.com/ios/human-interface-guidelines/
- Please familiarize yourself with the current storyboard before YOU start working!
Design Size:
- One (1) screen at 1280px wide at 72dpi and height as required.
- Please include a single layer of #ffffff over all other layers, which reduced the overall size of the file.
- IMPORTANT: For icons included your PSD-based designs, please provide transparent vector (AI OR EPS or SVG) versions of the icons in your source folder (separate from your PSD files).
Screen Requirements:
1- Colors:
Main Colors:
- Primary color.
- Secondary color.
- Accent color (up to designer)
- Shades of gray element (at least three: light, medium, dark - no black! You can include more than 3 if you like - up to you).
Chart Colors:
- Positive data.
- Neutral data.
- Negative data.
2- Fonts (you may incorporate colors with the fonts)
- Heading Font (H1, H2, H3, H4, H5, H6)
- Paragraph Font Bold.
- Paragraph Font Regular.
- Link Style.
- Unordered List.
- Ordered List.
3- Form Elements Section:
Buttons (6)
- Primary text button (style for primary action buttons on screen, example: Save).
- Secondary text button (style for secondary action buttons on screen, example: Cancel).
- Inactive text button (style for a button which is not yet active - example: user cannot hit “save” until he completes all form questions, so this button is inactive until the form is complete).
- Back button.
- Next button.
- 3 button sizes (examples of small / medium / large button sizes, with dimensions noted).
Pick lists / Single select (4)
- Closed pick list (drop select option element, before tap).
- Open pick list - none selected (drop select option element, after tap / showing some options to select from).
- Open pick list - one option selected (drop select option element, after tap / where user has tapped on a single option and there is a brief state change to selected option, before close).
- inactive pick list (where user is not allowed to select yet).
Radio / Checkbox (3)
- Radio button (two options - yes / no - where one is selected).
- Checkbox - unchecked (with related label text “Acme Option”).
- Checkbox - checked (with related label text “Acme Option”).
Text Input (4)
- Text input - before input (containing example text “you@gmail.com”).
- Text input - after input (where user has entered his personal email - use “jblack@gmail.com”).
- Text input - error state (where user has tried to login and data is incorrect).
- Textarea - with text (where user has entered some text - use some lorem ipsum here).
Search (2)
- Search element - before tap.
- Search element - after some text entry (use lorem).
Menu Multi-button, Single select (2)
- Menu / multi-button - none selected (this is a group of buttons which are combined into a single element. Only one button may be selected / active at one time. See any teehanlax ios8 template for an example of default IOS style for this.
- Menu / multi button - one button selected.
4- Alert Styles
- Show 1 - 3 Alert Styles.
5- Table Style
- Show how a small 4 column x 3 row Table would look. Use placeholder words Labels and Values.
6- Popup Elements (include “x” to close)
- Standard modal.
- Tooltip message.
7- Pagination
- Show how Pagination would look. Previous 1,2,3,4 Next
8- Image Style
- Show how an image would look. Use any of the following elements, Border, Padding, Shadow.
9- Icons Section:
- Please include all icons found in desktop storyboard.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Design Direction:
- Use previous storyboard as design direction.
Supporting Documents:
- Volunteer Screens (Google Folder Link)
- Organization Screens (Google Folder Link)
Target Audience:
- Volunteers – individual, independent end--users (Our focus in this challenge)
- Nonprofit/Causes – usually one (but could be more) administrator for a nonprofit account used to manage their volunteer opportunities.
Additionally, there are administrators who work for client who will manage user access, privileges, run data reports, manage content, etc.
Judging Criteria:
- Completeness (design includes all required elements).
- Cohesiveness (how well all elements work together, as a set).
- Cleanliness (successfully engage users in a simple way / ease-of use).
- Modernness (how well your elements fit with the current IOS UI styles).
- UI Best Practice (how well your elements follow the IOS Human Interface Guide).
- Source File Best Practice (how well your PSD source files are labeled and organized).
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 and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.