Challenge Summary
Welcome to Harman - AMX Living App UI Redesign Wireframe Challenge.
We are looking for wireframe (Axure) solutions based on requirements from our client. Expecting the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
Main aim of this challenge is to change the flow/redesign this application, so understanding the purpose of the each of the features within the screens is essential and look to suggest us new flow!
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.
Round 1
Submit your wireframe for a Checkpoint feedback:
1) Home
2) Music
3) Watch TV
4) Lights
5) Security
- Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final wireframe plus any Checkpoint feedback:
1) Home
2) Music
3) Watch TV
4) Lights
5) Security
6) Temperature (HVAC)
7) Cameras
8) Pool & Spa
9) Intercom
10) Weather
- Any comments about your wireframe, make sure all pages have correct flow!
The Purpose of this challenge is to come up with the wireframe that helps define the flow of application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
For this wireframe challenge, we are looking for your help to improve the over user experience and flow of the existing application. Refer to the attached screenshots of the existing application, and please go through the explanation below to understand how the application works.
The focus is on improving the experience of the entire application, so the screenshots are only given for functional reference - think of the experience from the ground up!
Wireframe Expectations:
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
- We would like to design the screens of size 1024 x 768px (iPad landscape screens)
Supporting Documents:
- Screenshots (found in attached UI_screenshots.zip) - these are for the current app.
- Do not copy them unless the current design and experience are the best solution for the UI and interaction model
About AMX Living Application:
AMX Living simplifies your life. This home automation experience provides you complete access from anywhere in the world to your whole home audio and video, lighting control, alarm and security cameras, heating and air conditioning, whole house intercom and more.
Existing Application:
You can see a demo of the existing app in iTunes store:
https://itunes.apple.com/in/app/amx-living/id669569220?mt=8
- You may download the application to your iOS device and get the experience the demo of the app
- If you are not able to download, you may use the attached storyboards to understand how the layout is put up and most importantly pay attention to the features in the application..
Required Screens:
We need wireframe to be created for below screens (found in attached UI_screenshots.zip)
1) Home: (00_Main Page.png)
- This is the landing screen that user will have option to select the room (Kitchen, Family Room, Master Bedroom, Dining Room, etc..) for the overall app, so any customization done will be done to this particular room (only one room can be selected at a time) - and user will be able to change to any room at any time, so consider showing this option at all times irrespective of the screen they are in.
- In addition to the above option of choosing the room, we optionally need to allow them to view the floor plan as shown in 00_Main Page.png and options to activate/de-activate controls in any room but note that this need to be OPTIONAL i.e. this will just support the main control mechanism of room selection from the top menu bar (make sure this to consider this).
Menu Options:
We have below menu options in this screen that allows user to control the appropriate item.
- Intercom
- Security
- Pool & Spa
- Cameras
- Temperature
- Lights
- Music
- Watch TV and
- Weather Information
2) Music:
[Please find any images referenced below in attached UI Screenshots > "Music" folder]
- This screen allows the user to select the source of music, song that need to be played.
- We are looking for your help in how these need to be shown.
Rooms, Groups, Music Zones:
- Allow the user to select a particular rooms or whole house or group of rooms where the music need to play.
- Allow user to adjust their volumes, provide option to use the equalizer for each of the room volume control ([Home]Audio Adjust EQ.png)
- Users will be able to choose/control the volume of music zones and we need the ability to manage these volume for up to 32 music zones or more. (See example Music Zone 01.png, Music Zone 02.png, Music Zone 03.png and so on), how to arrange them is something where we need help!
- User will be able to creating groups (please see [roomSelect]Grouping.png)
Choose Source & Now Playing:
- Allows users to select the source from where the media need to be played
- Once the source selection is made, they will be able to choose the media/channel to be played
- They will also have option to save the media they like under favorites, we are looking for ideas on how this can be shown?
- They will also have the option to view the media being played currently ([audio]Kal Movie List.png)
Channel and use device with remote control:
- Based on the source chosen, we need to provide corresponding remote control for controlling (Please see some examples in folder “Music > Remote Control”).
3) Watch TV:
[Please find any images referenced below in attached UI Screenshots > "Watch TV" folder]
- This screen will allow the user to select the source, channel and will also have a option (remote control) to control the device.
- This will allow the user to choose the source from where they watch tv and in which room/tv (note the room selected for the overall app will take precedence and user will have option to change the room at any time).
- They will have option to choose a source and use that for a zone (this will have devices in one or more rooms)
- Note below options will be for the selected room!
Choose Source, Channel and use device with remote control:
- User will have option to choose many sources and each source will have different remote control (Please see some examples in folder “Watch TV > Remote Control”).
- Note these images also allows user to choose channels by either clicking on the channel name or by entering channel number using a keypad
- They will also have option to group their favorite channels for easy access (please see [Home]CableGlobal Icon List.png)
4) Lights:
[Please find any images referenced below in attached UI Screenshots > "Lights" folder]
- A user will be able to control to the lightings for the entire house from this screen.
- We need to three sub-sections in this screen, they are Room lights, Room Scenes and House Scenes
Control Individual Room lights:
- They will be able to control individual room lights and adjust the brightness with the help of sliders ([subPage][Lighting]Loads 01.png), so we need your thoughts on how the rooms and lights within each of the groups need to be organized for easy identification?
Control Room Scenes:
- They will have options to select a scene for the room..for example: suppose if the user is watching a movie, they can select this option and immediately the lights are dimmed for better viewability.
- Some example rooms scenes options can be seen in [lights]Scenes.png
- If there are many scene options, how do you think we need to show them?
- We must also provide option to have all lights “on” or “off” within a room
House Scenes:
- This is same as Room scenes expect that it will lights will be adjusted for the entire house instead of an individual room.
- Some examples of house scenes are “Wake up, Away, Front Walk, Night Light, Driveway..etc..”
- If there are many scene options, how do you think we need to show them?
5) Security:
[Please find any images referenced below in attached UI Screenshots > "Security" folder]
- A user can control the security of the through this screen
- They will be able to lock/unlock the doors, this option will also be available within the blueprint shown in landing screen (please see 00_Main Page.png)
- This shows necessary options that can be pressed in case of emergency, options are Panic, Fire and Police.. ([security]Emergency.png)
- They will be able to see a list of log ([security]Events.png)
- By default this screen is shown which allows security to be armed/unarmed for the entire house! ([security]Keypad.png)
- Tapping on zones, show this view - this shows list of rooms and also indicates which rooms has an alert and for which rooms security is enabled, etc..([security]Motion.png). Would it be good to provide an option that allows bulk selection?
- This is just a pop-up that is shown when important changes to security are being made and a user needs to enter the passcode to make edits. ([Security]Password.png)
6) Temperature (HVAC):
[Please find any images referenced below in attached UI Screenshots > "Temperature" folder]
- This screen allows the cooling and heating temperature to be adjusted across different rooms in the house..see an example:
- Controls for each room will have details as shown in [subPage][Home]Temperature 01.png, [subPage][Home]Temperature 02.png, [subPage][Home]Temperature 03.png and so on...note the system will allows user to adjust the temperatures for 32 or more thermostats, and your design needs to consider this!
Scheduling: ([help]HVAC Schedule.png)
- They will be able to schedule a single thermostat (temperature control) for a room which allows to select:
- A pre-defined schedule (note vacation needs to be mandatory schedule in this - selecting which will disable all other schedules),
- Select a day (Sun - Sat) when this schedule need to run
- Select the time when this schedule need to be enabled/disabled
- Select the Cooling and Heating Temperature
- Note: User should also be able to select more than one thermostat i.e. multiple rooms and use the above schedule.
- They will also need to have options to schedule zones ([help]HVAC Schedule Zones.png)
7) Cameras:
[Please find any images referenced below in attached UI Screenshots > "Camera" folder]
- This screens allows us to monitor the activities through cameras in certain areas of the building. (please see [camera]Camera.png)
- User will be able to select different camera names and view their visuals..what else do you think can be included in this view?
8) Pool & Spa:
[Please find any images referenced below in attached UI Screenshots > "Pool & Spa" folder]
- These controls allows the user to adjust temperature in pool & spa
- Please refer to these images [poolspa]Jandy Features.png and [poolspa]Jandy Pool Spa.png
9) Intercom:
[Please find any images referenced below in attached UI Screenshots > "Intercom" folder]
- This screen allows the user to manage the settings for doors and intercoms
Door Setup: ([intercom]Door Display Setup.png, [intercom]Door Chime Setup.png)
- Choosing this option would allow the user to control the chimes, door displays and controls to activate/deactivate doors.
- They will have option to choose and assign chime for each of the doors in the house, so when a user presses the doorbell from a particular door it will ring with the selected chime.
- Each of the door will have a display and we will have option to choose a graphic from list of options and assign it to a door.
- We will also have option to Enable/disable “Do Not Disturb” that will either enable/disable all doorbells
Intercom Setup: ([intercom]Intercom.png, [intercom]Setup.png)
- This allows users to setup intercom available in different rooms
- User will have option to control the microphone level and intercom sound for the phone in each of the rooms.
- They will also be able to make calls to particular room (provide call options - please see [intercom]Intercom.png)
- For each of the device, they will be able to select additional settings options like "Auto Answer, Call privacy, door privacy..intercom timeout..etc.." (please have a look at [intercom]Setup.png)
- This screen allows the user to attend or call between rooms.
10) Weather:
[Please find any images referenced below in attached UI Screenshots > "Weather" folder]
A user reaches this screen by tapping on current weather shown in the bottom left.
- Initial screen they see is [weather]Weather.png, please note the options a user has in this screen are shown in this screen.
- Allow user to add weather locations!
- Tapping “Weather Images” allows the user to view “[weather]Images.png”
- Selecting “Zipcode” in the options, will show a keypad ([weather]Keypad.png), this allows the user to key in the zip code to view that locations weather.
Target Audience:
- Home owners with a Living app control home automation system
Judging Criteria:
- User Experience of the application.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
- Your wireframe possible to build as Responsive Design 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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.