Challenge Summary
Welcome to the "LUX4 Challenge - 23HR IBM Innovate Mobile Design Challenge!". This the fourth in a series of "Live User Experience Design Challenges" we are running! We are very excited to provide this new design opportunity for the [topcoder] design studio community to showcase your FAST!! design skills!
[topcoder] will be presenting a series of questions at IBM Innovate in Orlando, Florida. This is your opportunity to show digital leaders from some of the largest brands in the world just how good your UX design skills are. LUX challenges are fast, fun, and have more chances for you to capture prize money. We will be asking an audience of Fortune 500 executives a series of questions and their answers will help decide what type of mobile application you will design!
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 and get a great portfolio piece in the process. 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)!
Challenge Timeline
The challenge will start LIVE at the IBM Innovate event!
- Challenge Start at 5:00 PM EDT 6/2/14
- Challenge End at 4:00 PM EDT 6/3/14
Rolling Checkpoint Review
- Blake Walles (bwalles) and Adam Morehead (adroc) will provide a design review if you submit your intitial designs by 7AM EDT 6/3/14
- Within the hour we will provide any design feedback/guidance - You must watch the forum for your feedback!
Challenge Resources
For this challenge we are providing 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
- LUX4-wireframes.pdf = Wireframes and Application inspiration
- GreenDay-Color-Palettes.pdf = Color palette to use/reference
- LUX4-Inputs.zip = Winning questions and answers
- LUX4-Design-Direction.pdf = PDF of design direction
Design Problem
Mobile Application = Twitter sentiment analysis tool
Application Name(s) = "CentaMint" or "SentaMint" or simply "Ment"
For this challenge are asking you do design the mobile experience for an existing Twitter sentiment analysis tool (powered by IBM BlueMix). IBM BlueMix beta has an application that ‘measures’ real time twitter sentiment analysis against any given search - For instance, what is Twitter saying about Godzilla right now? You can try it yourself here - http://simplesentimentanalysis.ng.bluemix.net/
The User Interface is non-existent and there is a lot we can do here to take a cool ‘engine’ and turn it into a really useful mobile application!
Concept Description
The Ment mobile APP is an application that is the perfect compliment to the Twitter-verse. In real time you can see what is trending and what the general “sentiMENT” is towards a particular subject. You can take the cool interactive graphics of sentiMENT and embed it in an article to show how that topic is trending on Twitter. Or you can search sentiMENT’s trending photos to use in your own social postings. LIke a certain photo and want to use it in your TWEET with a custom message? SentiMENT enables it’s users to write custom messages on images and TWEET them out to their followers. Don’t have a photo for what you are looking for and want to upload a new photo? Use your smart phone’s camera to take a picture and upload it to sentiMENT where you can customize it and TWEET it out to the world. SentiMENT puts some hustle behind yout TWITTER muscle and takes your social network to the next level!
Logo Inspiration - "Pac Man"
See attachment for suggested shapes
- Do not copy the pac man shapes exactly - but use Pac Man as your inspiration for the app logo
Color Palette - "Green Day"
See attachment for suggested colors
- You can pick other colors that you think represent Green Day if needed
Mobile Application Target Audience - "Clark Kent"
- The target audience is Clark Kent
- Have some fun with this
- Make sure any Clark Kent images have a very clear copyright cite on the image.
Mobile Storyboards - Portrait View
- Design screens for iPhone 5 portrait display (640 x 1136)
- Assume this is native iOS application
- We only need 5 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.
- IBM would like a small but visible - “powered by BlueMix” in the design
00) Application Logo
- Create a simple logo for your application
- Something simple and clean that doesn't distract from your screen designs
- Pac Man is the inspiration
1) Welcome Page
- Design a logo for MENT and create a showcase landing page for your APP concept
- User landing page/dashboard
- We do not need a login screen - this would be native iOS
- A user might keep twitter credential or other login information within their application settings
- Navigation
- Search?
- Take photo?
- What else does this app need?
2) Navigation Solution
- Please design a navigation solution
Users should be able to:
- Browse trending topics
- Search photos
- Get real time Twitter sentiMENT on topics that they search
- Browse trending photos
- An easy way to navigate to categories (either other hashtags associated with the search - or more like categories around that search topic #videos #funnytweets #articles #images)
- Compose custom images to TWEET
- Modify their settings
- Don't forget things like profile, home etc
3) Dashboard
From the dashboard view the user can search a topic to visualize:
- View in real time trending topics and other trends in the Twittershpere w/ a visualization graphic
- See trending topics, music, photos, and how their own custom tweets are trending.
- Drill down into main topic areas to browse photos, music, and trending topics
- View their own tweets and create custom new Tweets.
4) Search Visualization
After a user has entered in a topic to visualize they will be brought to this screen where they could possibly see:
- A custom graphic/emoticon that depicts how the Twittersphere is feeling about that particular topic.
- Infographics will give more detail as to geographic breakdown of where that topic is trending and other metrics.
- A user can drill down from this page to see how a topic is trending in a country, region, or state.
- A user can also embed this visualization into an article (this is cool feature - how does a user snag the embed code?)
- Any other ideas?
5) Visualization Detail
A user can see in more detail how a searched topic is trending in different geographic areas.
- Additional statistics accompany a map showing real time trending stats about the searched topic.
6) Trending Photos
A user can browse thru trending images to pull for their own custom Tweets
- What simple details might be show here?
- Example: So if searching Godzilla, you not only get the sentiment, but you get the most popular images floating around twitter, displayed in a way that the user could easily see the images swiftly, and re-share what they love.
7) Compose Message
Allows a user to compose a message over the photo
- An image text creator - so users could take great images they are seeing and easily add nice looking fonts, visualized hashtags, etc
- Can create fun, whimsical images based on hot topics - images then get ‘rated’ based on how often they are being shared too
8) Presentation screen
- Create a presentation screen of your mobile application!
- Place your designs within an iPhone template! Showcase your submission
- This will be shown to the conference attendee's
- Make sure your presentation screen is included in your submission files
- 1024x768 (4:3 Ratio)
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.
Audience
- Challenge Audience: create a presentation screen = we want to present your user experience solution to our conference attendee's
Judging Criteria
- How well you design the provided design challenge
- 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.