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:
No comments:
Post a Comment