Challenge Summary
Welcome to "Endeavor Communities Storyboard Design Challenge". In this challenge we are looking for the Studio Community to help us in applying Endeavor’s branding to their new community app for Desktop.
Endeavor is a global, non-profit organization that seeks out the best and brightest entrepreneurs to work with and support their operations as they scale and build high-impact businesses. Endeavor’s mission is to foster entrepreneurship wherever they operate and to that end, they also work with local business communities as they have the resources, but not the framework, to provide support services to Endeavor’s entrepreneurs.
This browser-based app will be a resource for the Endeavor community of entrepreneurs, mentors and investors to connect with each other, set challenges and manage their future business goals.
We are looking forward to your participation in this challenge!
Round 1
Submit your Initial Designs for Checkpoint Feedback:
01 - Mentor Home Page
06 - My Network
07 - Raising Capital
09 - My Company
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (01, 02, 03)
Round 2
Your Final designs with all Checkpoint Feedback implemented:
01 - Mentor Home Page
02 - Staff Home Page
03 - My Entrepreneurs
04 - My Candidates
05 - My Mentors
06 - My Network
07 - Raising Capital
08 - My Profile
09 - My Company
10 - Community Groups
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (01, 02, 03)
The goal of this challenge is to design the specified screens for a desktop application using the wireframes as your base and applying Endeavor’s branding.
This browser-based app will be a resource for the Endeavor community of entrepreneurs, mentors and investors to connect with each other, set challenges, and manage their future business goals.
For this app we are looking for the best UI/UX possibility and designs that are creative, clean and professional.
Design Considerations
- Client is looking for their branding to be applied to the existing wireframes
- Client is looking for creative ways to show information, so think about incorporating info graphic, icons, word cloud, good use of typography, etc.
- Client wants the design to reflect their culture, which is fun, innovative, and cutting edge
- Simple, Professional, Easy to Use, and Clean application design
- Make sure all elements in your designs are vectors, so they can be resized to any size.
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Wireframes
- We provided the wireframe screens as guidance on designing this app.
- The wireframes show all the required content that needs to be displayed; we are open to any suggestion or ideas on how to make a better user experience.
- Any icons on the wireframes are there for placement only; feel free to use icons that fit your design concept or to use links if you feel that is a better fit for your design
Target Devices:
- Design the screens for a desktop browser : 1280 px wide and height as needed
Branding Guidelines:
Colors:
Please follow the client’s branding guidelines, attached to this challenge
Typography:
Important: only use either Helvetica or Arial as these are the client’s brand standards for digital
Logo:
The logo is attached to this challenge (Endeavor Logo Teal.png)
Images:
Stock art is NOT allowed
Supporting Documents:
Logo: Endeavor Logo Teal.png
Brand standards:
- 2014 Endeavor Brand Guidelines Manual.pdf
- Endeavor Color Palette.pdf
Wireframes: wires_design_challenge.zip
Client website: http://endeavor.org
Required Screens:
Please refer to wireframes before starting the design of your solution.
01 - Mentor Home Page
refer to wireframe: Home-Mentor
- The alert box at the top will let the user know of any tasks they should complete
- This page shows three sections of suggested information we believe the user will be interested in based on their profile
- The left column shows their profile photo. For this challenge, design an image that will be displayed if the user hasn’t uploaded a profile photo.
- The top nav has dropdown menus; be sure to show us what those will look like
02 - Staff Home Page
refer to wireframe: Home-Staff
- This home page is for the Endeavor Staff only and lists the information they need to do their daily job
- The top half of the page shows the people assigned to that Staff member (Entrepreneurs, Mentors, Candidates)
--- On mouseover the photo displays some information about that person
--- For the Design Challenge, show the mouseover state for one of the photos
- The bottom of the page shows a list of upcoming events
- As with the Mentor home page, the left column will show the profile picture and a quick search
- If the user hasn’t uploaded their photo, we’ll display the image you design for the Mentor’s home page
03 - My Entrepreneurs
refer to wireframe: My_Entrepreneurs
- This page is a list of all the Entrepreneurs that an Endeavor Staff member manages
- The map icon will link to a list of challenges the Entrepreneur needs to complete. It was originally thought of as a roadmap but Endeavor is now thinking to call it challenges. Feel free to use another icon here.
- This page can be filtered, as the list of names can get quite long. We haven’t yet defined what the filters are for this page but we do need to show somewhere on the page that it can be filtered
- Note: My Entrepreneurs, My Candidates and My Mentors are all used by Endeavor staff and accessible from the home page. Although the information is different on each page, see if there is some way you can design them so they look like they belong together
04 - My Candidates
refer to wireframe: My_Candidates
- This page is a list of potential Candidates who are applying to be an Entrepreneur
- They will use this page to see where each Candidate is in the application process and to manage their status (moving them to the next step in the process or rejecting their application)
- There are 4 sections and filtering allows the user to display only one section at a time
- The icons in each section represent:
-- Move own arrow - moves that item to the next phase. For this Design Challenge, show us what a row will look like after a user has clicked the Move down arrow. Feel free to use a different icon or a link if you think it will better fit your design.
-- X icon - clicking on it rejects the Candidate’s application. For this Design Challenge, show us what you think the row should look like when the user clicks on one of the X icons. At a minimum the icon should show as disabled. Feel free to use a different icon or a link if you think it will better fit your design.
-- Check icon - only in the last section. Clicking this icon indicates the Candidate has been approved to be an Entrepreneur. For this Design Challenge, show us what a row will look like after a user has clicked this icon. Feel free to use a different icon or a link if you think it will better fit your design.
- Note: My Entrepreneurs, My Candidates and My Mentors are all used by Endeavor staff and accessible from the home page. Although the information is different on each page, see if there is some way you can design them so they look like they belong together
05 - My Mentors
refer to wireframe: My_Mentors
- This page is used by the Staff and shows the Mentors they manage
- The purpose of this page is to let the Staff see which Mentors have low ratings or haven’t met with anyone recently so the Staff knows to contact them and help them along
- This page can be filtered based on the dropdown
- At the bottom is a Return to Top link. We’d like to see something that is creative and noticeable without detracting from the information on the page
- Note: My Entrepreneurs, My Candidates and My Mentors are all used by Endeavor staff and accessible from the home page. Although the information is different on each page, see if there is some way you can design them so they look like they belong together
06 - My Network
refer to wireframe: My_Network
- Throughout the application we’ll give users the ability to follow a person. When they follow someone (or their company) that person will then show up in the user’s My Network.
- The people in My Network are grouped by their roles shown at the top: Entrepreneurs, Companies, Candidates, Investors
-- Users can toggle between the roles and the current role needs to be highlighted
- Within each role, the people are grouped into these sections: People I’ve Met, People I Want to Meet, and People Who Viewed Me and these sections can be collapsed
- The eyeball icon means that the person is being followed. If you click on that icon in the wires, it shows the unfollowed state for that icon. Feel free to use a different icon or a link if you think it will better fit your design.
07 - Raising Capital
refer to wireframe: Raising_Capital
- This page will be used by the Entrepreneur when they are raising money for their company
- One purpose of the page is to give them help on how to raise money (links, video)
- This is also where the Entrepreneur starts the process of applying for money by filling out the questionnaire form
- The quick search in the left column is slightly different from the quick searches on the other pages, so don’t overlook it in your storyboard.
08 - My Profile
refer to wireframe: My_Profile
- The purpose of this page is to promote the user within the Endeavor community, similar to how LinkedIn works with their profiles
- For some of the information, users can set if the information should be public or private
- The page is pretty straightforward but we’d like to see some creativity applied to how the information is displayed in both the Industry Knowledge and Skills sections. In other words, we’d prefer not just seeing a list. Look at ways typography and color can be used to bring some creativity to this page
09 - My Company
refer to wireframe: My_Company
- In addition to their profile, Entrepreneurs will have a profile page for their company
- Like their personal profile, this page will promote their company within the Endeavor community
- For some of the information, users can set if the information should be public or private
- Under Company Financials, clicking the Chart icon displays financial charts. You do not need to show the charts on your storyboard. However, being aware of the icons functionality may influence how you can design it.
- For the eyeball icon, see the description under My Network
- Under the Company Info section, if the user hasn’t completed their application information we will be showing this alert. We’d like it to be eye catching but not obnoxious; in other words, the user will notice it but it won’t shout at them.
--- The information icon in this alert box displays a text box that will slide up when the user clicks on the icon. Please show this in your storyboard.
10 - Community Groups
refer to wireframe: Community_Groups
- This page will use Salesforce Chatter, which means the layout cannot be changed
- Anything shown as a link within the feed must remain a link
- The top nav lets the user toggle between Forum and Groups; on this page Groups needs to be highlighted
Entrepreneurs who are members of Endeavor and the mentors, investors and Endeavor Staff who support them.
Judging Criteria:
- Application of Endeavor’s brand guidelines
- Originality and design execution.
- Quality of graphics
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. Do NOT use Artboards - Use a single PSD storyboard for each unique “page” plus it’s related alternate views/popups etc.
- Adobe Illustrator (AI) source files are not allowed.
- Logically group all PSD source file layers AND label both your individual layers and groups logically.
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.