Challenge Summary
Welcome to the FAST!! Calix Service Station Mobile Concept Challenge! This contest is focused on creating a design concept for a mobile version of the client's Service Station tool. We would like to see your initial ideas and design concepts for this tool: in terms of navigation, page layout, and overall look and feel. There are only four (4) screens required for this contest.
This is a FAST!! contest, so please be aware of the timelines and if you have any questions and ask any questions in the forums!
Round 1
Initial / Rough Concept for Two (2) Screens
- My Cases Screen
- Create New Case Screen
- Any additional screens or iOS functionality notes you wish to include
Round 2
Final Design for all Four (4) screens
- My Cases Screen
- Create New Case Screen
- Case Details
- Case Comments
- Any additional screens or iOS functionality notes you wish to include
Calix is a North American provider of broadband communications access systems and software which enable communications service providers to connect to their residential and business subscribers. Currently, users can only access the cloud-based Calix Service Station from a web browser, where the interface is optimized for desktop viewing and interaction. Calix is looking to the community to help them optimized this tool for smart phone users.
Contest Details
We are looking for design concepts for this mobile interface, we'd like to see how you optimize all this information in terms of visual design, as well as interaction design. Explore the best way to represent the navigation and screen flow, and think about how to make important actions easily accessible.
- Explore the provided company and brand - the application needs to look good!
- Create design concepts based on the provided user experience and goals
- What additional features might be useful?
- How can the functions and navigation be optimized?
- How should things be grouped to keep the experience useful and simple
There are four (4) screens required for this contest - see details below.
Requirements
- Please create your design for iPhone 5 size: 640 x 1136 px at 326 ppi (retina - portrait orientation only).
- Icons: The desktop version of this tool uses the provided three icons (Icons.png) for 1) creating a new technical service case 2) creating a new software request case and 3) creating a new RMA request case. It would be a bonus if you would reimagine these icons for the 4th screen, but base them on the same visual concept so the transition from desktop to mobile is easy for the user.
- iOS: The client would like to take advantage of iOS native functionality / interactions, so please consider this in your concept and either include additional screens to illustrate intended transitions / interactions OR include a note / text file where you explain your ideas.
- Make sure your design adheres to the iOS Human Interface Guidelines and utilizes the capabilities and design strategies of iOS 7 in the best way.
Fonts and Colors
- The logo is attached for color and styling reference (CalixLogo.zip)
- Complete Branding guidelines are available on calixstylesite.com
Login details: Username: Calix
Password: Purple
- Please use colors (purple and orange) from this provided brand information, only. The client would prefer light backgrounds for reading data and a clean / simple UI overall.
- Typography: Please use Arial or Helvetica variations for all fonts. The client's font will be swapped in after the contest. Text should be crisp / at a readable size for easy reading and use of bold & italic should be kept to a minimum, if used at all. Please use shades of grey instead of black for any dark text on white backgrounds.
Screen Content Details
The following content for all four (4) of the screens is detailed, below. You are free to re-imagine how this content would be displayed on the screen - including coming up with new ways to allow the user to interact with the required elements -for example: the ability to search could just be search form field on the screen OR it could be just a search icon, which would launch a search form element. In cases such as this, where you need more screens to show all elements, please include any additional screens that would convey your idea.
1. My Cases screen
This is the main screen that the user sees, after login. It is a list of all cases that the user has access to with this tool. Content for this screen is:
a. The page title (My Cases)
b. The ability to search
c. The ability to filter their cases list. Note that user can filter: by case number, by modified date, by urgency, by status, by owner. Note that "closed cases" or "recently viewed" are some optional view options that you are free to include if you think they would be useful? Ultimately, it is up to you how these options would be best presented to the user.
d. Their cases / Results list (summary data) and the ability to click on / view the details of each case. Note that each result must contain the following data:
---- Case Number: 00415966
---- Record Type: (please show at least one each of these 3 types: "technical service request", "software request" and "RMA Request")
---- Contact Name: Jacklongnamus, Elizabeth
---- Status: unassigned
IMPORTANT: The client would like the ability to 1) click somewhere to expose some more of the data fields on this screen (see more fields, below) and 2) click somewhere else to go to the case details screen.
e. The ability to create a new case (button or icon?)
2. Case Details screen
This will be the full case details (and related action options) that a user sees when he/she selects a case in "my list" screen. Content for this screen is:
a. The page title (Case Details)
b. The complete data for this case would be available here. The user will have to scroll to see it all, so there is no need to include it all here, but show whatever fits in your design, from this example data:
---- Case Number: 00415966
---- Record Type: (please show at least one each of these 3 types: "technical service request", "software request" and "RMA Request")
---- Contact Name: Jacklongnamus, Elizabeth
---- Status: unassigned
---- Account Name: Calix Internal Order
---- Owner: Hamlin, Christina
---- Modified: 1/16/2014 @ 3:12 PM
c. the actions and comments for this case would naturally fall below the data, but we think that it will be a better experience for the user if these options are either available above the data, OR even in such a way that they are available/visible at all times.. We are looking to you to help us realize the best UI for the user here.
The available actions are:
- Edit Case
- Close Case
- Attachments (view or add new)
- Comment (view and / or add new)
Note that these can be buttons or icons... up to you)
d. "back" button (returns the user to the case list)
3. Case Comments screen
This will be where the user can view comments related to a case and also add a comment. Content for this screen is:
a. The page title (Case Comments)
b. view of exisitng comment(s). You can show as many or as few comments as fits. Each comment will consist of this content:
---- comment meta data: "Posted By Christina Hamlin on 1/16/2014 @ 4:24 PM"
---- comment content: "(use a sentence or two of lorem for comment text please)"
c. the ability to add a comment (comment text input and "cancel" and "post" buttons). Note that this form can be visible at all times, shown above the other comments, OR triggered by click on some page element. If you use a button or icon to trigger this element, please include an additional screen to show this element.
d. "back" button (returns the user to the case details) AND "home" button (this can be home or my cases text, or an icon)
4. Create New Case screen
This will be where the user creates a new case. Content for this screen is:
a. The page title (Create New Case)
b. links / buttons to the three (3) possible case types they can create, ie
---- new technical service case
---- new software request case
---- new RMA request case.
NOTE: please see information / notes on icons for these three options in the "Icons" notes, above.
d. "back" button (returns the user to the case list)
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
Target Users
- Internal and external users who need to check on their cases or create new cases.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should feel iOS native and function like a mobile application
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.
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.