Challenge Summary
Welcome to another LUX Challenge! The LUX is a "Live User Experience Design Challenge" that we like to run as a fast design challenge live at a customer event or conference. The "LUX - 24HR Support Portal Design Concepts Challenge" will be run during the next 24 hours. At the end of the challenge we will take the presentation screen you create and share your collective creative talent!
We are very excited to provide this cool design opportunity to the TopCoder Design Studio Community - a fun way to showcase your FAST!! design skills!
The LUX Challenge Series provide you with an opportunity to show digital leaders from some of the largest brands in the world just how good your user interface and user experience (UI/UX) design skills are. LUX challenges are fast, fun, and have more chances for you to capture prize money.
We want to showcase how easy it is to engage the TopCoder Design Studio Community and demonstrate how well you can take ideas and turn them into great design and user experience concepts!
Note: This is our 10th LUX Challenge! You do not need previous experience to jump in and start designing!
Cash in on this great opportunity to prove your design skills! Best of luck to you all!
Challenge Details
The main goal of this challenge is to take the provided mobile design problem and design a simple, clean mobile user experience (UX)! We are looking for you to also think about this and what ideas/concepts you think might be interesting to our audience.
Challenge Timeline and Rolling Checkpoint:
The challenge will start LIVE onsite at our New Jersey Event!
- Challenge Starts at 13:00 EST 12/02/14
- Challenge Ends at 13:00 EST 12/03/14
We are offering 8 Placements! plus $50 Rolling Checkpoint prizes!
1) $1800
2) $1500
3) $1000
4) $500
5) $500
6) $250
7) $250
8) $150
Rolling Checkpoint Review ($50)
- Adam Morehead (adroc) will provide a design review if you submit your initial designs by 5AM EST 12/03/14
- Within the hour we will provide any design feedback/guidance - you must watch the forum for your feedback!
- All qualifying checkpoint submissions will win $50
~
LUX Design Problem - Mobile Support Portal
We are looking to design a modern mobile experience for a large enterprise self-service support portal. Designs need to be very simple, clean and modern using a “mobile first” thought process.
What is "self-service support"?
Large companies have support website (portals) where employees can manage their own support issues (self-service) by logging in and reviewing current company technical issues, searching for FAQ answers, managing their support requests (tickets) and reading or viewing tutorials. Support requests are things like computer problems, printer issues, software issues, phone problems etc. Many support portals are built for desktop computers and are not focused on providing a modern and engaging user experience.
Concept Solution:
We want to tackle designing a self-service support portal that allows employees the ability to manage their own support in a quick and timely manner.
The purpose of this Support Portal is: "Fix, Fulfill and Inform"
An employee and Support interact through three processes: Telephonic, In-Person and Digital
Fix = The ability for an employee to find and fix their technical support issues or request help from Support.
Fulfill = The ability to satisfy an order request (example: provide a new or updated computer/phone, request a local support technician)
Inform = The ability for the Support Portal to keep employees up-to-date on technical issues and to help educate through Tutorials, FAQ's, Videos, etc.
Scenario One:
Tom has a late night issue with his computer and is looking for solutions. Tom uses his mobile phone and opens his companies support portal. He is able to quickly navigate to current (active) support issues that other employee's are having (that might relate to his problem) and also search FAQ's relating to his company computer. Tom is able to quickly find that someone has already asked the same question/answer and he is able to solve the issue with his computer.
Scenario Two:
Tom is not able to find an answer to his problem and is unable to diagnose the issue with his computer. Tom needs to quickly talk (chat or call) with support or create a support ticket for technical help.
~
LUX Challenge Requirements
At the event we asked the audience to answer some simple questions to help have some fun with the is application. The results of the answers are listed below:
Mobile Application
- Mobile Self Service Support application that helps users solve questions by themselves.
- The name of our mobile Application: Examples: "SPOT", "NOW", "ManageIT", "Mob.IT", "ESP" (feel free to think of something else!)
Logo Inspiration - "Rubik Cube"
- Use the "Rubik Cube" to inspire your logo design!
- Think about the shape and how you can use it to inspire your application logo!
Color Palette - "Fleetwood Mac"
- Use the band "Fleetwood Mac" to inspire your color scheme
- What colors convey "Fleetwood Mac" and help inspire your application?
- We have provided some sample color palettes.. but you can use your open colors if you prefer
Design Style and Inspiration: "Flintstones"
- "Flintstones" was used to mean "Classic or Retro" - so an enduring graphic design style (so not future or modern looking!)
- Classic or Retro = great grid, great typography and simple shapes with clean color usage
- Google "Classic Graphic Design" or "Retro Graphic Design" for reference
Mobile Application Target Audience:
- Employees who need to use their Support Portal to self-help their problem or contact support
- Have some fun with this!Design Considerations
Challenge Resources
- Color Palettes: Sample colors
- Wireframes: DO NOT copy the wireframes (if you do.. everyone's designs will look the same!) focus on creating your unique approach to this project and the user experience
Mobile Storyboards - Portrait View
- Design screens for iPhone 6 portrait display = 750x1334 (You do not need to do Retina - whatever "scales" for iPhone 6)
- This is native iOS application
- We only need 7 screens plus the presentation screen - so pick/design what you think will "showcase" this application. You can create alternative screens to the one's listed.
- In these LUX challenges the “Concepts” you propose really helps the presentation
Suggested Screens:
00) Application Logo
- Create a simple logo for your application
- Something simple and clean that doesn't distract from your screen designs
01) Login/Sign In
- User will need to log into the application (as this will be a corporate application)
- Login and sercurity features are important here
- Showcase your logo design and how this application will initially look/branding
02) Dashboard
- What makes sense to be on the dashboard? (keep it simple)
- Goals of Dashboard: “Fix, Fulfill and Inform”
- Think about what is important for a self-service mobile application.
- A user needs to quickly search and quickly find recent FAQs (example: feed of employees posting and commenting on issues)
Navigation Items: What should be main navigation issues
- Search: Quickly search and quickly find recent FAQs (feed of employees posting and commenting on similar issues)
- Quickly log an issue (camera can also be used for this)
- Quickly see product tutorials (how to/PDF documents, how to/videos, how-to/diagrams)
- Quickly edit/update my company profile
- Quickly see support tickets I have created (pending or resolved, see status of pending requests)
- Log history of user questions for period of time?
- Quickly find different ways to contact support (email, phone, SMS, chat)
- Explore and think about how this screen needs to be designed!
03) Search Results
The goal is to quickly find relevant content and have it be displayed easily on a mobile device - think about spacing, size and a user to be able to tap and touch this content
- A user wants to quickly find answers to common questions.
- Search field lets a user type questions that auto-populate based on the user typing
- Search can pull back all types of content (Answers, PDF, videos, images)
- Filter results
- Search content could be tagged
- Tapping the content would take the user to a screen showing the content and details
- Answers could be in a wizard like format?
- The most popular FAQs are at the top
04) Case Monitoring
- Once a user creates a ticket regarding their question, they will be able to check their ticket progress (open, pending, solved)
- This screen will list all questions/ticket created by the user or related to the user and show the progress of their ticket
- It might make sense to enclude a timeline layout for the tickets
- Bookmark a ticket (appears on my Dashboard?)
- Explore and think how this screen needs to be designed
05) Profile
- A user can edit their Support Profile
- A user needs to quickly see devices that are associate dwith their corporate profile (device information like serial numbers or length of service)
- Preferences on how they like to be notified, location preferences, time zone preferences, etc
06) Unique Feature
Think of something unique to this application
- Does the camera allow the user to share support issues?
- Is there an "instant chat or video chat" with support?
- Is there a way to allow a Support technician the ability to "view screen"
- Is there a way to let Support know of my location? (location services?)
- Anything else come to mind? What type of support features would be useful on your mobile phone?
07) Desktop Portal Screen (see Dashboard)
- How is the dashboard viewed at desktop screen size (responsive design) a user wants to see all of their support portal tools.
- Note: the screen is not just a larger version of the mobile.
- Note: you have more screen real estate so make sure your responsive screen is used and content is displayed in a user-friendly way.
- 1366x768
08) Presentation Screen!
- We need to quickly take your designs and show it to the audience!
- If you need to - spend more time on your presentation screen as its the first thing we will show the audience!
- See attachments of great presentation screens!
- Size = 1920x1080 (16:9 Ratio)
Alternate screen - Navigation Solution
- What is your navigation solution?
- What navigation items are needed?
Judging Criteria
- How well you design the mobile application concept!
- Cleanliness of your graphics and design.
- User interface design
Submission & Source Files
Preview Image
Create your preview image as one (1) 1920x1080 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
We most likely will not have Final Fixes - Have fun!!
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.