SMild – Project 1a

The product is essentially an EZ Pass for gas, or as I would like to call it, “Fill Me Up.”  This product is supposed to make getting gas faster and easier so the driver does not have to get out of the car to fill up their tank.  This will be achieved by having a little plastic bar in the car window, like an EZ Pass, so when the driver pulls up to the gas station a machine scans it, allowing the driver to pay that quickly.  The website would help with this because each plastic bar would have an account that would be accessible on the website. Basically, when a person buys a “Fill Me Up” bar, they have to make an account that will keep track of how much they are spending, where the best gas prices are, ect..  There has also been talk about having an app that links up to the device that will make user accounts even more accessible.

Strategy:

GOAL: educate customers about the fees involved and how the earn rewards.

GOAL: the site should be fast and easy to use

GOAL: brand

In order to make money off this product there will be a small fee tagged on to the end of each use, a onetime fee with the purchase of the product. To keep the consumers happy, there will be rewards after a certain amount of money is spent on gas, whether that is a free tank of gas or percentage off.

SCOPE

The website include what “Fill Me Up” does, how to order, shopping cart, about the rewards system, what gas stations offer the product, login/account page, and debit/credit card payment options. The whole point of this product is to make getting gas fast and easy so the plan is for that to carry over to the website and possible app as well. The login/account page would consist of a user name and password.  Once logged in the user would have access to where and when they got gas, the electronic receipt, and how many reward points they have. To sign up for the account the user would have to create a user name and password, put in their car information (including license plate), address, and credit/debit card number.  This way the radar can detect the right car with the matching bar and bill the user straight away.

“Fill Me Up” covers the payment process at the gas station but there is still the problem of getting that gas into the car.  This would be solved by going back to the old gas attendants that would fill the cars up for the driver.  This could easily increase more jobs and solve that getting out of the car problem.  With the company also offering jobs, applications would be another feature on the website so make it easy to apply to be a “Fill Me Up” attendant.

Strategy and Scope Homework_Wolfe

What do you as the creator of your product hope to achieve through the creation of web site? As the creator of Fuel-Pass we hope to achieve giving our customers the most pleasant experience possible through our website. We want to give them technology for usability and tracking, this will allow them to be able to find near by gas stations and the prices they are selling their gas for. We hope to develop an app that will allow the user to receive notifications through the app, e-mail or text message on their left over balance and their electronic receipt. We will achieve getting money from this product by recording their habits, where they get gas and the price of gas, along with may other things to sell to gas companies and other related companies. Through this product we hope to give a reward to the drivers using our product, like the drivers who use EZ-Pass, and give them a percentage off on gas or money back. We will be selling our product for $5, which is a one-time fee, but we will make a percentage off of what they spend on gas, through an additional fee that is rather small. And what will your site’s users hope to get from visiting? Through our site, our customers will be able to gain knowledge of out product and company; find out what is does and how it can save them time and money. We want to provide them with a how to order the device, along with a shopping cart to save the device in as they continue to browse. We will be able to provide them with a login account to add money to their device, add a credit/debit card, check and cash in rewards, and check out their e-receipts. The reward system will equal up to dollar amounts that they can let accumulate and cash in for money of gas. We want to offer many other services within this product. We want to be able to allow the customer to see locations of gas stations and the prices. When they are on their account page or ordering page we want to have them know their information is safe, by having it encrypted.

The scope of our product is to allow the customer a safe, fast and convenient way to purchase our product. When they purchase the product, they will be able to save it into their shopping cart and when they want to check out it will be encrypted. We want to offer our customers the ability to safely pay for their device and to store their debit/credit card to pay for gas or be able to use their cards to put money onto their device. We want to have the customer be able to click through our website and view our company, how we started and how we came up with our products. We want to have them be able to go to a contact us page to call, e-mail and live chat with someone to take care of any questions or problems they might run into. We want our customers to have a well educated and stress free experience. Our customers are our main concern so we want to allow them to be able to use this product online and on the go, and a login that offers the same experience on the go as the same as being at home is what we are trying to gain with a seamless integration between our website and app.

Review #1

The web site that I decided to use was the popular retailing cites Amazon. I chose to search for shoes. The first thing I noticed was it gave me some random shoes initially but the side of the page it gave me options to narrow my search. They had some very helpful short cuts such as brand, price, or even ratings. While I think this is a very clever way to go about narrowing someone’s options and it worked very efficiently. I would like to see more done with the initial browser when a generic topic like shoes is typed in. Maybe even moving the brand selection into the main page and divide the page into types of shoes instead of hiding it to the side. After finding the shoe I wanted I added it to my cart and noticed a few things that I never noticed before. One was the short and concise wording that is used. The second thing I noticed is that they do not ask you to commit right away. It is kind of sly but first it takes you to the chart then asks you to proceed to the check out. They have taken away wording that may make you question your buying option. In the past I found words like buy now or check out seem very final making you question your choice of whether you really need it. Over all I thought the experience is very pleasurable but after reading the text and going to the site it has opened my eyes to what I may have been to naive to notice before hand.

Review 1- JustFab

For me, online shopping is my way of buying everything I need. With a busy schedule, shops and malls are out of the picture so I have become quite an expert online shopping by being familiar to several sites. I know very well to play it smart by finding good quality items, trusted brands, the lowest prices, sales, coupon codes, you name it! However, a site that I surprisingly have never visited was JustFab.com. Not only did I hear about it via television ads, but from a friend who talks about how good the website is and how she enjoys using it to pick out the new shoe to buy every month. As I clicked on the site, right away was I drawn to it with the vivid sliding photos, bold headings, and easy to read text illustrating the company’s products and styles. The layout on the home page was self-explanatory with the different routes you could take that were listed upon the top bar, such as “top sellers”, “our story”, and so on. The website did have a color scheme that was consistent throughout the whole site of black, white, and the accent of hot pink, which in my views attracts the typical girly user of the site. Posted in the middle of the page was the options of signing in or getting started which then took you straight to a quiz that asked simple similar questions such as asking which type of shoe do you favor most, or which one would you rather wear? So easy, it took me 30 seconds! Following was a few boxes for your personal information to fill out and clicking complete was right in front of you. For choosing a shoe, they were catorized by style and form and the buying process did not make you think. For the chosen shoe it asked you for size and color, then simply add to cart. The billing and payment information had the standard fill out form and provided a listed summary towards the left of the page with any discounts, taxes, or shipping prices listed with the total. Overall, I feel that the website had to question to it. The bold hot pink buttons leading to links and pages made them pop out and easy to locate with just a glance. The website’s goal to making its page self-evident was successful in that it was very sufficient so there was no point of being frustrated or having to guess on my options. In addition, the process, even for a brand new member, was so quick and easy that “being in a hurry” , as most internet users are, never had to be an issue.

 

Review #1

The large eCommerce site I chose was Puma. Once I chose this site I was expecting the webpage to have a certain look. The expectation was an easy, understandable website. Most of this was described in the reading. In the book, Don’t Make Me Think, the writer talked about obvious decisions and ones that require more thought. People today as said in the book do not want to spend forever on a website, they want their item, or search to be as simple as possible. In the book they showed a table with a man’s face. There were three different clickable buttons. The first was the most obvious saying “jobs”. The second said “employment opportunities”; which requires a little more thought. Then the third said “job-o-rama”; which the person looking at the site had to think more than what they wanted to.

When first on the Puma site they have a slider of different pictures which portrays the different items they sell. They have five different tabs, that are clickable; which are men, women, kids, sports, and sales. Right beside that is their logo, which when clicked upon leads you back to the homepage. When I hovered on the women tab more options appear. They had a featured tab, shoes, clothing, accessories, and sport. Under these tabs there are multiple lists of options to choose from. I chose sneakers. Once on the sneakers page, they had all of the new arrivals first then the other shoes after. They had very readable text and the page had very easy navigations. The book mentioned that people also like knowing what is clickable and what is not. The Puma website made it understandable to know what is clickable and what is not. They also have a search bar which helps the customer find a specific item. The book claimed that people do not like to have multiple drop down menus to choose from, just a simple search bar.

When adding an item to the cart it has you select a size and which color is wanted. Then in a bold red box are the words “add to cart” which is very simple to do. then once clicked the item appears in the shopping cart. Which looks like their shopping bag from the store. This website makes it very easy to purchase an item. It has the requirements that the author was talking about. This webpage is a site I would come to again if I needed a particular item.

ARTM 2210 Amazon Review

For my first review, I chose to look at Amazon.com. I have been needing to purchase a new battery grip for my Nikon D3200. I have always preferred to use Amazon because of the simplicity, but I have not really stopped to think about why it is easy to use or why I like the site.

According to Steve Krug’s Don’t Make Me Think, a website needs to be usable without forcing people to think. Websites should almost be navigated mindlessly. We should not have to ask questions for every click we need to make.

Amazon does a good job of following the thoughts of Krug. For the battery grip that I wanted to purchase, I went to Amazon’s homepage, and right at the top, found the search bar. When I began typing “Nikon D3200 Battery Grip” Amazon gave me suggestions based on the characters I was typing.  In Don’t Make me Think, the example of the airports is similar to the auto-filling of Amazon. After clicking the suggestion for the battery grip, Once loaded, the page showed matching battery grips to what I was looking for. On the left side, I was given a chance to filter my search by brand, price, and battery type, and could also limit results based on specific categories from Amazon. I selected the first option shown, a Neewer battery grip. When added to my cart, I got a notification that it was saved, and asked if I wanted to view my cart or continue to look. I clicked on the Neewer grip, and scrolled down the page. On the page of the Neewer grip, it had reviews from customers that had purchased the same grip, specifications, and also suggestions similar to my original search in case I wanted a different brand. For fun, I clicked a suggestion for another battery grip, and looked at a Vivitar grip. This page had the same filters for my search, as well as more suggestions. I decided to keep the Neewer battery grip because it was cheaper and had similar reviews.

Overall, the simplicity of Amazon to purchase items is very high, and it does not make a person think too much to navigate around pages. The site is very clean and does not have much clutter. I feel that anyone could navigate Amazon without much trouble at all. All links are highlighted and easy to find, the white background is not distracting, and navigation is very easy. Amazon does a nice job of avoiding the questions of a viewer by allowing limitations of a search and being able to go back to the main page when needed, while saving searches and giving suggestions. The only change that I could suggest is making it more clear that hitting the Amazon logo at the top left corner will take the viewer to the home page.

Project 1a

I hope im posting this in the right place,

Dave Conrad – ARTM2220 – Project 1a

The Power Shower’s primary objective with the website is to leave a good impression on all who visit the website. The site will not require much navigation; upon loading the website, the user must decide if they want to learn about the power shower, or have a specific question or request fulfilled. This forces all first-time visitors to form their opinion quickly, and can decide from there if they want to continue. By educating users of the product, we hope to amaze all who hear about our shower system. Since the shower functions and appears much different than a conventional shower, if people share our page with others on social media, they could develop a good repute and can interpret the product as innovative and efficient rather than a new and obscure conversion. The website should amaze, inform, and allow the user to begin customizing their purchase early during their visit to engage them. We want the user to be able to know everything they need to know about our product without asking a question. Our client’s expect a high quality product, so we want them to have a pleasing experience. Users who visit expect to discover what our product is, why they should care about it, and maybe (but unlikely) make an impulse purchase. Users who visit multiple times may be visiting to have a question answered, request a service, or they have made up their mind and are ready to purchase their new shower. Overall, we want our users to be excited and well-informed about our product to normalize this big step forward into the future of hygienic supremacy.

Upon entering the website, the user will instantly find themselves watching an informational video showcasing the Power Shower’s key features. After the video ends, the user will be asked to “Share” with people on social media or “Enter site” which redirects them to a catalog of different colors and features they may want to include. As they are playing around with the different features they can add and customize, they will learn more about all the features. The customization page will have the most time spent on it compared to the other pages, so this page will be very interesting and showcase little features that might really stand out to certain individuals’ wants and needs. Even if they had no intention to purchase a new shower, the experience will be fun, engaging, and will increase the user’s knowledge of our product to share with others who would be more likely to look into making an investment. There will be a “help” button included on the homepage to redirect the user to a page that answers all the questions the user may possibly have. We plan on having an instillation team that goes to each client’s house to install the new shower system and for a clear fee, can remove your outdated shower to make room for the Power Shower. The help button leads to a page that should answer every question our user may have, as well as provide contact details, list pricing information, and explains features further. Any specific technical questions can be asked by calling customer support. The user has very few options upon entering the site. The either want a question answered or to learn about the product. Our site will make the answers easy to access and learning about the product an effortless and engaging experience on the user’s part.

Creative Live: Free Online Classes

https://www.creativelive.com/

This is a great resource for business and design students. You can tune in during live streams (and slightly old streams if you missed a class). My appreciation for lectures has developed significantly after visiting this site frequently, which has helped me focus and listen more effectively. Try some seminars out, and don’t forget to take notes!

Reading Questions

What are the goals of Apple’s website? How does Apple’s website address the needs of a user who has just purchased their first MacBook? (pp. 41-56)

The goal of Apple’s website is to provide information on their products while reinforcing Apple’s brand image.

A user arriving at Apple’s site looking for help with their MacBook would most likely click support, in the toolbar at the top of the homepage. Then they are prompted to select a product category to get support for. This prompt includes pictures, making the selection simple. Once the user selects their model from the “hardware” menu, they are given an easy to use set of articles, including a welcome page and a “new to mac” article.

What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page? (pp. 72-75)

The Facebook sign-up page outlines some of Facebook’s main features, and allows a user to either sign-in or sign-up. The sign-in information is smaller and tucked away at the top of the page, and selected by default, for users familiar with it. The sign-up information is more central to the page, and bigger. It also provides text fields and radio buttons allowing a new user to enter their information. The page also features a selection of housekeeping links at the bottom, along with language selections.

What are four architectural approaches to information structure? Find one example of each. (pp. 94-106)

  1. Hierarchical: brunnerworks.com
    The website for Pittsburgh ad agency Brunner consists of a handful of pages, each describing a facet of its business. Each page is self-explanatory and easy to find.
  2. Matrix: Amazon.com
    On any given product page, amazon suggests several other products based on different types of correlation, which are also adapted for the user.
  3. Organic: Wikipedia.org
    The organic nature of Wikipedia is so unpredictable that games have been formed around it. Pages are full of links to other pages, and the the only consistent navigation is mostly housekeeping (homepage, policies)
  4. Sequential: lifehacker.com
    Advice and tips site lifehacker is an example of a sequential website. It features several articles daily, ordered by publishing time, making it possible to read through it, start to finish.

What percentage of The Huffington Post index page is navigation, and what percentage is content? What about Google, Wikipedia, and Etsy? (pp. 116-134)

Navigation Content
Huffington Post 98% 2%
Google 15% 5%
Wikipedia 80% 20%
Etsy 30% 70%

 

How does http://www.landor.com guide the readers’ eyes and focus their attention on what is important? (pp. 144-155 )

Landor.com used color and contrast to guide the reader’s eye. The center sections are given vibrant colors, while the fringe sections are given a washed out low contrast black and white treatment.

 

Assignment 1

1. As described in the Elements of User Experience by Jesse James Garrett site objectives are most often objectives in general terms. Mostly all business websites have one of two fundamental goals: to make the company money or to save the company money. I believe that the first fundamental holds true to Apple’s website as well; They want to make money. The website has a lot of information on it, but the reason that content is there is to promote their products and encourage sales. Their website also enhances their brand identity, which could be a site objective in itself. Apples brand identity is innovative, imaginative and empowers people through their technology. I believe that their website exemplifies these characteristics well. The aesthetics and feel of the site are representative of Apple’s brand identity. This impression is surely a result of conscious choices designers made.

For a person who has just purchased their first Macbook, the website should address this new customers needs very well. One of the most important reasons that the Apple website, or any website for that matter, should effectively address a new customers needs is because gaining a new customer is fairly easy, it is retaining the customer that takes skill and expertise. For a person who has just purchased a Macbook they may want to know how to use certain controls,  tips and tricks on the trackpad, and information about the programs that are already pre-installed on Macs. The first element I noticed on the Apple website was User Segmentation. According to the text, user segmentation is dividing your audience into smaller groups consisting of users with certain key characteristics in common. When you click on the “Mac” button on the nav bar, the site directs you to a page dedicated to their computers. At the very top, there are different options one can click on including Macbook Pro, Macbook Air, iMac etc. By allowing users to choose the computer they have/want, you’re categorizing the user and providing them and abundant amount of information about the computer they chose. Upon being directed to the computer of your choosing, the usability of the page was well done. For example, I clicked on Macbook Air because that is the laptop that I have. The homepage for Macbook Air includes simple sections emphasizing the laptop’s high points. At the top right of this page is also a navigation bar that allows users to browse, or find what they are looking for quickly. As for the new Macbook customer, the OS X tab would be the most useful. This tab includes information about the operating system, connecting your Mac and iOS, different apps, iCloud, and how to use the multi touch methods. In my opinion, I think the name in the nav bar should not be OS X. For new users, they may not now what that is or means. To even further usability, I would label it “Getting Started”, or “About Your Macbook”. Overall, I think the site effectively accomplishes their goals and gives new users an outlet to learn about their computer and find information they may need.

2. A functional specification is a document used to describe in detail a product’s intended capabilities, appearance and interactions with users that is given to software developers. In essence, the functional specification is a guideline and reference point as the code is being developed. Facebook’s wall probably has an extensive functional specification that continues to evolve. One specification definitely was the profile picture. When Facebook was developed in 2004, the profile picture was displayed in the lefthand corner of the wall as a sqaure, as it is today. Other specifications include the status bar, where one can write their own thoughts, add pictures or videos, or declare a new life event. Within this, a user can tag their friends, add and emotion, add their location and even choose who they want to see their status. Mentioned in the text, specifications are, like the name intends, to be specific. When describing what you want the status bar to be able to do functionally, one must use a lot of detail. Other specifications on the Facebook wall are the cover photo, the about section, the timeline and the timeline year clickable on the right. In order to get exactly what you want out of your functional specifications, you must write in in a positive manner, use a lot of details, and avoid subjective language.

3.

Hierarchical Structure:

An example of a hierarchical structure would be the Robert Morris University website. In this type of structure, nodes have a parent/child relationship with related nodes. Not every node has children, but every node has a parent. Most webpages are set up in this structure. On the homepage, you can go to many pages that lead to other children pages, but they all lead back to the homepage in some way.

https://sentry.rmu.edu/

Matrix Structure:

A matrix structure is a structure that allows a user to move from node to node along two or more “dimensions.” The books explains this structure by using an example of a person who wants to browse a selection by size and also by color. By learning this, zappos.com is an excellent example of a matrix structured website. When looking for a pair of shoes, not only can you search in the search bar, but you can choose the type of shoes you are looking for, the size of the shoe, the width of your foot, the brand of shoe, the color, the price, the season, the preferred insole and even he weight of the shoe. The matrix structure can accommodate for this type of searching.

http://www.zappos.com/

Organic Structure:

Organic Structures don’t follow any pattern in structure.There are no sections and encourage free-form exploring on a webpage. An example of an organic structure would be Pinterest. When you go to pinterest.com, there is no order to the posts that come up. Some things may be very interesting to you and some may not. It can be tailored a little bit to your interests, but other than that, the posts are random and in no order. This type of structure can be a problem for those users who want to visit the same piece of information again. It may be very difficult to see the same content again without some extensive digging. 

http://www.pinterest.com/

Sequential Structure:

Sequential structures are just what they appear to be: sequential. Information is displayed in order, like it is in books, articles and videos. The website I stumbled upon that displayed this structure was the evolution of the Porshe. It is a single-page site that acts as a timeline and gives users information in a vertical fashion according to different years.

http://porschevolution.com/

4. The Huffington Post index page is mainly content. To me, about 80% of the page consists of content and only 20% is dedicated to navigation. Because it is the index page, all of the previous articles are being showed.

As for Google, I think the homepage and when you make a search vary in regards to content and navigation. On the Google homepage, I believe that 95% is navigation – the search bar, the Google login, the Google+ notifications, and the click ables in the footer. The only content would be the Google Logo or the picture in place of it. When you make a search however, the percentages change. Content becomes the majority of the site and navigation take on a lesser role.

Wikipedia, on the other hand, is 60% content and 40% navigation. Wikipedia provides a plethora of information on a number of things but has less navigation. There is a bar on the left hand side strictly for navigation including links to their main page and language changes, but the majority of their navigation lies within the content itself. In just a few sentences you may have five or six links to other wikipedia pages.

I would consider Etsy similar to Wikipedia, with 70% content and 30% navigation. There is a navigation bar at the top which includes a search bar. The page includes a footer as well. But other than those two things, the rest is content leading users to different products available to purchase.

5. Landor.com guides the readers eye very nicely. The text book says that successful designs have two important qualities. The first is that your design follows a smooth flow. To me, the site seems guide my eyes very well. The first thing I notice is the Landor name in the top left corner in the yellow square. The next thing that catches my eye is the colorful news rectangles in the center of the page. Once I explored this, I noticed that the smaller, black and white squares surrounding these two things were rollovers and provided more information about the picture. This arrangement of rectangles and squares had nice contrast while still maintaining uniformity and communicating to the user.

The second quality of a successful design is giving the users a “guided tour” of the possibilities available to them without overwhelming them with details and intricacies. This quality was a part of the Landor site as well. Along with the black and white square, there is a navigation bar and also a footer.

Another element of the surface plane is internal consistency. As for internal consistency, the site maintains similar designs throughout the pages I clicked on, mainly having a main, colorful section with the details of the page, surrounded by black and white squares. Although each page looked relatively the same, I found it a little bit overwhelming at times. I would like the site more if the smaller squares were a little bit more muted and there was a border around the main information.

#1_ecarrington

Apple understands a user’s needs by segmenting them into demographic profiling, but only providing baselines for their machines. For first time MacBook buyers, they need only choose the correct MacBook section from the top bar, and further refine their choice by selecting from customizable option. Apple decided to point out the best features first, when MacBook is clicked on, in the form of a scrolling page. After purchasing a MacBook, the user can view built-in apps, performance and reason for design choices.

 

Facebook has content requirements for its wall and posts. These consist of four main content columns, the first of which is dedicated to “liked” pages, apps and groups. The wall has posts, defined by Facebook and created by users, followed by a column for trending topics. People to message are available on the right. Content is created and driven by the users. The frequency of updates are determined by users. Objectives, aligning with user wants and the company’s requirements, form a strategical content implementation.

 

An example of a hierarchical structure, found on Facebook, are posts. They have a parent-child relationship and are tied exclusively to their initializer. Every node, or object, must have a parent, but not all parent nodes have children. In a matrix structure, different filters can be applied to existing data to show corresponding data related to their query. This structure is found in the search bar of Google. Organic structures do not follow a pattern, and are therefore hard to follow. In the case of the flow of posts on Facebook, these are sorted by relevance, but are hard to relocate if the page updates. Sequential structures are often found in offline sources, such as books, articles and video. Therefore, Youtube would have a sequential structure during video viewing.

 

Huffington Post’s index page is mainly content, with some room at the header and footer for navigation through links. There is about 80–20% content to navigation spread on this site. Google is primarily for searching, and relies on user input. The links that come up are associated with metadata, created by the user. Google’s spread is 30–70% content to navigation. The front page of Wikipedia has barely any content, and relies solely on linking. Therefore its spread is 5–95%. Etsy is a more even spread, resulting in 60–40%.


Landor guides the readers’ eyes by providing bold graphics that captures attention. The grayed out images serve as a background that also shows work, and the hero image takes the main stage as the information provider for newcomers to the site. The chosen grid, typography and color palette all correspond with guiding the eye towards important information.