Challenge Summary
Welcome to IBM – Watson Speech Translator Services Mobile Demo Design Concepts Challenge!
The goal of this challenge to create a UI for a demo based on the Watson Services: Speech to Text; Machine Translation; Text to Speech. We are looking for design concepts, so you need to explore their individual websites and understand how they work and provide us with new design concepts for the mobile demo.
The Speech to Text service converts the human voice into the written word. This easy-to-use service uses machine intelligence to combine information about grammar and language structure with knowledge of the composition of the audio signal to generate a more accurate transcription. The transcription is continuously sent back to the client and retroactively updated as more speech is heard. Recognition models can be trained for different languages, as well as for specific domains. The Machine Translation service converts text input in one language into a destination language for the end user. The Text to Speech service uses IBM's speech synthesis capabilities to convert English or Spanish text to an audio signal. The audio is streamed back to the client with minimal delay.
In this contest we are looking for DESIGN CONCEPTS on how this Mobile Application Demo could work. What should the user see and experience when using the application?
Round 1
Submit your design for a Checkpoint feedback:
0. Basic page framework.
1. Transcribe from Streaming Audio.
2. Transcribe from Audio Files.
3. Transcription Output.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus Checkpoint feedback:
0. Basic page framework.
1. Transcribe from Streaming Audio.
2. Transcribe from Audio Files.
3. Transcription Output.
4. Translate to Spanish.
5. Output in Spanish.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
The goal of this challenge to create a UI for a demo based on the Watson Services: Speech to Text; Machine Translation; Text to Speech. We are looking for design concepts, so you need to explore their individual websites and understand how they work and provide us with new design concepts for the mobile demo.
1. Speech to Text site: http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/speech-to-text.html
demo: https://speech-to-text-demo.mybluemix.net/
2. Machine Translation site: http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/machine-translation.html
demo: http://ibmlaser.mybluemix.net/mtdemo.html
3. Text to Speech site: http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/text-to-speech.html
demo: http://text-to-speech-demo.mybluemix.net/
The basic principle is that we want a demo that:
1) lets the user speak English into the demo, which transcribes their spoken words into text (Speech to Text UI),
2) the demo then translates that text into Spanish (Machine Translation),
3) then the demo will provide audio playback of that text (Text to Speech)
Here is a demo of the functionality:
https://wb-watson-demo.mybluemix.net/
A flowchart showing how the services link together has been provided as a file attachment to this Challenge.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!): http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.
Design Goals:
- How should this application be designed?
- How quickly the user can find what he wants? What should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!
Supporting Documents:
- Flow chart example of linked services (Watson-Language-Translator-flowchart.png).
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphical elements in “vector” format, so when resize for retina versions, graphic still look sharp! It will be great if you can also provide the landscape version.
Suggested Screens/Features:
The following screens are suggested screens from us, please feel free to add other screens and features that work fine with what we are trying to accomplish here.
0) Basic framework
- How does the user navigate this application?
- it should fit within the current site layout
- Focus on the priority items and how things should be sized.
- It is up to you to decide if the different components below should fit on a single page the way it is now, on seperate screens or perhaps as panels that change based on user selection
1) Transcribe from Streaming:
- Simple interface to indicate when a user is having audio streamed into the computer’s microphone and the application transcribes what it hears
- It’s very basic right now - is there a good way to show the UI elements for setting up the transcription that will be useful and meaningful for the users?
2) Transcribe from Audio Files
- Allows the user to have the Service transcribe audio files that are provided by the system.
- Is there an effective way to let them upload their own audio files (with limitations on size, type and content)?
- It’s very basic right now - is there a good way to display the UI elements (including the library and upload options) that will be useful and meaningful for the users?
3) Transcription Output:
The section that displays the transcribed information:
- It’s very basic right now - is there a good way to display the transcribed output that will be useful and meaningful for the users?
4) Translate to Spanish:
- Insert UI elements from the Machine Translation demo in a way that fits in with Transcription Output above, then into Audio Output below.
5) Audio Output in Spanish:
- Insert UI elements from the Text to Speech demo in a way that fits in with (4) above.
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.
- The application should be designed for iOS and use the IBM design language!
Target audience:
- Anyone who needs to convert English speech to text with low latency.
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.
- Your design should possible to build and make sense as 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. 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.