Degree Project - Week 12

Currently I am in the final steps of adjusting my video, setting the timing, and working on how the assets will be presented. Above is a context shot that I've been posting on Dribbble as I work on the project. 

Degree Project - Week 11

Working icon.

Currently animating in keynote.

Link to screens coming soon! I have like 40 screens and my photoshop file is about a gig. My computer literally will never forgive me for this project haha. Posting them up soon!

I recently made another round of adjustments and UI tweaks thanks to your input! Thanks Marty!

Degree Project - Week 10

I've been screen testing with this new app Design Duet which connects directly to the photoshop to display your screens on iPad, iPhone, etc. 

Degree Project - Week 9

Currently I am working on the last 25% of my design work and will soon transition into the presentation phase. I will be working with an animated keynote, poster hopefully, and website. 

Current Inspiration

Degree Project - Week 7

Mom/Entrepreneur User Persona Feedback: "We have a private moms group where we feel comfortable discussing issues that pertain to moms, that we don't want everyone else reading. We plan play dates on here, birthday parties, etc. It would be nice to have more info on local activities so we wouldn't miss things. ie, (baby name witheld) LOVES Winnie the Pooh, and I found out one of the theaters did a winnie the pooh play. I was really disappointed we didn't know about it in time."

"it's nice to have an outlet to rant or ask questions or have discussions about parenting. in our moms group, we have each shown our weaknesses, and have found that we can trust each other. none of us claims to be perfect. an interesting note- i see 5 of these moms regularly, have met a few others once or twice, but the majority of them i've never met."

^ Better viewing order than Blogger. 

INSPIRATION:

Degree Project - Week 6

New updated wireframes with current scenarios. Experimenting with functionality and possible points of interaction. 

Based on those digital wireframes I have created the following: 

• Logging into the app.
• Setting up with FB or Twitter will allow them to immediately see how the app functions.
• The tutorial will be able to work with their initial connections from FB or Twitter as an example. Based on my sample these are also the two most common networks.
• Currently you swipe from screen to screen in this window for the examples of use and introducing function. I plan on replacing this with a more overlaid function inside the app itself.  

• Setting up initial authorizations.
• This is a pretty standard function across all applications.  

• Connecting additional accounts. These are organized by categories.
• I've decided to take things that walk two lines like Instagram and include it in the Social category. Where something like Flickr I feel would fall into Professional. I feel like showing the accounts that they might not even have helps remind the user that there are other networks out there and they might see content shared from those other networks. 

• App Home / Function: Hold down to reorder categories.
• I think I might remove the functions at the bottom. Less visual clutter is extremely important to me for this project and I think I can nest the needed functions in the top menu.  

• Where the menu exists / reveal quick access to List & Feed. 
• The Menu allows for quick access to a hidden menu: Allowing you to edit the lists, add new lists, possibly another function i'm still working on, and closing the menu.  

• Inside the "Favorites" list, the people / connections that form that list are displayed. The number side by side with them is the amount of new "updates" or content that they have shared since you last (viewed them, contacted them, opened the app) - Still experimenting with that.  

• On the other side of the coin from the Favorites List is the Feed.
• Think of the List as a quick access to specific people who make up those categories where the feed is the collective "feed" of their combined content.
• On the left side of this image is showing the quick access to list / feed through a drop down submenu.
• On the feed itself user content is presented larger because of the selective nature of the feed itself being composed on only people close to you typically any information is intrinsically important to you and thus being worthy of larger screen real-estate. I was a little cautious of this idea at first but so far the outside feedback from P3 and HUGE have been in support of this idea and the psychological importance of those connections reflected in the amount of content allowed in the interface design. 
• To the left of the content is the photo of that user posting content, their name, in this example the content is from Facebook so it has adjusted the buttons to be "Likes" and "Shares". Based on the outside feedback the idea of tailoring those buttons and functionality to the originating social network is something that will help this stand out. If the content comes from Twitter for example the buttons will change to "Retweet" & "Favorite". The ability to reply and share is Facebook native, where it would be adjusted for the network. 
• This is not represented currently in these wires but each post will have an icon near it representing where that content originated. It will help explain the button functionality changes. It can also function as a quick link to the original post on FB or Twitter, etc. 
• On side note some people post to FB using Twitter. Instead of filling your feed with duplicate posts it would know to remove the duplicates immediately. 

• This is the User Profile screen. This would function as a summery of your connections with this individual. How you're connected, what lists they're on within your app. It would be accessible through their user photo in the feed or in the list of users. 
• I'm planning on simplifying this profile screen further. I'm not sold on the Call functions for example. I know FB allows you to call people for free and I could run it through that. I just don't know if its worth cluttering up the screen further at this point. 

• This is two examples of how the user could create a new list.
• As you start to type the name it would populate with names pulled from all of your connected networks. It would be able to remove duplicates. 
• On the left version you tap the contacts that you want to add to populate the new list. 
• Ont he right version you tap the + sign to quickly add or remove people from the list. 

My next step is to start fleshing out the rest of my wireframes, getting them into scenario order, focusing on design, and actual content. Experiment with color, and how it can be controlled by the user.  

Inspiration / Resources:

Degree Project - Week 5

Survey Results (Click to view analytics)

Updated User Scenarios:


Wireframed Scenarios:
(This was done using the Paper App and my iPad. I have sense ordered a stylus to prototype much faster!)


(Scenario 1) Introducing

• Introducing the Application / On boarding - Welcome/Tutorial Screens. 
• Signing up / Logging into the App.

(Scenario 2) Implementing 

• Connecting your networks / Looking over your profile.

(Scenario 3) Tailoring

• Tailoring / Editing your algorithm established connections. User control. 
• For example the app has collected the networks of all of your individual family members.
• They can then select only the members of their family they want to closely follow. 

(Scenario 4) Benefiting / Contributing

• Viewing the content of those now tailored master feed of "All" of their connections (or just a category like "Family", or "Favorites".
• Experimenting with the different ways content in the feed can be denoted as what source its from: ie. Facebook, Twitter, Tumblr, Linkedin, etc. I'm planning on small icons currently.
• Replying to that content in a quick, and familiar way. Experimenting with popovers, and as shown below slide to reveal menus in a horizontal and vertical way. 

Reply V.2


Reply V.2

App Studies of Brewster, and Supply. Both utilize a series of unique but sensible hidden or collapsable menu features. Something I've been struggling with integrating into my own designs.

Svpply is a great source of inspiration regarding its flat design style, subtle use of color and clear settings and roll over navigation interface.


Brewster is a tailorable contact app which hits close to home regarding my app concept but fails to deliver content outside of contact information and links. Its ability to manage contacts and supply data from existing networks was fascinating and I believe that I see where I can improve on its concept with my own.

Forthcoming Wireframe Style (Functionality Example):Design Inspiration: