Credence - Mobile AR Retail App Design Challenge

Welcome to "Credence - Mobile AR Retail App Design Challenge". This challenge will focus on creating new screen designs for our Credence mobile app. The Credence application will be used to showcase retail products and give the user an ability to simulate and put the products virtually in the user areas/room/space using Augmented Reality via their mobile phone.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
05) View Product AR Screen (Mandatory requirement) 
00) General Requirements
02) Dashboard Screen
04) Product Details Screen

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
05) View Product AR Screen (Mandatory requirement)
00) General Requirements
01) Splash Screen
02) Dashboard Screen
03) Products Category Listing Screen
04) Product Details Screen
06) Product Checkout/Carts Screen

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVES

• Create a concept app design that shows Augmented Reality technology for Retail Users
• Design a UI for 6 unique screens for Mobile device (Portrait view) 

BACKGROUND OVERVIEW

• We are in need to create a new design concept for mobile application called ‘Credence’ where it will showcase products such as furniture, shoes, kitchen equipment, or any other retail items with capability to simulate and test the products in the user area using Augmented Reality (AR) view, simultaneously, and each products can be configured in 2-3 ways (variants, colors, materials, finishes etc.) 
• The App will need to work on Android, iPhone, iPad and should support landscape and portrait (for this challenge purpose, we will only focus on iPhone portrait view only)
• The App will mimic a contemporary, high-quality Retail app, with features like searching products, details of products, adding them to a cart, etc

TARGET AUDIENCE

• Retail Customers

PERSONA

• Name: Daisy Riddle
• Occupation: Entrepreneur
• Goals: Finish her living room decoration project
• Frustrations: First time doing DIY decoration, doesn’t have background in interior design and difficulties to shop due to pandemic situation
• Wants: An application that is able to give her a various ways to simulate/test the products that might fit into her living room using AR mode in her mobile device and easily to shop/buy the products if she likes the products

USER STORY

• Daisy wants to decorate her living room because it’s been a while since the room gets refreshed/decorated and she is bored with the environment due to WFH situation that already happen for a while now because of the pandemic situation
• However, there are two problems with the living room decoration project, this is the first time Daisy doing a decoration by herself and she doesn’t have experience in this area. She doesn’t know how to mix and match and choose furniture items that will make her living room stand out. She also having difficulties to shop for a furniture because most of stores right now have very short opening time which not allowed her to fully browse/explore the store product collections and she is trying to avoid going out if not really necessary
• She called her friends and got a suggestion to download the ‘Credence’ application. This application has so many retail products, including the house furniture that might fit to her living room and have an ability to simulate/test the products to fit into her space/room using Augmented Reality 
• Daisy finds the application is really easy to use, fast, and also really helpful because:
  • She can easily find a lot of product options in the application
  • She can open the camera in her mobile phone to capture the room situation and then simulate various products available to be virtually placed/appear in the room through the camera so she knows how the product will fit into her space/room
  • She can modify the products elements based on the product variation criteria (colors, materials, finishes, etc). For example, she can choose a sofa color (red, blue, etc) and the material (leather, velvet, etc) 
  • She can add multiple products into the space/room to simulate the environment situation where all the products she wants appear virtually in it (for example, adding sofa, table, chandelier, etc to the living room)
  • She can do some action with the virtual products, including rotate and move these Products to match the room situation (adjusting size, etc)
• After satisfy with the simulation result, she found that the application also has a feature where she can add all the products that she like from the room AR simulation to a cart so she can easily buy all these products in one go

DESIGN CONSIDERATIONS

• Simple and clean design, not overly complex 
• Must follow our design branding guidelines provided
• Use color or visual elements to highlight and compare important information
• Intuitive. The user should never be left asking "what do I do next?"
• Simplify screen views that are too crowded with content

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=827081

EXPLORATION SCORE

In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 8
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 9
  • 1: low-fidelity design, wireframe or plain sketch
  • 10: top-notch finished looking visual design
• Exploration: 8
  • 1: strictly follow an existing reference or production guideline
  • 10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 7
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

DOCUMENTATION

• Example Screenshot from other Retail AR apps as references about the feature we want in the app
• Design Guidelines as reference from other application that we already created/build - your design must have the same style and look and feel like these apps
• Documentations available in the challenge forum/discussion!

SCREEN REQUIREMENTS

00) General Requirements

• Create a simple logo for the ‘Credence’ app
• For sample products that will be simulated in your design, please make sure to find a set of items (like a table, or chair, or shoes, etc) photos that are captured in different angles so it creates the AR/3D interaction illusion in your design (for the product movement, placements, adjustment, etc)

01) Splash Screen

• An intro screen that will welcome the user when they open the application for the first time
• Show us variation of content in this screen that we can use as a marketing effort to engage and sell the application to the users, you can either use any of the following features in the splash screens:
  • Set of carousel that show:
    • The AR functionality (important and mandatory)
    • The Retail Products that available in the application (based on category such as Household furniture, Computers, Fashion, etc) 
    • Any other additional features in the app (carts and payment, etc)
  • Step by step carousel that shows how to use the application from beginning to end
  • Etc, we are open to your suggestions for this screen

02) Dashboard Screen

• Assume the user has been logged in successfully to the application
• Show all e-commerce functionality that should be available in a dashboard screen:
  • Show off the products in multiple different ways
  • Make special offers to close more customers
  • Focus on the details shoppers care about most
  • Build hype for future product launches
  • Optimize the shopping experience for mobile devices
  • Clear unique selling proposition (USP)
  • Engaging hero shot
  • Compelling benefits
  • Inspirational social proof
  • Strong call to action (CTA)
• Show list of latest user activity in the application, recent products that they’ve tried, saved AR simulation, pending carts action, etc
• Show list of products category that available in the application, for this challenge, assume the following category will be available in the app:
  • Fashion: Shoes, Handbag, Trolley bag etc. 
  • Household Furniture: Sofa, tables, lamps etc. 
  • Electronics: Lamp, TV, AC, etc
  • Computers: Laptop, Server, transformer, photocopier 
  • or other B2B or B2C items (feel free to add more category)
• Display Product Reviews and customer experience when shopping and using the app
• We are open to any suggestion for this screen, feel free to be creative!

03) Products Category Listing 

• Users will choose the Household furniture category and see multiple products displayed as e-commerce listings in this screen 
• Show us variation of Household furnitures in this screen (sofa, chair, table, closet, coffee table, cupboard, etc)
• This Product category listing screen should meet the following criteria: 
  • Make Parent and Child Categories Equally Selectable (in case it has sub-categories to drill down like a kitchen furniture or products, etc)
  • Give the user ability to Filter the products
  • Make the category obvious for the users
  • Make Sure all the Product Images have consistent appearance
  • Display the Price and remaining stock
  • Make the Customer Path Clear
  • Ability to save/favourite/bookmark the product
• Feel free to create how the category screen should work!

04) Product Details 

• Show set of product detail images/photos and maybe add a video that show the product overview and its feature or capability
• The product name and description along with any measurements related to the product
• Special offers, discount, or any promotional content
• Variation of the products (colors, material, size, etc) 
• Product prices and remaining stocks
• Add to carts button
• Products rating and customer satisfaction review
• Any additional information (How to get the product, etc)
• Need to provide a “View in AR” button. Tapping this opens the user camera where they can take the space/room view and the products will virtually appear in the camera

05) View Product AR (MAIN FEATURE OF THE APP)

• When the user tap the “View in AR” feature from product details page, it will open the user mobile phone camera and show the user space/room/surrounding
• The user will be able to place the product in their space/room and adjust the product to fit the surrounding (adjust the size ratio, position, vertical/horizontal positioning, tilting the product, etc)
• The user can configure variation elements of the product (variants, colors, materials, finishes etc.)
• Once the user approve the product position in the camera, the product will stay in that exact position of the room, so if the camera move away, the product will disappear (stay at the exact position of the room and not the camera view) and will appear back when the user camera go back to the room area where the product being virtually placed
• Should have an ability to add more products while the user is on this screen (add multiple Products together) without leaving the screen.
• Users can rotate and move these Products
• Users can add these products with the chosen configuration to the cart from this Screen

06) Product Checkout/Cart 

• Show list of products that the user selected with all their configuration in this screen
• Show total prices for the selected products
• Various payment methods and payment confirmation status 
• Delivery options and tracking

BRANDING GUIDELINES

• We provide two marvel links from our previous application that has been created as references for this challenge (check forum for the links)
• Stock photos and stock icons are allowed from the approved sources

TARGET DEVICES

• Mobile Portrait: 1125px x 2436px (iPhone 11 Pro @3x)

SUBMISSION AND SOURCE FILES

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

Source Files

• All source files of all graphics created in either Adobe XD, Figma, or Sketch and saved as an editable layer

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors