BFA - Wireframes and User Flow

I began to really get into the process of designing a mobile app this week. The process isn’t all that different from any of interactive piece but there are certain affordances that one must take into consideration.

Goals and Objectives

I know what I want the app to say to the world. I want it to be an example of good and proper thinking, design thinking. I want it to be simple and easy to use and have the app itself be an example of design thought. It should provide a way for users to simply load pictures or media of some kind and then ask them questions about their choice. Provide a fun and inventive environment for the users while making them question the real purpose and use for design in their life. Those are essentially the basic goals and objectives of the application. Those goals will drive much of the decision making process however even if they are a tad arbitrary.

Beginning - Visual Data

With those goals in mind I began collecting examples of other social media sites and apps. By looking through them I have been able to get a better idea at what I want to do. Do I implement a Facebook like timeline? Do I want or need to display a lot of different information about people and what they’re doing? User Flow From that point I began to define the flow of the user through the application. What was going to happen after sign up? Would there need to be a explanation of the application, it’s purpose, and how to use it? I created a simple written step by step that defines the step a user would take to se the application. Notice that different choices provide new options but that some choices all lead to the same conclusion. I realized it was a good idea to allow for “looping access” or to provide access points which would carry the user all the way through the app. For those who hadn’t signed up of signed in they would be led to that page instead.

Wireframing

Here I identified the user flow through the application focusing on how they entered the app and what would happen at each next page. After identifying and planning the flow of interaction I went into the wire framing portion of the app.

Here I explore various content placement and navigation choices. This process should have more emphasis on basic structure and content hierarchy than visual presence, though it will affect the visuals for sure.

As you can see I separated the pages and interactions a bit trying to see if different pages would provide new interactions not found in the others. I realized that I wanted the user to have access to a universal nav at every page so worked to figure it out. The iPhone has a notification center that is accessed by pulling down from the top of the device, so I shouldn’t place anything there. The bottom could work but it’s not as natural as swiping across. Finally I realized that there was a lot of affordances a touch screen offered that weren’t being used. We could place a main nav on the left side and still have swipe navigation. All it would require is a hold to unlock feature, hold the appropriate place for 1 or 1.5 seconds and then pull it out. This would make their access to the nav an intentional act but still allow normal swiping.

There could also be a drag up - pull over method as well.

The next step will be digital wireframes and planning. Which will give me a more accurate idea of dimension and usability.