Lo-fi Wireframes Version 1

I began the design for my app by creating the wireframes of the base screens I had sketched out. This included the home, search, teams and profile screens. These screens would serve as a starting point for the next screens. This style in which I initially envisioned the app is a dashboard/tile style layout, with each section of content being displayed horizontally. An additional screen I created that wasn’t part of the base screens was the finance screen, this was a feature I was unsure of adding and keeping however, I created a lo-fi screen anyway to see how it would look and fit into the app.

The initial onboarding is very simple, I tried to reuse shapes from the logo to keep a level of consistency, and highlight the functionality of the app with the text.

The settings and notification screens followed the same layout, a typical vertical list spacing.

What I was unsure of at this moment and wanted to improve was the team screen, what should be included on it and my teams screen, and whether all of that content should be on that page or within each separate team’s area.

Group 54.png

Lo-Fi Wireframes Version 2

The second version of the low-fidelity wireframes involved more iteration, specifically for my teams, team and profile screen. At this point, I wasn’t sure how to display the user’s teams in a way that looked desirable so I tried a few different options, I think encasing each team’s logo in a container helps with the spacing and fills out the area a lot better.

A whole new page I added was the calendar page, which also had a planner within it. Another new page I created was the scan page, this page would give the users the ability to scan in images, documents or sketches. This is particularly useful as the target audience is creatives who work on paper within their workflow.

The activity and chat screens look as expected, not too complicated to not overcrowd the screens, and not too unusual to where the user would not find them intuitive and like the standard.

lofiv3.png

lofiv1.png

The specific team screens I had a lot of variations of as I wasn’t quite sure what to include on this page again, I knew I wanted the team logo and some info about the team, so this would be situated at the top, away from the actual workspace.

Secondly, on each variation I had the team workspace, however I needed to figure out what else would need to be on this page and whether that workspace is taking uo too much space.