Challenge Summary
Welcome to Walden University - Prospective Student Journey Responsive Website Design Concepts Challenge. In this challenge, we are looking for your help in coming up with the initial design concepts for a responsive website that allows to have user-centered experience for the full student journey from prospect to student to alumni.
We are providing you with a wireframes which should help you in getting started with the designs!
In this challenge, we are looking for DESIGN CONCEPTS on how this Application could work. What should the user see and experience when using the application!.
NOTE: We will be awarding checkpoint prize $150 to all best submissions
Round 1
Submit your initial designs for Checkpoint Feedback
0. Generic UI Elements
1. Home Page/Landing Page (not-logged in users) (Desktop + Mobile)
2. Getting Started (Desktop)
3. Create an Account (Desktop)
4. Alert Shown after logging in (Desktop)
5. Home (User Logged in) (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
0. Generic UI Elements
1. Home Page/Landing Page (not-logged in users) (Desktop + Mobile)
2. Getting Started (Desktop + Mobile)
3. Create an Account (Desktop + Mobile)
4. Alert Shown after logging in (Desktop + Mobile)
5. Home (User Logged in)(Desktop + Mobile)
6. Learn More (Desktop + Mobile)
7. Apply (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
About Walden University:
For more than 40 years, Walden University has supported working professionals in achieving their academic goals and making a greater impact in their professions and their communities. Today, more than 47,800 students from all 50 states and more than 150 countries are pursuing their bachelor’s, master’s or doctoral degrees online at Walden. The university provides students with an engaging educational experience that connects them with expert faculty and peers around the world. Walden is the flagship online university in the Laureate International Universities network—a global network of more than 80 campus-based and online universities in more than 29 countries.
Walden offers more than 80 degree programs with more than 370 specializations and concentrations. Areas of study include health sciences, counseling, human services, management, psychology, social work, education, public health, nursing, public administration and information technology. For more information, visit www.WaldenU.edu. Walden University is accredited by The Higher Learning Commission.
Walden University is creating an all-new, user-centered experience for the full student journey from prospect to student to alumni.
Design Considerations:
- Looking for a modern, flat design approach!
- Simple, pleasant user interface that shields the user from the complexities happening behind the scenes
- Needs to be intuitive and accessible to a broad range of users
- "Uses elements of gamification without overt gamification." Nothing tacky (like badges, for example) - but rather by creating an element of delight by showing steps required/remaining; marks progress as user completes steps.
- Your design need to be responsive, please consider that while designing the pages
- 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, so we can see how the interactions fit together in the application.
- Please DO NOT COPY the layout as shown in the given wireframe, it is just a reference for content.
- We had provided some reference websites below which client likes, please go through but make sure you DO NOT COPY
- It would be great if you can provide a Style Tile for reference for developers. please refer: http://styletil.es/
- Stock Photos: Feel free to use any images related to this site
Design Size:
Please create your screens of size
- Desktop: 1200 px (width) and height as required.
- Mobile: 640 x 960 px
Apart from the above two screen sizes, please create screens with the standard breakpoints (i.e. we would like you to submit a single screen for size < 768px, screen for size ≥ 768px, screen for size ≥ 992px - see below bootstrap grid options) in mind and document the changes for each size (navigation, imagery, etc).
Resolution Reference:
http://www.iphoneresolution.com/
http://getbootstrap.com/css/#grid-options
Branding Guidelines:
We had attached a branding guidelines document (Walden University), please follow them!
References:
Client like the a step-by-step simplicity in the below websites and would like to have a designs something in that line! (Please DO NOT COPY)
- Duolingo.com
- TurboTax (turbotax.intuit.com)
Required Page:
We need below pages to be designed as a part of this challenge..
0. Generic UI Elements:
- We need a header and footer for this website
- We had given just a suggestion for the header in the wireframe, please look to improve them.
1. Home Page/Landing Page (not-logged in users):
- This need to display few text about the university.
- We need a call to action button in this page and it will take the user to “Lets Get Started”, think
- We need a full page background image for this, how you display them is up to you!
2. Getting Started:
Below steps are progressive i.e. after completing a step, they will move to the next..
Step 1 (Where do you live?):
[Please see page 2 in wireframe]
- Once the user clicks on “Get Started” in the previous step, we show this screen.
- In this initial page, we get user’s current location by asking them to “Select their territory/state or Country.
- Once the user has answered all question, they need a way to move to the next step - it would be good to allow users to move back and forth (having “next/prev” buttons would certainly help in moving back and forth but is that the only solution? do you have better ideas for this?)
Step 2: (Motivations and Interests):
[Please see page 3 in wireframe]
In this screen: there will be few questions about motivation and interests, please see wireframe for exact content!
- For the above questions, we will be displaying options (please see wireframes for options to be shown) for the user to select, looking for your thoughts on how to display these options.
- Make sure the options for the questions are consistent in design.
- Once this step is completed, user will move to the create account page.
3. Create an Account:
[Please see page 4 in wireframe]
- Once the user has answered all the previous steps, they will be prompted to create an account.
- Minimum details required to be entered are “First Name (Given Name), Last Name (Family Name), Email Address, Re-enter Email Address, Password, Re-enter Password and show a Create an Account to sign up!
- Note that, user will also have the option of creating an account using their social networks (facebook, google +, twitter, linkedin)
4. Alert Shown after logging in:
[Please see page 5 in wireframe]
- On initial login/registration, we show this screen and this helps users jump to appropriate sections!
- They will have options to skip this!
- Please follow the contents as shown in the wireframe
5. Home (User Logged in):
[Please see page 6 in wireframe]
- This is homepage for the logged in users, looking for your thoughts on what need to be shown in this page
- Wireframe has shown a few sections (Messages, Popular Conversations, Video, Top questions with an option to ask a question) to help you out on what can be in a homepage but we are looking for your ideas on what else can be shown in this page based on this website concept.
- NOTE: This page need to show a navigation and also user logged in status need to be shown!
Overall “Applicant to Student” Progress:
- We need to show an indicator that indicates the overall progress of an applicant becoming a student, this will include: Academic Profile, Admission Application, Finance Plan, Admission Application Review, Receive Application Admission Decision, Orientation and Planning”
- Please make sure this progress is collapsible thereby saves space in the page. (Please see page 8 in wireframe)
- Note: We need to design this in such a way that each of the section has its own progress and an overall progress.
- Mouse hover on each of the steps need to show a tooltip that shows more information on the purpose of that step (please see page 7 in wireframe)
6. Learn More:
[Please see page 9 in wireframe]
- Learn more allows the user to view various details about a program
- User will be able to choose their level of degree, area of interest, program of interest
- Based on the chosen program, we show some of the details for each programs “Cost, Career options, Duration, Courses available under this program (specializations), about credit”
- How do you think we can display the information for above sections? (New page, Modal window, etc..? ) we are looking for your thoughts on this!
7. Apply:
This page allows the user to create their academic profile and apply for a program of their choice.
Overview of the Application progress:
- We need to show a progress while the user is in this (Apply) application admission page
- Whenever the user is in a particular step, then corresponding step icon/button need to be active.
Step 1: Create Academic Profile
[Please see page 10, 11 in wireframe]
- We show a mini wizard for the user to complete few steps to create their academic profile.
- How do you think these steps need to be shown in designs?
- Should we allows the user to save their progress as a draft?
- We had shown couple of steps on how a user creates academic profile..note that once a step is complete we need to indicate it in some way!
- Once they complete all the steps, they will be able to submit their academic profile to the university.
Step 2: Program Confirmation:
[Please see page 12 in wireframe]
- This steps shows the program chosen by the applicant.
- They will have option to change the program.
- Please see page 13 in wireframe to get an idea on how a user can change the program!
Step 3: Admission Requirements
[Please see page 14, 15, 16 in wireframe]
- This needs to show a list of documents that needs to be submitted by the user, how do you think we need to handle this?
- You can see various status that a user sees while “Please Submit, Pending Verification and Verified”, come up with design thoughts on how these can be shown!
- Please refer the wireframe for the content and show us the best possible way to provide a great user experience for users!
Target User:
- Prospective Students who want to explore their options.
- Prospective Students who want to create an account and begin filling out their profile, receive help from an Enrollment Advisor.
- Prospective Students who are ready to select their program and apply.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- How well you minimise the number of clicks required to complete the process and so get the user to the content as quickly and easily as possible
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.