ROLLER DERBY iPHONE APP: FINAL VIDEO

ROLLER DERBY iPhone App, Keynote

iPhone Roller Derby App

iPhone App Wireframes

Bobblehead website- update

Updated Website

As much as bobbleheads aren't "me" I really liked working on this project. It was a challenge at time most definitely, but it was very rewarding in the end. I had an opportunity to really tailor my website to a particular look and feel. I might not have been able to visually get all the exact detail I expected due to time, but because of that I learned to be selective with the visual details and pull out what was most important. For my own sake, I tried to keep the experience with the navigation simple. Being my first time creating a website as well as my first time using a new program it became a chance to explore and see what MUSE was capable of. 

my Pinterest inspiration page.

the iphone app!

fathm app

springpad app

Bobbleheads, Final Website

View the final Bobblehead website here.

Rendering Methods, Round 1

Collection Infographics

first round digital sketches

Project TWO: Online Collection, sorting / infographics

3 Classifications Methods
-By jersey number
-By height
-playing experience (seasons played)

 HEIGHT

 

 JERSEY COLOR

 

JERSEY NUMBER

Lined up by Head Circumference 

   

 My Familiarities with players

jersey color
head circumference
personal association
age
team name
sport
personal stats (age, height, weight) vs. bobble head stats (year made, height, weight) 
alphabatise names 
price
player history

Infograph Ideas 

1. Bobble Head History
2. KC sport History
3. Year personally received/ year made/ handed out 
4. Player vs. Bobble Head (measurements, jersey, etc.) 
5. Price? Collectable? 
6. Material 
7. Seasons played
8. Total touchdowns/ home-runs / goals
9. Height/ Head circumference
10. Age of player vs. age of bobble head
11. player born local related to team location
12. Jersey history
13. Games played 
14. years sat on shelf

WALL STREET JOURNAL web redesign, video/presentation

Above are my slideshow keynote presentation as well as the animation. This process was a complete new experience for me. I had many moments of learning and struggle, but my biggest obstacle was creating the visual aspect for my re-design. I tried to really stick to wireframes so not to get off track in the navigation.  I do not like admitting to that seeing that I am a designer, but as I have learned the under structure and process is just as important as the way something looks. A webpage can look beautiful, but if it is hard to navigate and lacks in direction then a user is not going to be able to enjoy the visual renderings. I wanted to make sure that I hit all the objectives of this project. I incorporated a new social networking feature, and I wanted to create a new structure for the viewer to see the news in. Another thing that had to conquer was the typography. I started with tiny text that seemed appropriate at the time, but then when I took the time to compare it to actual news sites it was not correct. I had to really specify what information about each article needed to be present. I decided to narrow it down to just the article title and an image. I created a horizontal space instead of the typical vertical. I wanted the navigation to be some what specific, I didn't give the viewer a lot of room for information because I found after being on the WSJ website it to be very overwhelming. Visually I used a lot of line work as repetition for the horizontal experience. The horizontal lines over the headers and and the green line above the Food & Drink section.  I wanted the navigation to be direct and simple. The only information seen is the information that one has selected. 
For my social media feature I named it "Your Community" I tried to think of a name that has yet to be used. Such as timeline or media flow. Your Community is a collection of things stemming from Facebook and Twitter friends. It consists of images, videos, stories that friends have commented on your have put onto the Community space. I want the viewer to have the ability to drag images that link back to the story. It is is also a horizontal space for the reader to skim through. They can drag an image (as shown in the animation) and the other categories will separate out of the way. Essentially it is like a news-feed area, but I want the viewer to be able to automatically see what is going on and to have more control of what they are seeing or selecting. I am sure that this idea can go much further and deeper in many aspects. 
A few things that need to be improved were some digital craft issues, as well as some spacial things. Such as the story at the end appearing as an overlay. It would benefit to have the story be able to really take up the space so that there can be more room for information to be shown. Also, my scroll bars need to be better incorporated within my design. Possibly just using arrows on the sides so that the user understands they need to scroll from left to right. 
Overall, this was a great project to set my mind up for the next Info Arch projects to come. Designing for such a selective space is challenging, but it will help me work through certain more particular projects in the future. 

WSJ, Re-Design, WIREFRAMES

WSJ Re-Design Wireframes: Information Architecture

IA, Designed Wireframes

IA, WSJ Site Map

IA, Digital Wireframes (2nd Round)

IA, Digital Wireframes

I want to create a system that is based on a horizontal scroll rather than the typical vertical. I want to turn this web experience into a more simplistic way of reading the news, but still interactive at points. This is the home page where the navigational bar is located across the top like a file folder of tabs. The user has the option to scroll left or right to view more, but they will always be greeted with the Top Story, videos, and most popular first. Below the main section I wanted to have a  "media" bar. This being a way for people to see what others are posting if it be from Facebook, comments from Twitter about stories,  or popular commented photos.

 

This shot shows the viewer clicking on the Life & Culture tab. The tab for Life and Culture text grows a bit larger as well as this section coming forward in on the navigation bar.  All of the the sub-categories like Food & Drink, Arts & Entertainment, Travel, etc. are shown and the user can scroll left and right to see more categories. In each category box or section certain stories, images, and videos come up. The user can select a certain section which leads to the next shot.

In this case, the user selected to see more about Food & Drink. This category contains recipes, cooking videos, any stories involving food and dining. 

When the user selects a story it enlarges on the screen from the horizontal sequence of article underneath. 

#2 Scenario 

I want aspects of my design to allow the viewer to be in control of the media they are seeing. I have a media bar underneath the main section of articles. This section is constantly moving and updating with friends comments from Facebook or Twitter. 

They have selected a story which enlarges. 

I want to allow the ability to drag images/stories to the media bar so that their friends can see what has been read, what is popular... etc. Also being able to see other people's comments on other stories. This bar is constantly in motion like a news feed.

After Critique Notes

Just the overall set up and composition of my wireframes and how they are supposed to be represented is too boxy. I made the boxes to show the "space" that the information would be taking up. In my next round I just need to to put the information. Images will still be boxes and such, but any other info needs to placed and designed in the space.  I will  also be combining these two scenarios. For example, from Food & Drink dragging a story and showing the Media bar in the same sequence of steps.