Challenge Summary
Welcome to another LUX Challenge! The "LUX - 36HR Event Information Mobile App Design Challenge!". This the 9th in a series of "Live User Experience Design Challenges" we are running! We are very excited to provide this design opportunity to the TopCoder design studio community to showcase your FAST!! design skills!
LUX challenges provide you with an opportunity to show digital leaders from some of the largest brands in the world just how good your 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!
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 the problem and what ideas/concepts do you think might be interesting to our audience?
Challenge Timeline and Rolling Checkpoint:
The challenge will start LIVE at the Gartner Symposium/ITxpo 2014 in Japan!
- Challenge Starts at 07:00 AM EDT 10/28/14
- Challenge Ends at 07:00 PM EDT 10/29/14
Rolling Checkpoint Review ($50)
- Adam Morehead (adroc) and Blake Walles (bwalles) will provide a design review if you submit your initial designs by 07.00 AM EDT 10/29/14
- Within the hour we will provide design feedback/guidance - You must watch the forum for your feedback!
- All qualifying checkpoint submissions will win $50
Prizes Structures :
- 1st Prize = $1800
- 2nd Prize = $1500
- 3rd Prize = $1000
- 4th Prize = $500
- 5th Prize = $250
- 6th Prize = $250
- 7th Prize = $150
- 8th Prize = $150
Additional Prize! = Original (designed for this challenge) TopCoder Japan T-Shirts!
- For the first 20 Final Submissions + the winners of this challenge will get TopCoder * Appirio Japan original T-shirts (check the T-shirt design in challenge attachment!).
Challenge Resources
For this challenge we are providing a simple wireframe and design guidance for you!
REMEMBER: DO NOT COPY the wireframes exactly
- The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user experience/user interactions and show us your solutions! You can do something different or whatever you think make sense of this mobile application.
Files (available in attachment section)
- LUX9-wireframes.zip = Wireframes application for references
- LUX9-Inputs.zip = Winning questions and answers
Design Problem
- Mobile Application = Create Event/Conference Application for attendees to easily get access information regarding the event and having interaction with other attendees.
- Application Name(s) = Think of a simple name that match the apps purpose. Some thoughts: “EvTHelp”, “MyConf”, "EasyAttend”, etc.
Concept Description
Design an Event Mobile Application - this app is an application that hosting event/conference information to the potential and actual event attendees so that they can easily access event information including: Session information, Schedules, Registration, Social Data and so on.
Event Application User Scenario:
1. Kenshin is an employee of a modern IT company in Osaka, Japan and has just been assigned by his company to replace a coworker that is too sick to attend a big IT conference in Tokyo, Japan. The goal of attending the conference is for networking and providing a company presentation.
2. Kenshin doesn't know a lot about the event/conference details, he tried to contact his sick coworker but his coworker is unavailable. Kenshin's other coworkers recommend downloading the event application "EveHelp" (create a better name if possible) to learn more about the event details and sessions.
3. Kenshin downloads the event application from the the app store and see's that the application will allow him to login with his existing social media login (Facebook/Twitter).
4. Once Kenshin registers he is able to see different Events within the application. Since his event is happening soon the event is easily available (or he can search for it)
6. Kenshin is able to see details about the event/conference, event session schedules and session details. He is also able to register for his specific event from the application.
7. After registration he is able to get up-to-date information about the event/conference schedule and session details. Kenshin also learns that that the application offers social media interactions, he can invite his friends that are also attending the conference to use the application and see if they want to meetup for lunch. Kenshin is also able to see a map of the event space and what event attendee's are nearby. Since the application is using twitter timline interactions Kenshin is able to see responses and feedback from other attendee's about event activities and sessions.
8. The application is really helpful in allowing Kenshin to manage event details, session times and his productivity while at the event.
LUX Challenge Details
At the Live Event we asked the audience to answer some simple questions to help have some fun with the design of the application. The results of the answers are listed below:
Logo Inspiration - "Land Rover"
- Use "Land Rover" to inspire your logo design
- Think about the shapes and what is fun about logos
- "Strong and Durable"
Color Palette - "Sannma"
- Use "Sannma" to inspire your color palette
- Samma reminds people of blue and white (or silver)
Design Theme and Inspiration - "Beach side resort"
- This application should have a "Beach side resort"
- Relaxing, slow, open, empty
Mobile Storyboards - Portrait View
- Design screens for iPhone 6 portrait display (1334-by-750-pixel resolution at 326 ppi)
- Assume this is native iOS application
- We only need 6 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 challenge the “concepts” you propose really helps the presentation
Suggested Screens :
00. Navigation Solution
Wireframes reference 02_Navigation.png
- Provides us a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for a the application user!
01. Splash Screen and Login Screen
Wireframes reference 01_Login.png
- Provide us some cool design for the splash screen.
- Simple logo for the application with the name you're choose for the apps.
- Loading/progress bar that indicates application is launching.
- a social media login form (Facebook or twitter connect).
- Explore how this page needs to build/interact.
- Explore a simple logo mark for your APP design
02. Dashboard Screen
Wireframes reference 03_Dashboard.png
- What makes sense to be on the dashboard? (keep it simple)
- Search section to find events/conference? via form? gps location? dates? or all?
- Main navigation? (hamburger menu)
- List of upcoming event/conference in user near location by default and then being replace by list of event/conference from user search result?
- News feed from social media?
- Think and explore how this screen needs to be created!
03. Event Details Screen
Wireframes reference 04_Event_Details.png
- A screen where user will find details information about the conference/event.
- picture or maps location of the event location?
- time schedule?
- list of speakers or event attendees?
- tweet regarding event
- navigation to drilled down the events agenda?
- register to the event online?
- Think of simplicity for this screen to simplify our user to understand the event information easily
04. Agenda Screen
Wireframes reference 06_Agenda.png
- User can reach this screen if they click/tap agenda button in Event details screen.
- this screen will show complete timeline of all agenda in the event/conference.
- date and time of each agenda items, name of the agendas until the speaker and attendees list.
- user can drilled down the details of each agenda by click/tap any of the agenda list item.
- Think and explore how this screen needs to be created!
05. Session Details Screen
Wireframes reference 07_Session_Details.png
- User will reach this screen if they click/tap any agenda list item.
- this screen will provides details information about the session, speaker name and biography, what this session will talk about, status of the session (open/closed/finish), session location, session time, and register to the session.
- a navigation to see social media timeline.
- Think and explore how this screen needs to be created!
06. Timeline Screen
Wireframes reference 08_Twitter_Timeline.png
- this screen will shows attendees tweet or facebook mentioned regarding the session.
- the main purpose of this screen is to provides a way for attendees in the session to interact with each other.
- ability to post tweet via this screen.
- Think and explore how this screen needs to be created!
07. Profile Screen
Wireframes reference 10_Profile.png
- a common profile screen
- list of event has been attend and registered.
- twitter tweet and facebook post?
- Think and explore how this screen needs to be created!
08. Presentation Screen!
- This is the most important screen that you need to create in this challenge!!
- We need to quickly take your designs and show it to the audience tomorrow morning!
- 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!
Optional Screens (If you have more time) :
09. Invite for Lunch Screen
Wireframes reference 05_Invite_for_Lunch.png
- After user successfully registered to the event, they will be able to see all attendees list in one particular screen.
- user will be able to invite their friends in the attendees list to have a lunch with the user.
- ability to set up the lunch restaurant location and lunch time?
- successfully send invitation and failed to send invitation confirmation?
- Think and explore how this screen needs to be created!
10. Setting Screen
Wireframes reference 09_Settings.png
- a general setting screen to manage the apps behaviour
- general setting like use my location, keep social media credential, etc.
- my interest setting will help the app recommends what kind of event/conference suggestion will be provide in dashboard for the user.
- Think and explore how this screen needs to be created!
Design Considerations
- Focus on the design being a great mobile experience - the application should be designed for iPhone
- 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
- Give importance to the overall layout and think on how a user would interact with the content on the page.
Mobile Application Target Audience
- Event/Conference Audience/Attendees!
- Have some fun with this.
Judging Criteria
- How well you design the mobile application concept!
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 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.