Challenge Summary
Welcome to Kardon Connect Demo App Design Challenge by HARMAN!
This challenge is focused on creating screens for iOS. This application will allow salespeople or consumers in stores to demonstrate how to control different speakers and play music over them - a simplified experience based off the current Connect App so the users can just do certain, non-modifiable actions within the app - focus on single click to play demo scenarios. The current App (links are shared below) need to be simplified as a full application for home users to control their entire home systems, we are looking for you to refer the wireframe for flow of the app and come with new simplified designs based on the given branding!
In this challenge, we are looking for design solutions and ideas on how this application could look and work. What should the user will see and experience when using the application?
Round 1
Submit your initial designs for Checkpoint Feedback
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
About Harman Kardon OMNI HD Wireless Speakers:
The Harman Kardon OMNI HD Wireless Speakers have recently been launched into the global market. The speakers feature proprietary technology that allows for wireless streaming of both HD Audio and Video. Showcasing the features of this technology at the retail point-of-sale has proven challenging for marketing teams. Traditional marketing methods such as utilizing a plug-and-play retail POS provides consumers only a limited insight into the features and benefits of the OMNI line. As such, our products are not clearly differentiated from leading competitors in the marketplace.
The POS app will allow consumers to interact with the OMNI wireless speakers within the retail environment. The app will have a similar look and feel to the HK Connect App, but will be modified to provide a simpler, more straight-forward experience. The consumer should be able to intuitively navigate the app, play music, and adjust which speakers play to get a general sense of how the system would work in their home.
The end-goal of this application centers on increased sell-through. By clearly showcasing the broad benefits to the consumer, the probability for sale (and reduced returns) grows significantly.
Design Considerations:
- Looking for a modern, flat design approach!
- Simple, pleasant user interface that shields the user from the complexities happening behind the scenes
- Needs to be intuitive and accessible to a broad range of users
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.
- Please DO NOT COPY the layout as shown in the given wireframe, it is just a reference for content.
Guidance Documents:
- Harman Kardon Connect Demo App.docx Display and app info
- Harman-Omni-POS-Design-Direction.pdf App Design Direction
- Wireframes for Input into Design Challenge.zip Wireframes - Axure file and HTML generated clickable wireframes
Screen Size:
- iPhone 5: 640 x 1136px (portrait)
- iPad: 2048 x 1536px (landscape)
Application Objectives:
The App makes it easy for consumers to demo OMNI speakers within the retail environment. The commercially available Harman Kardon Controller App is too difficult for consumers to learn on-the-spot, in the store. Hence, we need a simplified Demo App that makes it possible for consumer to “self-service” - as in, no sales associate needs to support the experience. It shall:
- Make it easy to select and play music tracks; allow for easy selection and transmission to single or grouped speakers.
- Support Party Mode – activates all available speakers for simultaneous play
- Single or grouped play (as mentioned above)
-- See all use cases here: https://youtu.be/OQc6uQTvGDU
-- See how the current app works: https://www.youtube.com/watch?v=avKvNws0yUQ
Challenge Requirements:
We need below pages to be designed for this challenge
1) Default Video Demo Screen:
- In Idle state i.e. when customer is available to test the speakers/app, it plays a marketing and how-to video
- For this screen, we might need you to design the "Pause" button
- When a customer taps anywhere on the screen, this screen is hidden to show the main content for the user to test the speakers.
2) Landing Screen:
- "MainContent" in the wireframe shows this landing screen
- This is the screen the user sees first, we are looking for your design ideas on how this screen need to look like?
Music List:
- We need to show a list of music in this landing screen
- This need to show the name of the music and any thumbnail associated with that
- Any ideas that gives this great look is most welcome.
Now Playing:
- When the user selects a music to play, that need to shown with a difference/separately to indicate that it's being played
- This need to show more controls within it i.e. allow users to adjust the volume, select from the list of 3 available speakers, should allow to switch to party mode.
Navigation (Main Controls):
- We need to show a navigation/quick links as shown in the wireframe, this will allow the user to select where the selected music need to be broadcasted.
- Note: Difference between administrator and customer is that, an administrator will have an additional menu item called "Configuration" whereas a customer won't have that option.
Speaker Selection in navigation:
- Your design need to indicate which speaker is currently selected and is playing the music.
- Also, when a user selects party mode - all speakers need to be selected, please see wireframe to get an idea on how it works!
Special Note: Tidal, Jay-Z’s new streaming music platform, is going to be a partner with Harman as a part of this application. We should put a reference to their logo - it should be within the menu where the music is played. You can use their logo found on their site: http://tidal.com/
2.a) Alternate Branded View:
- As an additional option, we'd like to see a presentation of this Landing Screen if it was branded for a retailer partner with Harman. For this sample, we want you to show us how this page would look as if the application was being used in a Media Markt retail store - http://www.mediamarkt.com/
- Keep it simple and sophisticated, still primarily with a Harman feel, but having this page fit the idea of "Harman Product Line in a Media Markt Outlet" - so subtle use of the Media Markt logo, limited use of color to convey the idea without obscuring that this is Harman
- We do not need you to design alternative views for all of the screens - just this one as a sample
3) Speaker Controls:
- Clicking on any speaker in the navigation will show a screen where we find more functions to control the speakers.
- How do you think this screen need to be shown?
- Should this be shown as a pop-up?
- We like the idea to switch between
4) Configuration:
This screen is accessed only by administrators
Login:
- An administrator need to login before they can access the configuration.
- We need the admin to input their username and password to login, also show us how the error screen will look like.
Configuration:
- This screen allows admin to customize Music, Video, Products.
- For now, we are looking for you to design this screen with these options - but make sure this screen allows future enhancement too!
5) Scrobbling:
- This screen allows the user to choose the music to be scrolled
- User will have the ability to enable/disable scrobbling
- When this feature is disabled, we need to show the music names that were last scrobbled.
6) Demo Mode:
- Demo mode shows a demo of the application.
- This need to show instructions on how to use the application.
- Come up with something creative that shows the demo of the app, we are looking for your thoughts on how well this can be designed.
Target User:
- Salespeople or consumers in stores.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- How well you minimize the number of clicks required to complete the process and so get the user to the content as quickly and easily as possible
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.