Challenge Summary
Welcome to the Solar Ags - Mobile App UI/UX Design Challenge. The purpose of this challenge is to design the complete look and flow of the user experience for the SolarAgs mobile app.
The purpose of the app is to be a single portal for education, information, and customized design that homeowners can use to learn and guide in decision-making on the purchase of a solar energy system for their homes. As such, part of the UI/UX will deliver content that is static - this is the “learn” aspect the interface. The “do” aspect of the UI/UX will interact with the user to obtain data that is both user-entered as well as data from the smartphone GPS and compass. In addition, the UI/UX will prompt and guide the user to take one or more pictures of their house. The “approved” photo, along with the data will be transmitted to a server for processing. The server will return several design options. It Is possible that no options are returned. For the sake of this competition, let’s assume a maximum of 5 options will be returned. Each option will include an image and tabular data. The user will be able to “select” one option as the prefered choice. Following the selection, the user will be presented the opportunity to have their selected design “send to installer” or “send to DIY store”
We are looking for the Topcoder Design Community to develop a complete "user experience" (UX) through a solid user interface design.
Round 1
Submit your initial designs for Checkpoint Feedback
0. Splash Screen
1. Welcome Screen
1.1 Login into Application (login via facebook)
1.2 Guest User (user decides to stay anonymous)
2. Home Screen
5. My House Design
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.
0. Splash Screen
1. Welcome Screen
1.1 Login into Application (login via facebook)
1.2 Guest User (user decides to stay anonymous)
2. Home Screen
3. Learn about Solar
4. Example House Design
5. My House Design
6. Design Review Process
7. Confirm Design / Send to Installer
8. Blank Template Screen
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)
Some of the biggest threats today include: depleting oil reserves, global warming, and growing energy insecurities. These issues threaten the future standard of living, especially with the expected influx in global population. Solar energy is abundant, wide accessibility, and would enhance public safety and health with fewer air toxins from a secure non-depleting supply of abundant domestically produced energy. Although there are clear environmental benefits from solar, the app should not be marketed to environmentalists as the purpose is to broaden the market for solar energy adopters.
About the Application:
Our application focuses on making solar energy more attractive to the average person by improving accessibility and economizing the initial process. With our application, the user captures a photo of the roof from the exterior of their home, answers a series of questions to determine goals and objective of their interest to “go solar” as well as economic considerations. The overall product has two developmental parts: the front end which resides on the smartphone and the back end which resided in a cloud server. The front end is responsible for providing a functioning camera, GPS and compass data, and the entire user experience. After one or more images and data have been sent from the front-end to the backend, the backend processes the data through a series of algorithms. Lastly, the back-end returns one or more images and data to the front end, smartphone app, for presentation to the user.
More information about the SolarAgs project can be seen here: http://solarags.tamu.edu/default.html
Design Considerations:
- Looking for modern, intuitive user interface
- 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.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- The client has provided a sample screens for content references ONLY. DO NOT COPY the look & feel as this challenge’s purpose is to develop an entirely new design flow and aesthetics!
- How should this mobile application look?
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.
Design Size:
This app will designed for the native mobile environment for Android:
- 1080 x 1920 (android portrait)
Branding Guidelines:
Use of design elements associated with Texas A&M is REQUIRED. More information can be found at the url: http://brandguide.tamu.edu/.
- The use of the block ATM logo is required (Logo is available in above link - Texas A&M Logo (TAM))
References:
Compatible brands for thematic design elements (these brands and level of sophistication are those that our users will be familiar with and expect)
- Bang and Olufsen (link to: http://www.bang-olufsen.com/en)
- Audi (link to: http://www.audiusa.com/)
- Acura (link to: http://www.acura.com/)
Want to convey that this is sophisticated stuff, but not out of reach for the average professional who owns a home.
Required Pages:
We are looking for the below pages to be designed/considered in your concepts.
0. Splash Screen:
- We are looking to show couple of logos (Texas A&M Logo (ATM) and Solar Ags logo (attached)) in this screen, come up thoughts on how this can be shown?
- This screen will be shown for a few seconds, can we show a pre-loader here? (with some progress indicators?)
1. Welcome Screen:
- This will be a welcome page that is shown after the splash screen.
- This will need to show two buttons:
** Watch: The one that shows a about us video (which will be an introduction video), looking for your thoughts on how this needs to be shown.
** Read: This allows user to read through the About us (introduction) content.
(You are free to change the flow of information on how the buttons or the associated content (video/article) need to be displayed i.e. if you think a video can included right away without having the user click on a button, you can do that - feel free to modify what you think is best)
- This screen will have two options ‘Login via facebook’ and ‘guest’ - feel free to modify the button names as you see fit. See points 1.1 and 1.2 for more details on usage of these buttons, feel free to change the button names and interaction on how these need to work?
1.1 Login into Application (login via facebook):
- They can login into the App through social networking sites and an account is created for the user.
- In this case, details that were shared by the user will be saved.
1.2 Guest User (user decides to stay anonymous):
- They can stay anonymous but in this case user details that were shared by the user will not be saved.
- We need to show a message that details shared will not be saved by the app, what need to be shown in “Welcome Screen” to help users indicate this.
2. Home Screen:
- This will be the main landing screen after a user completes either step 1.1 or 1.2
- We would like to make this page very appealing to the users.
- This screen provides quick links to list of quick tasks that a user need to have as a part of this app.
- This page will have these buttons: “Learn about Solar”, “Example House Design”, “My House Design”, “My Neighborhood”..feel free to change the name of these buttons and also how you think these need buttons need to work? what would be a better way to display information in this page - feel free to show us your ideas.
- For now, three buttons in this screen “Learn about Solar, Example House Design and My House Design” will be functional.
3. Learn about Solar:
- This screen will educate users about solar by providing information, links and videos related to that.
- We need below content to be shown in this screen, we are looking for ways to display information in this screen:
- Think on how we can show the below videos in the screen, think mobile!
“Photovoltaic energy systems use the energy in sunlight to directly generate electricity. There are no moving parts and no thermal conversion. These systems have the potential to last three decades. The basic system components are solar cells to convert energy from the sun into a flow of electrons, an inverter to convert the DC power produced by the cell to AC power needed to feed the energy to the electric grid, and metering and cables to connect all of the parts.
To learn more about solar photovoltaic, choose from the following videos”
Title: “US Department of Energy: Solar PV”
https://www.youtube.com/watch?v=0FjORFizz2k#t=75
Title: “US Department of Energy: Balance of System”
https://www.youtube.com/watch?v=BMqpenOJpzk
Title: “Installation of PV at Texas A&M University”
http://animoto.com/play/9Tf4SJMlr1Z91dtW2CjFJw?utm_source=tamu.edu&utm_medium=player&utm_campaign=player
Title: “Texas A&M Looking Up for Alternative Energy”
https://www.youtube.com/watch?v=frUUfwRjmGg
Title: “Texas A&M Commercial 2013 - What You Stand For”
https://www.youtube.com/watch?v=RYyNa9_wGhw
Title: “Solar Ags: Photovoltaic projects as Texas A&M University”
http://solarags.tamu.edu/”
4. Example House Design:
- This screen need to show an example of how the process of entering data/photo is handled by the application.
- Will it be good to show an animation or sequence of images that explains how to use the app.
- We would like you to come up with thoughts on how this screen can be handled!
5. My House Design:
- This screen will be have two sections first section will ask the user to enter some personal details and other section need to allow the user to take a picture of their home.
User Personal Details
- Initially, we use GPS to track user location and show them a zipcode and ask them whether they reside in that street address with a “Yes and No” option, clicking on any of this - will
show the user details screen and they will have option to edit it.
- We will also be capturing user’s mobile number, show them their mobile number and ask for a confirmation whether its their active mobile mobile number with “Yes and No” option, clicking on either of this will display the phone and they will have option to edit it
- If a user has logged in through facebook, then we will be pulling above information from user’s facebook profile.
- Below are other personal details that a user will be able to edit, it includes “Name, How much they would like to spend ($)?, Annual Electricity Payment ($), Monthly Electricity Payment, State, Cardinal Direction, Door Length (inches)..
- User will have options to save these information as a draft and continue at a later point of time.
- Would it be good to show the collection of details in this page as a wizard?
- If users misses to enter some important details then we need to show the error screen, and show a message ““Since the design is customized to the user, not providing all of the requested information will reduce the accuracy, would you like to continue (Continue) or go back and complete the form (Return)”
- How do you think this screen need to look like?
Photo:
- We are looking for couple of screens here, initially we need to show a help screen with instructions on on how the photo need to be taken.
- In the next screen, allow the user to take a photo with some guidance with some grid lines (help?)
- We would like to get an idea on what would provide best user experience for the users to take a photo.
- Note: a user can take many photos of their home and they will be able to select one photo and submit the data.
Submit Data:
- Once the user has entered all the needed information, they will be able to submit the data.
6. Design Review Process:
- Once the user submits the data in the previous steps, it is processed in the back-end.
- After processing, app will show a list of solar design options for the user to choose.
- This could show many design options, need to make sure we need they have multiple design options to choose from.
- We need a way to indicate to the user there are many design options for the user to choose from and which one they are currently viewing. For Ex: if there are 10 images, then we show them which design image they are actually viewing and show options to navigate/move between the designs.
- User will be able to shortlist a list of screens and this step is repeated until they shortlist one final design solution, show us how this need to work?
- User will have an option to confirm any one design they like, at any point in the shortlisting process
7. Confirm Design / Send to Installer:
- Once they confirm one design screen from previous step, they will be able to either:
* Send to Local Installer: When they select this option, they will see a list of Local installers and user will be able to select one of the local installer, we need to show the installer name along with their logo.
* Send to DIY: We need to show list of local DIY stores with their logos and allow user to choose one installer to send the design to that installer.
- We would like to get your design thoughts on what need to be shown, if there are no search results/installers when the user chooses either of the above two options.
- Also, come up with thoughts on how we need to display a message (ex: We had sent the preferred design to the selected local installer) when the user selects one of the options.
8. Blank Template Screen:
- This is almost like any other screen in the app, we just need it to be blank screen template with all generic UI elements (like menu, notifications icons..etc..) that will be a part of any new screen that will be designed in future.
- In the blank content area, we will be adding any additional screen information as required.
Target Audience:
Demographics include..
- Upper middle-class and upwardly mobile
- Environmentally conscience
- Tech-savvy but not necessarily a technologist
- Sophisticated, intelligent buyer
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
- We want the app to be as much about the experience as it is about using a tool.
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.