Wrapbook Design Challenge

A digital platform to onboard your workforce, calculate wages, process payroll

& handle insurance.

film-crew.png
Mockup-Header.png
np_work_1819106_000000.png
ROLE 

Product Designer

Low to High-fidelity wireframes, Prototyping

np_clock_2795786_000000.png
DURATION

2 Days

np_tools_1523305_000000.png
TOOLS USED
0_mYVl-9Tdk0n75oPO.png

Adobe XD

np_business-client_2845470_000000.png
COMPANY
CHALLENGE

Recreate the user experience and user interface of a user submitting the timecards in the Wrapbook web app. Following are the challenges that I tackled:

  • Time information is overwhelming in the current experience

  • Current experience does not facilitate data input spanning multiple weeks

  • Current experience does not look beautiful on mobile

  • Current experience shows calculated and blank information in one screen

  • No ability to enter information quickly

PROCESS
Research

Research the market and other apps

Define & Design

Sketch solutions and simplify the current experience

Validate

User test to validate the solutions

Iterate

Improve to accommodate ethe changes

Prototype

Finalize the

high-fidelity prototype

RESEARCH

To understand the market, I looked at different competitors and analyzed their user experience. Some of the apps that I saw were Harvest, Quickbook and Hubstaff.

Since I was not familiar with the Wrapbook product, I went through the demo and understood the difficulties that the company was facing.

DESIGN
WhatsApp Image 2020-04-06 at 12.52.13 AM

Wrapbook App - Web

  • To minimize the clutter, I add the collapsible menu. Since the information in the current was too overwhelming, I added the "Day View" and "Week View" feature, where you can set any view as your default and add information easily.

  • The employee profile was moved to the top navigation because it was not very obvious on the side-bar navigation.

  • A delete icon was added after entry, in case the user wants to delete any day which is not included in his project schedule.

  • Also, the ability to type in the time was added as compared to selecting the time to make it quicker and simpler.

5.png
  • To enable the user to add the values quickly, I added the "copy values" element. Every time the user will add the new value in the row below, it will prompt them to copy values from the above entry.

6.png
  • Once the user saves one week of entries, on the next screen he gets the ability to "Add another Week". The previous entry is minimized as shown in the below screen.

9.png
  • When the user clicks "Save & Review", he gets to see the summary and the calculated amount in the screen below. Here he can also, "Add another week" if he wants.

12.png

View the complete Web Prototype

PROTOTYPE

Wrapbook App - Mobile

1.png

The workweek selection is done on a separate screen to minimize the clutter and information overload.

2.png

Instead of showing cards of all the days of the week on one screen, I changed it to one day view at a time. The user can move to the next pr previous day with the arrows.

Once the user has added the day's entries, he can move onto the next day.

If a user wants to delete any day in the week , he can do that with the delete icon.

3.png

The user here can copy the values from the last entry to save his time.

4.png

When the user is done with adding entries for one week, he can add another week from this button.

This section shows the summary of the last week's entry.

This can be maximized to view all the entries.

This section shows the total calculations of the week.

The timecard is submitted here for approval.

View the complete Mobile Prototype

PROTOTYPE

Thank you for giving me the chance to work on this challenge. I'd love to get your feedback on things I could improve on or have done differently.