Challenge Summary
Welcome to "BrightFuture - Customer Self Service Portal Responsive Design Challenge". We are an international company that delivers specialist services for people across Britain and around the world to enable them to create better futures for themselves and their communities. This support can consist of getting someone off benefits into long-term employment, or supporting people with convictions to meet their needs and aspirations. We require a stronger self-service offer for our customers and right now, we need the topcoder community's help to create the look and feel for our new web app, which will be built on top of Salesforce. This web application will let our customers view and enter information about themselves so we can tailor the kind of help we give to them. We've created wireframes that give some details about the screens that need to be created in this challenge. We are looking for the best UI/UX concepts for this application. Join this fun challenge now!!
Round 1
01. Home screen
02. Taking Assessments and viewing the result Screens
03. Job Search Screen
Round 2
01. Home screen
02. Taking Assessments and viewing the result Screens
03. Job Search Screen
04. Searching for courses (internal and external) Screen
05. Contact with BrightFuture (Live Chat) Screen
Background Overview
We are a leading provider of services to help those in society with complex needs to progress from social exclusion to social inclusion. The company was established to deliver specialist and tailored services for people with varying and often complex needs to enable them to create better futures for themselves and their communities. Generally speaking our employability services help long term unemployed people back into work. We assess the customers' need, offer tailored support (often training) and help with job search to secure sustainable employment. Traditionally we have always done this face to face with the customer in one of our offices.
However there is a growing need for more self-service and essentially the aim of the app is to allow the customer to interact with our company and our services and do whatever they would be able to do in the office, remotely via the app. The main functions/requirements and some mock ups have been provided. See more details below!!
Design Consideration
- Use "BrightFuture" as the application name for now.
- We need to be aware of bandwidth constraints. We will be deploying this app in some rural locations with limited broadband connections. Therefore we need to carefully consider use of any rich media type.
- We often have significant number of customers with poor literacy/numeracy and ICT skills. Therefore this should be considered in the design.
- The most significant/important elements of the self-service are taking Assessments and viewing the results, Job Search, Searching for courses (internal and external), Contact with BrightFuture (Live Chat)
- User Experience is very important.
Screen Sizes
- Mobile: 750px x 1334px (portrait orientation, PRIORITY!!)
- Tablet : 1024px width and height as required
- Desktop: 1280px width and height as required
Branding Guidelines
- Follow brand-guidelines.PDF for color, style and design guidelines.
Screen Requirements :
Below are the initial screens suggestions that needs to be create in this challenge, feel free to add/edit/modify any features for better UI/UX performance :
01. Home screen
- Wf reference Page 1 "Homepage options"
- This screen needs to give a summary of the application at a glance.
- Provide access to all functionality in the self service apps
- We need your help to decide - should the central homepage use tiles or tab navigation? Or ability to switch view?
- Think up the best UI/UX for this screen.
02. Taking Assessments and viewing the result Screens
- Wf reference Page 4 "My Assessments"
- There are several screen interactions to provide for this screen.
- User can see their pending assessments in this screen.
- User can launch and complete an assessment
- User can see completed assessments
- User can view Radar chart for each assessment and view all responses for each assessment
- User can compare radar charts across multiple assessments – distance travelled
- User can view actions as an output of my assessment
- Needs Tooltip or help on every page
- Think of the best UI/UX for this screen.
03. Job Search Screen
- Wf reference Page 5 "My Job Search"
- User can search for vacancies in this page.
- Internal vacancies in our company and from external job sites
- View a list of search results
- Filter/sort the results
- User can mark a vacancy that they interested in
- User can mark vacancies that are not applicable so they don't get returned in future vacancy searches
- Apply/express an interest in a vacancy
- View my pending submissions/interviews – submission feedback
- Record my job search activity
- Tooltip or help on every page
- Think of the best UI/UX for this screen.
04. Searching for courses (internal and external) Screen
- Wf reference Page 6 "My Courses"
- Keyword search for available and upcoming master courses
- View recommended courses
- Express an interest/book myself onto a course instance that meets my needs
- View a list of courses that I am registered on
- View a list of courses that I have previously attended/not attended
- Give online feedback for a course that I have recently attended
- Tooltip or help on every page
- See Hot Courses for example - http://www.hotcourses.com/
- Think of the best UI/UX for this screen.
05. Contact with BrightFuture (Live Chat) Screen
- Wf reference Page 9 "Contact Us"
- Live agent online chat with a representative at a centralised contact centre – Live chat should be available from every page
- Send my consultant or another customer an online message (chatter)
- Video chat (skype) with a consultant at BrightFuture
- View my chatter history
- SMS history
- Tooltip or help on every page
- Think of the best UI/UX for this screen.
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.
- If you win this challenge, we will assign you to create the remaining screens via private task.
Documentation
- brand-guidelines.PDF (contains design guidelines)
- initial wf.pdf (contains wireframes for the apps)
Target User
- Employee that's looking for life improvement
- Long term unemployed people
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.