Wrapbook Design Challenge

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

& handle insurance.

ROLE 

Product Designer

Low to High-fidelity wireframes, Prototyping

DURATION

2 Days

TOOLS USED

Adobe XD

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

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.

  • 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.

  • 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.

  • 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.

View the complete Web Prototype

PROTOTYPE

Wrapbook App - Mobile

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

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.

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

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.

GET IN TOUCH

Do you want to know more about me or my work?

Or do you have a cool project that you want me to dive into?

Send me an email!

  • Medium-white
  • White LinkedIn Icon
  • White Twitter Icon
  • White Instagram Icon