Before sketching my screens, I created a map to determine which base screens would be necessary to create.

IMG_0521.JPG

Rough Sketches

I began my rough app sketches with ideas about how the onboarding experience could be for users, introducing the app and its functionalities.

IMG_0519.JPG

IMG_0524.JPG

IMG_0522.JPG

IMG_0518.JPG

IMG_0523.JPG

Following the onboarding, I did a quick sketch of what could be included within the navigation bar, and some of the icons necessary.

IMG_0525.JPG

Next I sketched the log in/sign up screen, home page options, explore page, collaboration page and the profile. For all of the rough sketches I use a sharpie, to focus most on layout and not the detail of each page yet. I find taht this allows me to sketch more freely and get down the basic ideas down on paper, before figuring out the details.

IMG_0520.JPG

IMG_0526.JPG

IMG_0527.JPG

IMG_0528.JPG

Refined Sketches

Now that the rough sketches are there for reference, I moved onto some refined sketches for the base screens.

IMG_0514.JPG

IMG_0516.JPG

IMG_0515.JPG

IMG_0517.JPG

During this section however, I wasn’t sure on what I intended for the home page to display. What I ended up sketching and coming up with was what the user could find within the team page anyway, so this was conflicting. I intend to solve this issue within the next set of sketches after some feedback and advice.

Revised Idea

After slightly altering the purpose of my app and deciding that the desktop will be the main focus, I decided to create story boards to aid me with the wireframe sketching stage. Understanding the users thoughts, feelings and actions will help me determine how to make the service more user-friendly for the target audience.

IMG_1010.HEIC

Desktop Sketches

Crazy 8’s