Challenge Summary
Welcome to the Retailer Loyalty Mobile App Design Concepts Challenge. Our client is a leading agriculture company that supplies it’s products to Retailers. Visibility into retailer inventory and their sales of our clients products is very limited and the process is manual. Retailers receive our client's products but do not report back on actual sales nor inventory. There is also no formal loyalty process that includes retailers.
The Agriculture company supplies products like Fertilizer, Herbicide, Pesticide, Fungicide, Plant Tonic.
Our client would like a mobile application to automate this Retailer Loyalty process. The app will add value in facilitating the Retailer on-boarding process, update product inventory at point of sale and encourage retailers to engage with our client in the form of a Retailer Loyalty feature.
The app will enable our clients Sales agents to engage with their retailers, view specific data related to each retailer, and gain valuable insight into actual products sold. Our clients Sales agents can further engage with the retailer via the Retailer Loyalty feature.
At the end of this challenge, we are looking for the Topcoder Design Community to help us plan and design the user experience of our new application.
Round 1
Submit your initial designs for Checkpoint Feedback
00 Splash Screen (mobile)
01 App Start (mobile)
A. Retailer:
04 Dashboard (mobile)
05 Barcode Scanning (mobile)
06 Inquire (mobile)
B. Agent:
07 Agent Dashboard (mobile)
C. Admin:
10 Admin Dashboard (Desktop)
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request an InvisionApp link from the Copilot through the challenge forum.
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.00 Splash Screen (mobile)
01 App Start
A. Retailer:
02 Registration (mobile):
03 Login (mobile)
04 Dashboard (mobile)
05 Barcode Scanning (mobile)
06 Inquire (mobile)
B. Agent:
07 Agent Dashboard (mobile)
08 Settings (mobile)
09 Edit Product Inventory / Loyalty Points (mobile)
C. Admin:
10 Admin Dashboard (Desktop)
You must upload your submission to InvisionApp, for the final submission
- you can reuse the prototype that you shared for checkpoint
- Please request an InvisionApp link from the Copilot through the challenge forum.
- It would be great if you can create hotspots for the final round.
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)
A leading Agriculture company would like an app to increase visibility of stock within their retailers. The current model is not scalable and requires sales reps to conduct regular visits to their retailers. Furthermore, there is a significant dependency on retailers to to keep track of products which both enter and leave their physical retail site, which leads to data integrity issues. As a result visibility of sales is poor and it is challenging to reward loyal retailers.
Application Users:
The application may be run by a Retailer, or one of our staff (an Agent or an Admin). This is the description of each of the roles:
Retailer: A Retailer buys products from us (be it directly or also from the market) and sells them further to his customers. He scans the products when they arrive, to build his inventory, and check for any counterfeit products (in case he gets them from the market), and scans them again when he sells them, in order to collect loyalty points. A Retailer is connected only to one Agent.
Agent: An Agent is a salesperson working for our company. He is allocated to a certain Country and has a pool of Retailers that are associated with him and for which he is the person of contact. The Agent can only see the data associated to his own Retailers. He cannot see the Retailers of other Agents.
Admin: Assume an admin is a user that has access to all information about all Retailers. He can also see a list of all registered Agents and their associated Retailers.
The Problem:
Currently visibility into retailer inventory and their sales of our products is very limited and usually done manually. Retailer receives our products based on orders and doesn’t report back on actual sales or inventory. There is currently no formal loyalty process that includes the retailers.
Solution - Loyalty Process:
Retailer Flow:
- The Retailer registers as a new user. He/she can use Social Login or Username/Password.
- The Retailer enters username, password, and enters his contact details and location of his Retail site. He also enters his Retailer ID so that his identity can be confirmed (The Retailer ID is given to them by the Agent on a scratch-card so assume the Retailer already knows their ID).
- The Retailer is automatically assigned an Agent and is shown the the contact details of the agent (Name, Phone number, Location)
- The app remembers their login credentials so they don’t need to enter them next time they use the app.
- Process starts with the retailer scanning the barcode of an incoming product (individual item or box of items).
- Initial validation check when the product is scanned. The application will check against a list of known products sold by the Agriculture company (if no match is found, product doesn't add to the inventory and shows a message to contact agent)
- A Product Inventory is created and Loyalty points are updated in the mobile app and it is synced / updated only when the app is connected to the internet (note: the Retailer might have a poor Internet connection on their mobile phone)
- Retailer scans our products at the selling point (be it box or individual item): inventory is updated and sales list is created.
- For each product scanned and sold a number of points will be automatically calculated.
- The retailer can check the points level in the app itself (reports/dashboard) or can ask his Agent for his status via the app in the form of a message (email or notification inside the app itself).
Agent Flow:
- Agent will already have the credentials to login, they login into the app.
- They will be able to see his associated retailers within the app once they also register themselves as app users.
- They can access a report on all retailers that have scanned our products and are confirmed users of the app
- We can check list of sold products for each retailer and calculate loyalty points (Loyalty Points are calculated automatically).
- Should be able to see list of inquiries and be able to act on them.
Admin Flow:
- The Admin will use a web app for Desktop screen size to access the data, they will not need to login to the web app.
- View of all Agents, associated Retailers & sold Products
- Will have the ability to filter data by date, Agent, Retailer, Product
Design Guidelines:
- Looking for modern designs!
- Please use the attached branding guidelines
- Screen size for mobile need to 1080 x 1920 px (android portrait)
- Screen size for admin dashboard will need to 1280px width and height as required.
Required Screens:
We need below screens to be designed, feel free to add any screens that would help to convey your concepts better.
00 Splash Page (mobile):
- Come up with a splash screen that would be apt for this concept, think of some cool concept.
- It would be good if you can design a simple logo for this concept, it is optional but would be nice to have your ideas here.
01 App Start (mobile):
- On user’s first usage, we need to capture whether the user is a retailer or an agent and show appropriate workflow
- Looking for a screen that helps us find who the user is, we are open to ideas on how this can be done (For ex: we can show two buttons “Retailer and Agent”, so user clicks on either of the one to proceed further, clicking on ‘Retailer’ would let them login or go through Registration. Clicking on ‘Agent’ would allow the agent to login. Once they have logged in they don’t need to see these options anymore and it should save their login details. Obviously we don’t want to be too prescriptive in the solution here, we’d like you “designers” to decide the best way to do this from a UX perspective.)
A. Retailer:
02 Registration (mobile):
- First time Retailers will need to register with the application.
- They will enter the basic details, username, password, name of person, retailer name, address (location), Retailer ID, etc
- They should also have the ability to register through social login (some details will be captured if they use this and still show the registration step with few fields already populated as data is captured from the social network)
- On successful registration, we show a success message informing their account has been created.
- Show us how the error screen will look like if any of the details entered were not right.
03 Login (mobile):
- Should be able to login with their id and password
- Retailer will be able to social login i.e. could use his social profiles to login into this app.
- Provide ability to retrieve password incase if they want to forget it.
04 Dashboards (mobile):
Loyalty Point dashboard:
- Loyalty points status (filter by date and product).
- Historical accumulated points.
- Badging/gamification might be a nice value add for the Loyalty Point functionality e.g. Platinum retailer(100000 loyalty points), 50000 gets you Gold retailer, etc, so assume these
badging are based on the points they have accumulated.
- We might also have 'Retailer of the week', 'Retailer of the month' and 'Retailer of the year' badges to gamify it a bit - looking for your ideas!
Inventory Analytics:
- List of scanned/incoming items (filter by date and product)
- - - Incoming products: barcode number, product name, quantity
- List of sold items (filter by date and product)
- - - outgoing products: barcode number, product name, quantity
05 Barcode Scanning (mobile):
- As the user scans the product’s barcode, an inventory is created, think on how to show this in your screens. Note: the barcode will be scanned with the camera of the mobile device.
- Allow the user to choose the scanning mode before scanning e.g. “Add product to Inventory” or “Sell product” this way the app knows whether the product being scanned is an incoming product or a product scanned at the selling point.
- When scanning incoming products, it does initial validation check when the product is scanned. The application will check against a list of known products sold by the Agriculture company
- - - - if a match is found it will be added to the retailer inventory list of incoming products!
- - - - if no match is found, product doesn't add to the inventory and shows a message to contact agent
- Batch scan: They will have ability to scan several products in a row (product after product) and decide at which stage to proceed with the scanned check/update of inventory list” (perform thinfs offline), so please provide option that lets the user to decide when to sync it - looking forward to your thoughts on how this can be done!
- - If the product being scanned is a incoming product then it updates the Retailer inventory list of incoming products (incoming products, barcode number, product name, quantity)
- - If the product is scanned at selling point then it updates to inventory list at point of sale of products (outgoing products, barcode number, product name, quantity)
- Should have ability to filter by date and product.
06 Inquire (mobile):
- For each product scanned and sold a number of loyalty points will be automatically calculated. The retailer can check the points level in the app itself or can ask his Agent for his status via the app in the form of a message (email or notification inside the app itself).
- Retailer should be able to send a message to the agent, requesting the status of their loyalty points
- Other situations where a retailer sends an inquiry is when the app doesn’t recognise a scanned product. The retailer can send inquiry to the Agent via app and the Agent can manually update the list of sold products and loyalty points for that Retailer
- The Retailer might also want to send an inquiry to his Agent if he thinks a product is counterfeit
- These message sent will be received as a notification for the agent in app and also a push notification
B. Agent:
07 Agent Dashboard (mobile):
The manager (or Agent) should be able to see a dashboard with:
- List of Retailers and their associated sold products / loyalty points
- Total number of associated retailers and their overall performance
- Other things that can be included are: Top Selling Products across all retailers, top selling products sold for that a retailer. number sold that week, that month, perhaps some graphs, etc
- 'Retailer of the week', 'Retailer of the month' etc
- Provide exporting option, should be able to export to Excel, PDF, etc..
- Inquiries: Show list of inquiries from the Retailers: solved and outstanding, think on how these can be shown (they will be receiving these as notifications as well).
- We are open to your ideas on what else can be shown here.
08 Settings (mobile):
- Should be able to view the loyalty points calculation method, these calculation methods are different for each retailers (make it .
- These calculation methods should be customizable for each Retailer, for this challenge - you just need to show how / where these calculation methods need to shown? (use a placeholder for calculation).
- Provide a way for the agents to view/edit calculation for different retailers.
09 Edit Product Inventory / Loyalty Points (mobile):
If Retailer is unable to scan the barcodes, then they send an inquiry about the issue and asks them to add the products and loyalty points manually.
- We are looking for ideas on how the agent will be able to edit the product inventory and loyalty points.
C. Admin:
10 Admin Dashboard (Desktop):
The Admin should be able to see a dashboard with:
- List of Retailers and their associated sold products / loyalty points
- Total number of agents, their overall performance and further drill-down to view their associated retailers / performance.
- Performance of Agents, top performing retailers for an agent, agent with the most sales etc
- Provide exporting option, should be able to export to Excel, PDF, etc..
- We are open to your ideas on what else can be shown here.
- View of all Agents, associated Retailers & sold Products and should be able to filter data by date, Agent, Retailer, Product (you can have these as a separate page if that would make sense!)
Target Audience:
- Retailer, Agent, Admin
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Keep your designs open, modern and clean
- Make sure you are colors and styles in a way that allows for each updates in the future via CSS styles. For example: all CTAs should use the same color.
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Judging Criteria:
- Overall User Experience and UI design
- Completeness and accuracy of the designs as defined in the attached requirements.
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.
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
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request an InvisionApp link from the Copilot through the challenge forum.
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. See more information about Final Fixes
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.