Challenge Summary
Welcome to PSR - Student Portal Responsive Design Challenge! In this challenge we are looking to build a responsive web and mobile portal for students to access useful information and perform key actions.
The customer's company employs university students on a 1 year placement each year. This entire process of managing students, recruitment, interviews, performance reviews, resources is done manually today via email, Excel, Sharepoint. They are looking to build a salesforce.com application that manages this entire process, with 2 key elements:
1. Recruitment/General Running of the Program - Target app will be used by Student Program Leads/Supervisors to manage recruitment, interviews, candidates, job descriptions etc. While important for context, this portion will NOT be the focus of the application in this challenge.
2.Student ‘Portal’ - Target app will be used by Students as a ‘home’ for the student program to access useful information, key contacts, submit performance reviews etc. Please focus on this portion of the application for this design concepts challenge.
Round 1
Please submit your designs for checkpoint review, including at least the following screens:
- Landing Page/Home (Desktop)
- Useful Resources (Desktop + Mobile)
- Student Review Process (Desktop + Mobile)
Round 2
Please submit your final designs for review, after incorporating checkpoint feedback:
- Login (Desktop)
- Landing Page/Home (Desktop + Mobile)
- Useful Resources (Desktop + Mobile)
- Document Library (Desktop)
- Student Review Process (Desktop + Mobile)
- Surveys (Desktop)
Challenge Details:
The goal of this challenge is to design a responsive web app that covers the process of managing students, recruitment, interviews, performance reviews, and providing students with information. This application will be built with VisualForce, so keep this in mind while creating your design.
This site/portal is intended for employees working within the company that are enrolled on the UK Student Program. These users are with the company for 1 year as part of their university degree, and the aim of this site is to give them access to details relating to the program during their employment.
The primary needs are to provide a ‘home’ for students to visit to find information relating to the student program (e.g. curriculum details, upcoming events, key contacts) and complete certain actions required as part of their 1 year placement (e.g. submit review/performance management reviews). The site should be scalable so it can be enhanced in the future, with new features/sections/pages.
Try to keep your design clean and minimal, with good use of typography and icons.
Design Considerations:
- Your solution needs to be a Responsive Design solution (scalable for different device sizes)
- Scalable design: Needs to be designed in a way that allows for growth, enhancements, new modules, etc
- Desktop screen size: 1024px width and height as required
- Mobile screen size: 750px width x 1334 px height
Branding Guidelines:
- See attached BrandingGuidelines.zip
- Color Palette: See attached color_palette1.png and color_palette_Secondary.png
- Fonts and Typography: See attached typography.png The client uses the DIN Font family, please use this or any similar font.
References:
Client likes the clean, minimal design of websites like these:
- www.theranos.com
- www.mailchimp.com
Design Requirements:
0. Navigation
How should the navigation work, for a student to easily access all the sections below?
- Landing Page/Home
- Useful Resources (this might need a sub-navigation?)
- Document Library
- Student Review Process
- Surveys
- Logout
1. Login
- Username and Password fields
- Forgot Password? link
- This can either be a separate screen, or a modal, pop-up etc - whichever makes for the best user experience
2. Landing Page
This is the landing page that a logged in student would see - the following content could be included on the page
- Company Logo
- Welcome message/description (this will be text to explain the aim of the site and the intended audience - you can use one paragraph of dummy text / Lorem ipsum)
- Key Stats/Facts about the Student Program (about 3-4 bullet points of text, you can display this in whichever way you think is best - as points, as paragraph, as slideshow, as table, etc)
- Key Contacts related to Student Program
- Upcoming Events
- Useful Links
- Collaboration - Chatter, social media
3. Useful Resources (videos, PDFs, images content)
- Student Curriculum:
Details about the year long curriculum, and each activity within the curriculum, giving examples/videos from previous students and previous years, who runs each activity, where will it be located, how long is the session, what’s the objective, who’s the audience etc.
You can look at curriculum sections on any college websites and see the kind of content there for reference. This can be a separate page by itself, or it could be a section within a page - however you think is the best way for users to access the content. Sample content:
a. Banner area with featured content (image or video)
b. Paragraph explaining overall objectives (use one paragraph of lorem ipsum)
c. List of subjects or activities - each list item with details of course duration, short description, name of professor, location
d. links to academic calendar
- Onboarding documents:
Useful documents to read when first joining the company. This is mainly text: Employment details (number of holidays, key HR contacts etc.), sample content:
a. Heading
b. Few paragraphs of text
c. Number of holidays
d. Some important contacts (Firstname Lastname, email address, phone number)
- Student Challenges:
Information about the 2 challenges that run for each student year, details of next challenge (topic, groups, mentors), past examples, videos of old challenges, presentation slides etc.
���- Transport Information:
Useful information regarding transport to each site, trains, buses, timetables.
This should be quick at-a-glance information pertaining to bus and train timetables that are useful information for popular routes getting to the location.
4. Document Library
This will mainly be an archive of old files.
- Students can find their documents here - previous semesters grade sheets, submitted assignments, etc - how to best arrange this information is up to you
5. Student Review Process (2 different forms)
The students need to submit this form twice a year. Either at 6 month intervals or 12 months. The information typically included is:
a. Name
b. Profile image
c. Role
d. Supervisor
e. Student has to enter examples for 4 key skill areas with character limit of around 2000 per skill area.
This form should submit data to SFDC backend app, and allow supervisor to complete Summary Form which includes:
a. Students Name
b. Supervisor Name
c. Role
d. Summary of each of the 4 skill areas which character limit of 1000.
e. Rating for each skill area (4 picklist options)
���f. Overall Student Rating.
6. Surveys
- Questions/surveys - allow student to complete surveys throughout the year on different topics
- Ideas - allow student to submit ideas/feedback to student program leads
- Reports - create reports on survey responses with nice graphics/dashboards to show results.
Target Users:
- Students: typically 20-30 years old.
- Recruiters
- Supervisors/managers
Judging Criteria:
- Cleanliness of graphics
- Responsive Design and adapatibility to various device sizes
- Scalability
- Overall User experience
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.