Paylocity Widget

Task

I was tasked to create a widget for a digital application to help benefits its users. I design a widget for a company called “Paylocity”, which is made for a person’s workplace. The main fuctions for the app is to clock in and clock out, community annoucments, and timesheets. Theses are the 3 main fuctions I want to incorporate for the widgets.

Sketch

Sketches of the widget project on a white sketchbook in a 3 by 3 grid. The last rwo was seletcted

These were my sketches. My main thing I'm going for in this project was wanting to keep the same style as the actual app and it's main fuctions.

Comps

Comp 1

The medium size widget. It has both the clock in and clock out function and a way to see community annoucments The large widget size that shows the previous 2 fucntions and your timesheet.

These were my first set of comps. I really based off these size from the offical paylocity app. Again the main 3 functions were to clock in and clock out, see any community annoucment, and keep track of your time card.

Comp 2

The medium size widget. It has both the clock in and clock out function and a way to see community annoucments The large widget size that shows the previous 2 fucntions and your timesheet.

These were my second set of comps. Very similar to the first excepet for the large widget size. The punch button and the timesheet are in the same row instead off all being in one column.

Final

Sectons

The final design for the widget put on a grey background.

Mockups

The final mockups to see how the widgets would look like on an iPhone 14 Pro