Challenge Summary
Welcome to "Contoso Media - Apps Design Concepts Challenge". In this challenge, we are looking for your initial design concepts that will help us visualize our data analytics application. We are looking for the best UI/UX concepts around this application. The overall experience should look simple, professional, sleek and modern. Should be easy to navigate and understand. This is one page requirements challenge, join with us now!!
Round 1
Initial design for client review
Round 2
All requirements as stated in challenge details with client feedback applied
Background Overview
Our company provides banking service and got a lot of potential raw data which comes from our internal employees event, customers and call centres. We've recorded the customer's calls when they ring us. We've also has all its own internal videos and voice recordings (e.g. marketing, conference speeches, employee training videos).
We already built an application to file all these voice recordings and videos as text assets, index them and make them searchable. (i.e. voice to text conversion). We wants to be able to exploit the value of these recordings. For example you could search for ‘customer’ and then the webpage returns every instance when the word customer has been record or videoed (and then you can click to replay the asset at the moment when the word is said).
Apps Example :
- You can see the application working here: http://mediasearch.azurewebsites.net/
- Enter "customer" for the keyword and you will find all result (text, video speech) that mentioned "customer" keyword listed on the search result.
- No part of the current design needs to be retained. This is a blank canvas for some creativity and excellent user experience. Show us your creativity for the new UI/UX!!
Although the client has created the technology they have not worked on the UI/UX parts. In this challenge, we are looking for DESIGN CONCEPTS on how this Application could work. What should the user see and experience when using the application.
Design Ideas: Parallax Scrolling
- We would like to design this apps using Parallax scrolling and feel that could make the concept more interesting for users to work on.
- We are looking for your creative thoughts on how best this page can be designed, please have a look at the parallax scrolling references to get inspired.
- Any other interaction within this parallax scrolling that you think would make the concept more interesting?
- Explore the below references to explore/inspire more on parallax scrolling :
* http://www.creativebloq.com/web-design/parallax-scrolling-1131762
* http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
* http://www.hongkiat.com/blog/web-design-scrolling/
Design Considerations
- Looking for clean, modern, neutral (not mentioned any brand specifically).
- Looking for intuitive user interface
- We need this product to be Simple, Smart, engaging.
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- What should the priority features be?
- Stock Photos: Feel free to use any images related to this concept.
Design Size
- Desktop screen size: 1280px width and height as required
Required Page:
Screens Required (ideally a one-page design, scrolling through) :
01. Landing page (homepage) - the main search page
- By default, user of the apps will see this screen first.
- Visually, user needs to be aware of all the features in the apps by looking at this screen, and easily notice what needs to be done in the apps (enter keyword to specific form fields, navigate, etc).
- Provide a simple name and logo for this apps.
- Provide great navigation/user interactions to start searching the data.
- Think the best UI/UX for the landing page, feel free to explore the great possible interactions in this screen.
02. Results page (with a button that allows you to jump back to search or down to more advance analysis result)
- After user entered their keyword, the apps will show all raw result in this screen.
- The results can be vary, from text documents, voice recording until video presentation.
- Present the results in different view like list, tile or table view. feel free to create additional features like grouping based on result type (text, video, or audio to speech)
- There should be some information presented in each result list, such as title of the documents, video/image thumbnails, description of the document and when the keyword presented in audio or video (on what minutes they keyword mentioned).
- User can go deep down with the result by going to analytics page. There should be a button or navigation so user can be aware of the analytics page.
- Think the best UI/UX for the result page.
03. Analytics Page
- This advance page shows how they keyword and raw result being processed and displayed in smart and intelligence way.
- So if a product is searched for it could display graphically whether calls mentioning that product are positive or negative.
- So something similar to this but more attractive: http://ceblog.s3.amazonaws.com/wp-content/uploads/2012/10/Twitrratr-search.png
- Feel free to provide another smart analysis to the raw result. Besides positive/negative, how about popularity of the keyword being mentioned in period of time? what analytics category/filter that you can add to your design?
- Maybe different view for better analysis presentation? Graph or something else? Use tabs for each different view? Feel free to be creative here.
Target Audience
- Top and Middle Level Management that wants to learn or exploits data value from the raw data materials.
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.