Monday, May 13, 2013

Final Project

For the final project I had the privilege of working with Kevin and Asaf on Text Safe. Its a concept for a mobile app that will help users save text files from their phones. Currently there is no app that can do this leaving a user who relies on the the history within their texts to be lost if a restore is the only recourse for fixing their phone. Here is the writeup/proposal for the project in detail explaining what we would create and why. It includes research and usability features/functions.









For the design, we decided to use the iphone (specifically the new iphone 5 with retina display). We chose colors of the text messaging system (blues, gray's and neutral off whites). We also created the design in actual iphone size of 320 X 568px as well as the retina display of 640 X 1136px. Here are the designs:



Wednesday, May 1, 2013

TextSafe

This week we were assigned to groups for the final project. The project is to come up with a potential mobil application that will be proposed and flushed out in wireframes and design before the end of the semester.

We chose to make an app called TextSafe. This app will be able to download and save text message history. Here is the beginnings of a brief we put together to further explain our concept:





Tuesday, April 23, 2013

Design layout

This week our goal was to design layouts for different types of users using FAO Schwarz as a guideline. The first challenge was to design the path through the store that an 8 year old girl would travel with her mother who is a waitress. In my layout I tried to incorporate all of the sections that a mother and daughter would frequent. This would include the candy bar, the doll section and dippin dots.














The next challenge was to layout a plan for a retired wealthy woman. Thinking this woman might like to meet friends for coffee, I added a trip to the cafe. I also added a trip to the personal shopper section downstairs as I believe she would utilize this service when buying gifts for her family.
















Lastly, the final challenge was to map a visit by an adult married couple who were middle income and from middle America. That was easy as I guessed they would need a tour of the entire store. However, laying out the trip became complicated. The trick was trying to layout the entire store without making the design look complicated or be hard to follow. This is my final outcome.







In the end, I realized how we layout items for menus in web design is much the same process. You have to think about the journey of the user and their experience in using the site. You need it to be easy to navigate and fun to use while not being to cumbersome or complicated. This project gave me further clarity in why wireframes and site maps are important when thinking of web design and layout options.

Sunday, April 14, 2013

Theories of Design: FAO Schwarz





When you walk up to FAO Schwarz, It seems like a rather unassuming building.  The only thing that even gives you a hint of what is inside are the costumed live ‘toy soldiers’ stationed at the doorway. This is part of the charm of the store and something they do very well. It’s the idea of being led into a new, almost ‘fantasy’ world. Walking thru the doorway you leave NYC and enter a new world filled with toys and wonder.







As you walk through the store, there are many nooks and turns, each revealing a totally new space (much like Willy Wonka’s factory). Each space is individual with no bleeding between them, but they work in unison to take the customer through the space. There is constant wonder
and surprises as with each corner you turn you find a whole new aspect of the store. Most sections can not be seen from other sections, giving a surprise each time the corner is turned.











It is the creation of this unique world that makes FAO Schwarz the wonderland it is. Children enter and are quickly enraptured by the overall world that is created. No where do you see the boring structural design of say a Toys R Us. It is not the typical institutionalized isles by isles of items categorized by type. Instead everywhere the eye can see is filled with unique, fun and childlike notions. They have stairs and balconies to see the room from different angles.



Even the escalators are different in that they provide a platform for a few feet to allow children time to get on and off the escalators without them being frightening or moving too fast for their smaller bodies and feet. Most apartments in NYC do not have the room for one of the almost life sized stuffed animals, but when you see it in relation to the space built, you almost feel like you can make it fit. The children believe they have to have it. They need their rooms to be a part of this world of FAO Schwarz.













Another design feature of the store is the separation of ages and sexes. The floors and sections of the store are separated by ages. The babies and toddlers are downstairs, the older children upstairs. Upstairs there is a clear divided ‘main street’ between the girls section (all pink and full of dolls and cooking); and that of the boys (cars, science and building).  You find the ‘family’ bathroom on the same side as the woman’s room.  The men’s bathroom side has no such option. In the boys section you find lego land and the famous ‘Big’ piano. You also find the books, science options and model trains. I have always believed this to be a big design flaw. It is dated in its theory of stereotypes for boys and girls. Given the class of people who frequent a store like FAO Schwarz however, these dated stereotypes may still be pertinent. In the upper class of society, boys still make the money and have careers. Girls are the ones to have children and keep the home in working order.









Especially in today’s society where these barriers between girls and boys are falling, I don’t believe there needs to be such a clear divide. If a girl wants to learn science and have that type of inclination, she shouldn’t have to go into a clearly designated ‘boys’ section to do so. Girls should be given more options than having children (as is depicted by the doll nursery) and cooking (cooking classes and parties are available in-store). They should be encouraged to have a science section of their own.







Getting back to the design aspect of the store, one of the things the store does well is to have all smaller toys and candies at eye level of the child. They are all reachable and able to be grabbed and used by the child visiting the store. When you first enter the store, the child is able to clearly see the huge stuffed animals to know they want one, and then are able to grab one right off the shelf. When you walk into the candy section, all of a sudden the bins and choices are all at the height of a child. The parents and adults have to bend down to get candy. When walking around the stores upper floor, all the toys for younger children are at a lower height to make them reachable and easier for the child to interact.



Part of the wonder of the store is the ability for children to be able to interact with the items for sale. At no point is the product unreachable or off limits. As a matter of fact the design lends itself to be played with. The Muppet station for instance, lets you pick and choose exactly how you want your Muppet built. The kids are able to play with different designs and options before finally picking a muppet to be built. The model train track has a button at child height and eye level so that there is immediate interaction. The life sized lego and mega block forms are interactive and can be closely analyzed by the child to see how it is done.



This interactive design feature is not relegated to children alone. In the baby/toddler section, there are mock ups of nurseries. These come complete with rockers and chairs to better envision how it would look in your home. The reading corners have smaller tables and chairs for the children, but adults also have a space to read and sit.







Lastly, there is an adult gallery of unique Disney and cartoon art. While it is set up like its own separate section on the upper floor, it is characteristically made for the child in each grown up.

That is the beauty of the design behind FAO Schwarz. It is the ability to make every individual who walks through the door feel like there is someplace in this world for them. You know you are in a store, and you know said store is in NYC, but you lose yourself in the world that is created. Somewhere, behind some turn and some section, you will find something that makes you feel like you were a part of the world that was created.

Saturday, March 30, 2013

Midterm Assignment

Our midterm assignment was to pick up the redesign idea from last class. We were to choose one of the two redesigns and continue the process with four full pages of the website. If you recall, I chose to use the website Seamless. Here is there original page I found on their site:

 

They have since fixed the glitch of the photo that is the background. Now their site can be seen to look like the following with food in the background as an afterthought. I still disagree with this but here is the newer version for you to compare:







I started out my redesign of the site using our color theory as a base. I then used the Telugu font. It is a sans-serif font that is clean, slim and elegant to help with the image one would hope to have with food. The original site used the triadic or split color base and so I thought to do the same. The idea being that the colors would represent a younger and more hip neutral palette. For the home page, I decided to minimize the clutter and bring the food aspect of the site to the forefront. I also made the social networking and blog concepts more central to the design and easier to see. Lastly I moved the start your order to the sidebar but gave it prominent placement. I feel the new design cleaned up the clutter and made the design easier to take in overall.





Next came the “How it works” page. Firstly I noticed when navigating their site and using the menu in the top banner, that there is no color change to show what page you are actually on. I changed that and now added the coloring to delineate which page you are on. I removed the sidebar as I thought it to be distracting to what the page is intended to do (explain the business). I loved the visual icons from the original site depicting the explanation, so i used the same but changed the colors to match the redesign and cleaned up the copy a bit. I kept many aspects of the home page however (like the info box and footer) to keep with continuity of the overall design.


Then came the blog. As this is supposed to be a younger demo site, their blog is critical to the word of mouth and success of the business overall. As such their blog must be clean, simple, de-cluttered and easy to navigate. Again, placing the food front and center is important. Then I made the font easy to read. I placed the ‘order now’ box in the sidebar so that if they read something they wanted to try right away, they could order on the spot. I also added search options in the sidebar as those would be necessary on this page. Overall I find this page much more useful, easier to read and to navigate.




Lastly is the log in page. On the original site this page is simply a pop-up or shadow box. I don’t agree with that as I find it obscures the brand and the site overall. I think it needs a full page of its own along with more photos of food front and center. Keeping the order box and footer, makes it easy for users to log in and order straight away without having to navigate further into the site. I also made sure to keep the social networking and blog options present as those are central to the business.








Wednesday, March 20, 2013

Redesign

This week the object was to redesign a webpage we thought was done badly. I chose Seemless.com. This website was created to quickly order food as delivery or take out from your mobile devices or at work. Here is the original site:



I thought the original site was dark and cluttered looking. A lot of text that was hard to read and in the wrong spots in that it doesn't lead your eye around the page. There is also no sign of food. Considering its a food site, the lack of actual food is a big negative for me.

Now on to my redesign. The first is the more conservative design. I kept the colors and logo of the original site to try and not stray too far from the concept. Then I added pictures of more gourmet options for delivery. I kept the social networking to a minimum and increased the size of the font to make it easy to read and find what the user was looking for. Here is what I came up with:


Then I had to redesign a more contemporary design. I changed the pictures to those of 'younger' more 'hip' foods. I also decreased the size of the fonts and chose younger verbage. I cleaned up the design a bit and moved to social networking section to a more prominent place. I also added more quick picks in the side bar top make it easier to quickly order what you wanted if you didn't want to browse at all. Here is the outcome:


Monday, March 11, 2013

Einstein Design

A second element of this weeks assignment was to take grid theory, along with the lesson on typography, and create a real ad. We would need to do both an 8.5" X 11" flyer for print, and a 300px X 250px web ad. The trick is to remember that the specs for both are very different. For instance, a printed flyer needs to use CMYK and a 300dpi resolution. A web ad will need to use RGB and be only 72dpi.

However, the two must be uniform. There must be continuity between the designs so that the marketing direction can be clear. There also needs to be cohesiveness with the website that currently exists. I tried to take all this into account. My design not only remains constant between the flyer and the web ad, but it uses the colors and feel of the clients current website. I hope you like it. Comments are always welcome.





This is the web ad. It uses the colors of the current site to bring consistency to the page.  It also uses a simple to read font as the ad itself will be small. I also used a simple grid so that the user would be able to know exactly what we wanted them to do within moments of looking at the ad.

















This is the flyer. Again the consistency and grid remain. However, with more room on the page, I was able to integrate the entire quote. Again the idea is a simple flyer that translates to the user exactly what we want them to know in moments of reading. (FYI, the colors and fonts used are the same and legible; however blogger seems to be translating differently and even added borders/dimensions to the finished product. Anyone wishing to see the finished product correctly, can inbox me and I can send a direct link. Thanks!)