Challenge Summary
Welcome to Bond 11 - AR Mobile App Design Concepts Challenge! In this challenge, we are looking for the Topcoder community’s UI/UX experts to conceptualize new ideas & design concepts for how consumers will interact through (Augmented Reality) AR with the beverage machines.
- User interface design
- 11-15 screens
- Mobile App
For this challenge, we want you guys to show design concepts for one or more beverage machines (please see below for more details on the beverage machines)
Round 1
Submit your initial designs for a checkpoint feedback
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with all checkpoint feedback implemented.
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Project Background
- The purpose of this project is to develop a mobile application that will be used by consumers in convenience stores and consumer’s experience should elevate
- The application will be used across the convenience stores
Workflow
Please make sure your design incorporates this workflow.
Step 1: The user launches the mobile app
Step 2: The user will scan the QR code in the machine (coffee brewing machine, ice cream machine, etc) to get details of the beverage like the recipe, calorie contents and other health facts. They can use this information to create their own recipe.
Step 3: Once the QR code is scanned, all controls available within the machine based on its capability should be at customer’s disposal in their mobile screen.
Step 4: The user can interact with the machine in their mobile and can look to create their own recipe or choose a predefined recipe
Step 5: The user can also information about Nutritional facts, source of coffee beans (coffee machines) and any other information (we are open to suggestions)
Step 6: Once the user has customized /chosen their recipe they send it to the machine to process and prepare it
Step 7: The user sees some animation on how the machine works and is taken through all the steps they need to know to start brewing their coffee
Step 8: The user can also initiate the payment through this application
Documents:
Please find the link to the below documents in forums
- Beverage Machines to be considered
- Branding Guidelines
- Nutritional Facts Information
Design Concepts:
Please read through the below points to understand what we are expecting out of this design challenge.
1) How a user will interact with beverage machines
- Scanning the QR code also shows the details of the beverage like the recipe, calorie contents, and other health facts. They can use this information to create their own recipe.
- Once a QR code is scanned, what should be the next interaction? Example: If it is a first time user trying to order a coffee, we may show what the machine is capable of and ask them if they are interested in preparing their own coffee or choose one from the predefined coffee’s, etc
- There could be frequent users who may have done a custom recipe in their previous visit, so these users may just opt for their custom recipe - how do you think we can show the best user experience?
2) Simulate building a custom recipe and sending that recipe to the coffee machine to be brewed
- We want to allow the user to create their own custom recipe, how should that be shown?
- Allowing the user to interact with the elements shown on the screen is a great way to show the AR experience, we are looking forward to your thoughts on how to bring these on the screen.
- It is not necessary that you need to use/design 3d models to show the AR experience, we are fine with whatever ideas you have to embrace the AR.
3) Provide instructions on how to use machines
- As mentioned earlier, a first time user is not familiar with how the machine works, so how do you think information regarding the usage of the machines can be shown.
4) View recipes with animations on how to build the beverage
- There is no better way to convey information than animations, show us your concepts on how to achieve this!
- Where and when an animation needs to be shown? Example: Maybe you can show an animation once the user has sent the instruction to brew the coffee and we can show animation on how the brewing machine is preparing the coffee.
5) Innovation
- Remember this is AR, so think of ways to innovate, how and what should the user see on their mobile screen?
- We don’t want a static screen with a lot of information, rather come up with ideas on how to convey information through augmented reality.
- Looking to see your concepts around how quick can a consumer order things like if they can search for any stores nearby and order any frequently or most popular recipe and pick it up once they reach the store.
- Sky is the limit for your innovative ideas, show us what you got!
Form Factors
Please make sure your design supports these form factors:
- This will be a hybrid application, focus on mobile portrait
- Have the screen size as 750 x 1334
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Focus on User Experience / how the user interacts within the screens
Target Audience
- Consumers using the machines in convenience stores
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Innovation in your concepts
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
Final Deliverables
All original source files.
Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or Sketch or Adobe XD
Marvel Prototype
We need you to upload your screens to Marvelapp.
Please send your marvel app request to csystic@gmail.com
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.