Interface Design of Native Desktop Application for a fictitious Analog to Digital Tape Conversion Business
overview
type of project
Academic Assignment
(for INF2191: User Interface Design)
tools
Sticky notes, Balsamiq, Sketch, Figma.
tasks
Lean UX, Sketching, Storyboarding,
User Interface Design, Prototyping.
team
domain
Media
timeline
4 days
problem statement
You are working as a user interface designer consultant and have been subcontracted by a company to design a native desktop user interface.
Your client runs a small business that converts old tapes (e.g., VHS tapes, cassette audiotapes) into digital formats. They would like to have a desktop app to manage their clients and orders.
Deliver a high-fidelity storyboard of the first MVP release to your client.
The MVP should allow staff to:
- Add a new customer account
- See customer accounts
- Delete a customer account
- Add an order for an existing customer (assume the customer already exist in the system)
- Show an overview of the orders for a customer (i.e., opened order(s), transaction history/completed order(s)). This should include a way to mark an open order as completed (i.e., close an order).
After each stage, you should find a way to obtain quick, informal feedback on your design. Your user interface can be designed for macOS or Windows.
solution
The native desktop application provides Fast Forward Digital Labs staff with an easy, efficient and intuitive way to manage customer accounts and order details.
feedback from prof., grade/marks consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
exploration
Along with the staff’s needs and obstacles, a Lean UX approach was used to identify the business requirements, assumptions and risks.
proto-persona:
Tom, Media Technician
demographics:
19-year-old college student
Technologically fluent
needs:
Efficiently and easily manage customer accounts and orders.
obstacles:
Current software (MS Excel) is cumbersome and confusing.
success state:
Less time spent on managing customers and orders.
assumptions:
- Staff is transient and changes every few months.
- A desktop application will be easier to manage than the excel sheet used currently.
- The business has just a single location and a desktop computer is available for use by the staff.
business requirements:
- The solution should be easy to use and have a shallow learning curve.
- Staff should be able to view, create, edit and delete customer accounts and orders.
- Staff should be able to see an overview of open and completed orders for a specific customer.
design considerations:
- Since this is a small business, a desktop application would allow for local storage of information, eliminating the need for a constant working internet connection.
- A table style is used to display order details because it is similar to the excel sheet format that the staff is already familiar with. However, multiple viewing options are provided for ease of finding and understanding records.
Having never designed for it before, I chose to create a native desktop application for macOS, since it gave me the opportunity to explore an unfamiliar design system.
In addition to going through the Human Interface Guidelines provided by Apple, I also searched for some basic screens to discover different ways to display relevant information and identify best practices.
sketches
The application was initially divided into two separate parts, one for customer management, and the other for order management. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
initial feedback
A quick feedback session with a potential user highlighted some issues and complications with understanding the flow of the application.
Separation of Customer and Order sections is unclear.
“Why are orders and customers separate? Why does this button also take me to the Orders tab?”
Solution: Customer specific orders added on same screen.
Confusion with buttons for editing, adding and deleting customers and orders.
”Is the edit button for customers or orders?”
Solution: Better segregation of buttons.
Contextual search is unclear.
“Is the search for customers or orders?”
Solution: Customer search field moved based on Gestalt’s Law of Proximity. Orders will be filtered on separate tab.
(not pictured for MVP)
Absence of an overall overview.
“How to see the number of current open/closed orders? Do I always have to use a filter for it?”
Solution: Dashboard created to show overview or orders.
(not pictured for MVP)
Lack of error prevention.
“What happens if I click on a different customer in the middle of adding a new order?”
Solution: Order creation shifted to a box, effectively disabling the Customer column.
Insufficient information provided about items.
“How to add details about items in order?”
Solution: Item description added, no. of items can be added there with a description of the items.
medium fidelity storyboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
final feedback
Another quick round of feedback helped fix additional concerns and refine the user flow.
Continued confusion regarding editing, adding and deleting customers and orders.
Solution: Changed layout based on Gestalt’s Law of Proximity, to make it clearer.
Unclear about the status of order.
“Does green mean open order or completed order?”
Solution: Toggle button replaced with a combo box for clarity (with pre-specified steps from app settings).
Unnecessary action is allowed.
“Once I close an order, why should I able to open it again?”
Solution: Once an order is marked complete, the alert confirms the action and it moves to the Order History tab. Its status becomes unchangeable.
Item description is ambiguous.
“What information should I include here?”
Solution: Replaced with steps to print and stick labels. Each label is associated with a single item, eliminating the need for a description.
Limited customisation.
“How to assign different input and output types to items in the same order?”
Solution: Input and Output type can now be selected individually for each item.
Invoice/cost is not visible upfront.
“How can I see the total cost before confirming the order?”
Solution: New, itemised order detail screen added before confirming the order.
high fidelity storyboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
future potential
- Given the time constraints, I was forced to limit the scope of the application. However, this enabled me to focus on the basic needs and requirements.
- I would have liked to expand on the dashboard screen and the orders screen, which are currently not in the scope of the project.
- Currently, the application allows the staff to save customer’s billing and shipping addresses but does not explore the user flow for pickup or shipping of orders to the customer. This is something that I would like to design.
- The design currently works on the assumption that Fast Forward Digital Labs has only one location since it is a small local business. Considering the business was to expand in the future, I believe it is important to explore the option of an operating system (OS) independent application, with the ability to sync information to a cloud.