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.