Challenge Summary
Welcome to "CrowdExchange - Developer Community Design Concepts Challenge". We are in progress planning and developing out our new "CrowdExchange" developer community and are looking for initial design concepts on how the UI/UX should be designed. CrowdExchange will be an internal community portal that will be used by our employees to crowdsource open Stories (projects) and Activites (tasks) within our company. We want you to focus on the UI/UX interactions and bring simple UI solutions to how this community could work. What should the user see and experience when using the application!
We are providing wireframes - do not copy the wireframes directly. The wireframes are meant as simple guidelines around the content and features are looking to capture as part of the CrowdExchange experience. We are open to your navigation and layout concepts (top navigation, alerts, profile details and modern "dashboard" concepts)
Round 1
Initial design for client Checkpoint review:
02. Dashboard Screen (Publisher and Members)
03. Create Story & Activity Screens (Publisher)
05. Profile (Members)
Round 2
Final designs plus any Checkpoint feedback applied:
01. Homepage
02. Dashboard Screen (Publisher and Members)
03. Create Story & Activity Screens (Publisher)
04. Story & Activity Details (Publisher and Members)
05. Profile (Members)
06. Search
07: Submission Flow (Member)
About CrowdExchange
CrowdExchange is an internal developer community portal. We are looking to change how we tackle development activities and create an crowdsource model that allows our employees to tackle the type of development activities they are interested in.
User Stories
Publisher (Project Manager)
- John is a Project Manager and has development work/activities that he is looking to get done ASAP.
- John decides to use the CrowdExchange community to see if any developers are available to tackle the work.
- John logs in using his employee credentials and is immediately taken to his dashboard
- John has coding tasks that he needs to get done on his project. He goes through a very simple wizard process of creating Stories and Activities (work) that he would like to get done.
- While creating the Activities John is able to select the "process" he would like to use to get the work done. John is able to select "Assigned, Competition or Team"
- John is able to select the type of code that needs to be developed, write up details about the Activity and also provide a suggested timeline/delivery date.
- John submits the Activities he would like to get done and it goes out to the community
- John would like to be able to track and review any interest in his activities.
- John would also like to search and find developers (profiles) who might match up with the type of work he needs to get done.
- Members register for John's activities and show they are interested in tackling his activity
- John is able to review who has registered and is able to assign the activity to one of the Members.
- John and the Members should have the ability to communicate and see progress on the activity (Salesforce Chatter)
- John should be able to see a listing of his Stories and Activities and the different stages of completion
- After an Activity is complete John is able to close the Activity and mark it as resolved.
- John is also able to provide feedback on the Activity and the Developers profile.
Members (Developer)
- Bill is developer in our company and is looking at the CrowdExchange community as a way to help different project teams get their work done and also grow his profile
- Bill goes to the CrowdExchange community site and is able to learn about CrowdExchange and the different opportunities/activities that are currently available.
- Bill logs into CrowdExchange with his employee credentials.
- Bill is able to see his profile and is able to update profile details, education, technologies he likes to work with - he is able to control his profile.
- From his dashboard Bill is able to see Stories and associated Activities based on his technology preferences (so activities based on his profile settings). Bill is also able to Search for activities and see if there is anything he is interested in.
- Bill is able to see Activities that have been assigned to him (Publishers asking him to work on their Activity).
- Bill also receives Notifications of Activity assignments and he can reply with yes/no and his availability to take on the Activity.
- Bill can also search/find an interesting Activity and apply to work on it.
- After some time Bill gets a confirmation by email/and notification on his dashboard that the activities has been assigned to him.
- Bill is able to communicate with the Publisher on the Activity
- Bill should be able to report his working progress to the Publisher periodically.
- Bill is able to submit his code/solution to the Activity
- After Bill finishes the activity the Publisher will close the activity.
- Bill receives updates to his profile that the activity has been completed
Design Considerations
- Review the provided branding guidelines/colors
- What should the priority features be?
���- How quickly could you find information?
- The interface will be easy and intuitive to navigate (think Community!)
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Design Requirements
Plan for responsive design: We are only focused on Desktop for this challenge
- Desktop Resolution: 1280px width with height adjusting accordingly
Branding Guidelines
- Follow Branding_Guidelines.pdf
Required Pages
For this challenge, we are looking for the below pages to be designed/considered in your concepts.
01. Homepage
Reference wireframe Homepage
- By default, this page will be appear every time a user arrives at CrowdExchange
- There should be some marketing and "Why CrowdExchange" content on the home page
- Be aware of the page fold - show content above the page fold and content below the page fold. Important content should be above.
02. Dashboard Screen (Publisher and Members)
Reference wireframe "Dashboard (Publisher)" and "Dashboard (Member)" pages
- Important screen - think of what the priority concepts are on this Dashboard
- Do not use the wireframe layout for your concept - think about the navigation and content and how it should be presented
- First page a user will see after logging in
- This page will show summary details and recent interactions
- This page will be a quick way to access Stories and Activities
- A user should be able to quickly search from this page
- Summary Data: We would like to have the dashboard mean more than just the Stories or Activities - we think the user will want to see summary data/stats and important information they can react to. The dashboard page that would show things like total members, total stories, total activities, registrations, submissions, etc
- Stories and Activities are the major items - you can adjust the layout and navigation as Profile/Notifications tend to be at the top right. The dashboard can then use the full screen
- We like the idea of showing "Developers or Publishers I have worked with" on the Dashboard (quick way to see/contact people you are working with)
03. Create Story & Activity Screens (Publisher)
Reference wireframe Publisher "Create Story" and "Add activity" pages
- Important screen - think of this flow/wizard
- Publisher will be able to create a Story and also create Activities
- Publisher can select an existing Story to add more Activities to it
- When creating an Activity the Publisher lists requirements as part of the Activity
- See the wireframe for suggested features
04. Story & Activity Details (Publisher and Members)
Reference wireframe Publisher and Members "Story/Activity Detail" pages
- Stories are like Projects - they contain "Activities"
- Publisher will be able edit/have more features
- Member will be able to Register/see details
- We want to capture how an Activity looks/relates to a Story
- What are the priority items on these screens. Note the Activity page is more important to the Member
- See the wireframe for suggested features and content.
05. Profile (Members)
Reference wireframe Publisher "Profile" and Member "Profile" page
- The Profile is key features of this community - it will showcase skills and interests
- Publisher can see detail information about Members and Activities they might be working on.
- Publishers can contact Members.
- See the wireframe for suggested features
06. Search
Search is currently not very intuitive, we are not sure if the activity type and process type are search arguments or filter for the stories on the dashboard
- We prefer that search can be accessed from anywhere
-- User can find Story and Activities
-- User can find Community Members
-- Users can find Activities or Members based on technologies/skills
- User should be able to "take action" on search results
-- Example: Publisher can email/send invitations to Members)
-- Example: Member can register for an Activity)
07. Submission Flow (Member)
- We need to add how a Member can submit their code for an Activity that they already registered for
- A Member will needs to open the Activity details and then submit their code via the associated submission form.
- Once the code has been submitted they will be informed that the submission has successfully uploaded and will be sent for review
- Once the review is complete, Members will be able to review their score and feedback for their code submission.
- The Member can also see requirements they did not complete and provide comments when the requirement has been completed/re-upload new code
- The Activity list/layout and information needs to indicates that the review phase is complete and show list of the submissions which available for the activity from all the members that submitted.
Documentation
- wireframe.zip: as references for content and workflow (not for layout)
- Branding_Guidelines.zip: as branding guidelines style that needs to be followed in your design.
Target Audience
- Publisher: Project Managers who need work/activity "activities" done
- Members: Developers who are tackling/doing the work offered by Publishers
Judging Criteria
- Design concepts! Show us your UI/UX thoughts on this.
- 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 and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.