Challenge Summary
Welcome to the Trinity Voucher Management System UI Design Challenge.
In this challenge our European telco client, Trinity, is looking for your help in designing their new voucher management system (VMS). This system will help their employees in managing the end to end lifecycle of Trinity top-up vouchers.
CHALLENGE OBJECTIVES
- To create an 7 screen responsive UI for a web application.
- To explore and provide a seamless flow to complete user goals.
- To apply the provided design system to your solution.
- Desktop and mobile format.
Round 1
Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.Desktop Screens
- 01 Dashboard
- 03 Create Voucher Order Screen
- 04 Voucher Order Details Screen
- 05 Voucher Maintenance Screen
- 06 Pinblock Screen
Mobile Screens
- 01 Dashboard
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.
Desktop Screens
- 01 Dashboard
- 02 Voucher Order List Screen
- 03 Create Voucher Order Screen
- 04 Voucher Order Details Screen
- 05 Voucher Maintenance Screen
- 06 Pinblock Screen
- 07 Pincheck Screen
Mobile Screens
- 01 Dashboard
- 03 Create Voucher Order Screen
- 04 Voucher Order Details Screen
APPLICATION OVERVIEW
- To keep up with its competitors, Trinity offers a wide range of flexible payment options including top-up options for its customers. To manage the top-up vouchers, Trinity partnered with Topcoder to get its new business support system, the Voucher Management System designed and developed.
- The VMS is capable of handling voucher orders including voucher batches from dealers. After the creation of orders, the voucher files can be downloaded and sent to the dealers (not part of this system). Upon confirming the arrival by the dealer, the vouchers can be activated.
- The system is also capable of voucher maintenance. This includes pinchecks (checking the status of vouchers) and pinblocks (blocking vouchers).
AUDIENCE
Users are web savvy employees from business departments of Trinity.
PERSONA
Name: Harry
Occupation: B2B Sales Representative
Goals:
- Answer voucher order inquiries in an easy and timely manner.
- Maintain the existing vouchers.
Frustrations:
- The current system is outdated and does not convey a great user experience.
Wants:
- Wants to work with a system where all information is available and the voucher management tasks can be handled easily by a few clicks.
USER STORY
Harry gets an incoming purchase order via a 3rd party system from Lorem Ipsum Mobile Store, a major dealer partner of Trinity. In this order they request 100 pieces of 10 Euro vouchers, 30 pieces of 20 Euro vouchers and 5 pieces of 50 Euro vouchers. Harry opens up the Trinity VMS and creates the new voucher order for the dealer. After the order has been submitted and processed by the back-end processes, he exports the voucher zip files and sends it to the dealer via email. Upon confirmation from the dealer, Harry looks up the order again in the VMS and activates the vouchers. Two days later an unfortunate event happens at the dealer’s office. Someone stole some vouchers from the fresh bath, so the dealer informs Harry quickly, who blocks the stolen vouchers making it impossible to use them any more.
DESIGN GOALS & PRINCIPLES
- Easy to use, modern, intuitive interface
- Seamless flows for task completion
- Using the provided design system for familiarity
EXPLORATION SCORE
Creativity: 4
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 10
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 6
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: 9
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
GLOSSARY
-
Voucher: A voucher is a combination of a serial number and a PIN number that is used by subscribers to top up their subscription’s balance by a fixed amount.
-
Voucher Batch: A number of vouchers having the same attributes (e.g. amount, expiry date) created for a single dealer within a purchase order.
-
Complain Voucher: A voucher which is issued to customers as a good-will gesture in case of complaints.
-
Voucher Order: One or more voucher batches created on request by a single dealer.
-
Pincheck: Getting the status of a voucher or a list of vouchers. Showing if the vouchers have already been used or not.
-
Pinblock: Batch blocking of vouchers. The vouchers will not be able to be used when blocked.
SCREENS/FEATURES
Please make sure your design includes the following screens/functions. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the below content and functionality and it is in line with their design system (attached). If you would like to suggest different screens that would solve the same problem(s) we are open to see that as well.
Global Elements
In general, each screen will have the following structure:
- Global header with the title of the application and the user profile
- Main navigation
- Content: All the data tables in the content areas of the screens must provide the following functionality (Please explore the attached design system in great detail for more information.):
- Breadcrumbs
- Action Items (if applicable)
- Filter and Sort for table data
- CSV/XLS export functionality
- Action buttons should be provided for each record in the lists (if applicable)
01. Dashboard
This is the home page of the application. We would like to see the below sections on this screen.
Action Items: The Trinity design system provides a way to show links to the most important user tasks as so called action items. On the Dashboard we need these links to the main functions, which are as follows (suggestion, open to exploration):
- Create new voucher order
- Block PIN
- Retrieve PIN status
Data Table (Table 01 - Voucher Orders.png): On the Dashboard the user can see a list of existing orders. In the table the following fields should be shown:
- Order ID
- Order name
- Status (possible values: "In Progress", "Pending", "Complete", "Failed", "Cancelled", "Expired)
- Reason Code: reason code for status change if any
- Reason Text: reason for status change if any
- Creation Date
- Submission Date
- Last Update Date
- Dealer
Actions on the table should be provided as well as follows:
- Activate/Deactivate existing voucher orders.
- Get voucher files (for a selected order)
- Link to a selected voucher order’s details.
02. Voucher Order List Screen
This screen shows exactly the same data table and functions as the dashboard, except it doesn’t have the action items, so it provides more space for the table.
03. Create Voucher Order Screen
On this screen the user can provide all the data needed for creating a new voucher order and can submit the data for order creation. Explore the interaction types (modal/side dialog/unique screen) provided in the design system for the best choice. A voucher order will belong to a single dealer and can consist of one or more voucher batches. We need the following input fields and controls for the form:
- Dealer: A dropdown with autocomplete would help the user to find the right dealer form a list.
- Order Name: A text field for a name/comment for the particular order.
- Adding batches: As the number of batches to be added to an order is flexible we need a button to let the user add a new batch that consists of the following fields:
- Voucher template: To be selected from a list (e.g. 10 Euro Voucher). See the attached sample data.
- Quantity: number of vouchers in the batch
- PO (purchase order) number: Coming from another system, free text field
- Order Number: coming from another system, free text field
- Create Order button: Upon clicking this button, the user gets redirected to the Voucher Order Details screen.
- Please provide a success message and an error message in case of any errors would happen during processing the request.
04. Voucher Order Details Screen
This screen shows the details of a single voucher order. The order level information should be shown, and the list of voucher batches added to the order as well. The following fields are needed (same fields as in the list of orders table):
- Order ID
- Order Name
- Status (possible values: "In Progress", "Pending", "Complete", "Failed", "Cancelled", "Expired)
- Reason Code: Reason code for status change if any
- Reason Text: Reason for status change if any
- Creation Date
- Submission Date
- Last Update Date
- Dealer
- User: Person who created the order
The ordered batches list needs the following fields (Table 02 - Voucher Batches):
- Batch Id
- PO number
- Order number
- Voucher file name (a zip file)
- Type (same as the template name at creation)
- Number of vouchers (created in the batch)
- Status (possible values: "Complete", "Active", "Cancelled", "Expired")
- Creation Date
- Expiry Date
- Wholesale Price
- Amount
- Currency
- Validity Period: Period of time a batch can be activated after creation.
- Shelf Life: Period of time following activation of a voucher batch after which any unredeemed vouchers are expired
Actions on the table should be provided as well as follows:
- Exporting the voucher files (both in line and bulk)
- Copying details for the current voucher order’s batches to the clipboard.
- Search field for order number.
05. Voucher Maintenance Screen
The system provides the users with batch maintenance options for the existing vouchers. Explore the interaction types (modal/side dialog/unique screen) provided in the design system for the best choice. The user can paste or type one or more (comma separated) voucher serial numbers or PIN numbers into a text area and select the function he would like to use from the below options. The system is not capable of making a difference between PINs and serial numbers, so the user has to explicitly choose the option. Explore the most user friendly way of providing the 4 options (e.g. letting the user select the PIN or serial number option by radio buttons etc.)
- Cancel with serial number (landing on the Pinblock screen)
- Cancel with PIN (landing on the Pinblock screen)
- Retrieve status with serial number (landing on the Pincheck screen)
- Retrieve status with PIN (landing on the Pincheck screen)
06. Pinblock Screen
If the user selects the cancelling option with either serial numbers or PINs on the Voucher Maintenance screen he will be redirected to this page. He will be shown the list of numbers he entered (read only) and the following information has to be entered through the following controls:
- Reason code: A list/dropdown to choose a reason code for the cancellation.
- Reason: A text box for entering free text, like for instance the vouchers have been stolen.
- Submit button: The user has to submit the data for processing.
After the user submits the reason code, he gets a status list of the vouchers affected, which is similar to the below screen, only it contains only cancelled statuses.
07. Pincheck Screen
If the user selects the status retrieval option with either serial numbers or PINs on the Voucher Maintenance screen he will be redirected to this page, where he will be presented with a list of the specified vouchers with details including their statuses. The fields to be shown in the list are as follows:
- Voucher PIN or Serial Number (if a PIN number is being shown, the last 4 digits must be masked, like 10****)
- Status (possible values: "Cancelled", "Created", "Active", "Expired", "Redeemed")
- Redemption Date (if applicable)
- Allocation Amount
Please create 2 variations:
- One for a simple pincheck with various statuses
- One for the landing screen of the pinblock function with only cancelled statuses.
BRANDING GUIDELINES
- You must follow the branding guidelines and design system attached.
DESIGN ASSETS
The below items have been attached.
- Sample data
- Trinity design system
- https://vaadin.com is the framework that will be used for developing the application, so please check for any constraints it might have on the solution you are proposing.
FORM FACTOR
- Desktop - 1440 px width
- Mobile - 375 px (iPhone 8)
FINAL DELIVERABLES
- All original source files
- Create files in Adobe Photoshop, Adobe XD or Sketch, Figma.
- Marvel Prototype -
- Upload your screens to Marvel App.
- Send your marvel app request to pere.viktoria@gmail.com
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
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.