The wireframing process for the desktop began after deciding that the mobile app would be a companion instead of the main focus.

Lo-fi Wireframes

The first base screens that I created were two logo screens for onboarding, a login screen, a home screen, a teams screen, a calendar and planner screen and a profile screen.

These were very simple at first, a dashboard style teams screen as I previously tried for the mobile version will now be for the desktop version.

desklo1.png

desklo2.png

For additional screens, I enlarged the tiles on the teams screen as it felt empty, and put some content on the team screen to begin visualising. Lastly, I created the screen for adding a new team.

lofi4.png

Mid-fi Wireframes

I moved on to mid-fi wireframing pretty quickly as I had already established a lot of the content that would be on these screens when designing the mobile version first.

For this, I added some colour, patterns and more content to further help me visualise the app.

The onboarding, login and teams screen remained the same except for content being placed within the pages.

deskmid1.png

middesk2.png