SCORPION HOME WEB & MOBILE APP

From Marketing to Full Service Cycle

Scorpion, an internet marketing expert, wanted to design a B2B tool that allows businesses to complete a service from start to finish. I collaborated with the Scorpion team to design the UX and UI of Scorpion Home, a web and mobile app. This proprietary digital tool allows home repair businesses to book an appointment, dispatch technicians, manage timesheets, communicate with customers, manage leads, provide price estimates, create invoices, complete payments, and generate business reports.

My work focused on two main flows:
• Timesheet and time tracking to enable payroll reporting
• Generating and editing invoices, estimates, and purchase orders

ROLE & DELIVERABLES

Product Designer

UX design
Rapid prototyping
UI Design
User testing
Handoff to development

Timesheets & time tracking

The main objective of this flow was for businesses to be able to access and edit an employee's time records. This would help unlock key information about a business, such as the amount time spent on a particular job, how much does a job really cost, and how much is it brining in? The UX and UI for this feature makes it easy to keep track of employee’s time and enable payroll reporting by collating raw timesheet data into a visual weekly summary. Office staff can easily navigate between weeks to see individual employee’s clocked time and edit in case of errors. The design also allows so easily see who is overworked, and who can handle more on their plate.

Designing a Powerful and Intuitive Video Player Through Testing and Iterating

In order to bring GMB video training programs to life, we had to pay special attention to the design of the heart of the product: the video player. In addition to the standard video player controls like play, pause, fast forward and rewind, we had to incorporate other controls such as exercise timers and countdowns, skip or return to exercise, and view full demo videos. How do we avoid a crowded interface, specially on mobile devices?

It was especially important to consider the context of use and device orientation. The app would be used at home or at the gym while the user is working out. We user tested and iterated on the video player feature to ensure the right amount of control while limiting the number of required interactions with the device. We tested the video player and made adjustments to ensure ease of use.

Top: Wireframes for weekly view of time table
Bottom: final UI design for weekly view of time table

Efficient time entry & editing

Special thought was put into the way time is entered to ensure a quick and error free experience. Time fields have a dropdown, allowing users to easily select a time without needing to manually type it in the correct format. However, they also have the ability to free type or edit the hours and minutes of an entered time to allow for full customization to the minute while avoiding unnecessary excesive scrolling within the dropdown.

Time picker interaction is a free type input field and a dropdown component.

Estimates, invoices & purchase orders

Businesses need the ability to create invoices and price estimates indicating the agreed prices for products and services, taxes, and applied discounts that make up the total price of a job. Invoices needed to include important information such as date, quantities, service address, contact, description of items and services purchased, terms of payment, among others. Businesses need to be able to see and update the status and details of invoices, estimates, and purchase orders on site and also from their offices.

Common business practices and requirements mandated a large amount of information to be included in these documents. I designed a digital version of documents used to also generate printed versions. The typographic treatment of the screens was extremely important to ensure ease for reading and consistency. Additionally users still have the ability to generate a PDF view for print.