Developing a responsive website, begins with the evaluation of the user's mobile experience. When beginning with mobile first, the layout for tablet and desktop will result in a cleaner design.
Wireframes can be done in low or high fidelity. Software such as OmniGraffle Pro, Axure and myBalsamiq are the industry standards. New site development may require the need for branding identity. I use my graphic design skills to assist in creating company names, logo's and color palette. These are applied to my wireframes. This application provides the client with a visual representation of their company and their new online direction.
Artsy Tech is an application designed for the technical artist. This app provides links to art and articles on how art is incorporated into the technical community.
College Bank is an app that specializes in addressing the needs of individuals who are pursuing their education.
Food Finder is an app that is GPS based to assist in finding what eating options are available based upon current location.
Harry's Car Wash specializes in an environmental friendly system. This app provides discounts as well as music and games that can be played while your car is being washed.
Stream On is a video steaming service that provides fast streaming. Their company motto, "No Buffering Allowed", allows their customer to know that their service is fast and reliable.
The primary purpose of having a mobile version of the Summer Fun website is to assist in increasing sales of their products. This business purpose was the framework for which the project process was built upon. The key element of thought was to provide the user the most optimal user experience that would lead them to purchase the item being viewed.
Visual elements were strongly integrated into the design to provide the user with a visual mobile experience. This would assist in the point of purchase transition of going from viewing a product to making a purchase. Product information was strategically placed in order of importance. To increase sales opportunities, individualized product placement was provided based upon data obtain from the user's prior searches. User was also provided what other customer's had purchased similar to or with the same product that user was viewing. These features would assist in promoting additional product sales.
Project process involved using a mobile first design approach for the Summer Fun mobile wireframes re-design project. Mobile first design assists in defining the critical information to be presented in the most optimal manner for a positive mobile user experience. For this project, I selected the Summer Fun outdoor patin set product, entitled Ty Pennington Style Island Set.
Once the mobile design was completed, I began to expand the wireframe design for a tablet. This allowed additional information to be displayed, but it was found that additional information was not necessary to continue to secure a positive mobile experience that would lead to the user purchasing the set.
Summer Fun is an e-commerce app which specializes in apparel, patio furniture, pools and water toys.
User is provided with signup and login button for easy access to their account. This will assist the user experience by providing the user with a simple method to check past orders, place future orders and check on curren order status. This feature is found on all pages.
User is provided a search field to assist them in easily locating the item they are looking for. The symbol and field are similar to the user's experience on other sites. This avoids learnability of a new system and enhances their experience. This feature is found on all pages.
User is provided a button/tab navigation for the top five highest categories of searches based upon web analysis. They are provided with a familiar symbol to expand the navigation for more options. This feature is found on all pages.
Upon arriving on the product page, the user is greeted with a swipe gallery of the product. This assists the user in gaining visual information on how the product looks in various settings, closeup of the product, closup of fabric swatches available for the product. To assist the user in obtaining feedback of the system's status, dot navigation is provided to allow the viewer to know where they are located in the gallery.
Directly underneath the gallery, user is provided the name of the product, the original price, sales price, rating and the amoun they are saving with the sale price. Typography is used to assist the user in product purchase. Strikeout text is used to demonstrate the price markdown. Red bold and slightly larger font is used to show the current sales price. Orange text draws attention to the percent and amount of savings. A purchase button is placed directly below this text to provide a strong visual promt to purchase the product.
To instill consumer confidence in a quick purchase, a five star rating is displayed with the option for the user to rate the product. This link will send the user to the rating page to verify purchase. The number of individuals rating the product is placed by the five star rating. This assist the user in obtaining confidence for a quick purchase. An underline is placed under the number of ratings to provide the user with an indication that more details on the rating can be accessed.
Swatch thumbnails are placed directly underneath the product and purchase information to assist the user in viewing the fabric options for this patio set. While fabric swatches are a part of the gallery, they are included at this placement to assist the user's confidence in quick purchase.
The secondary sales gallery utilizes the psychology of peer purchase to increase complementary product sales. User is provided with complementing products that wil enhance their experience in using the original product. These complementary products are individualized based upon a combination of what the user has previously searched and viewed. Products other consumer's have purchased together are also shown.
User is provided with a second gallery that provides them with additional products they may enjoy purchasing. This individualized gallery is extended beyond the current category and can include supplemental products to enhance their outdoor experience. In this scenario, products such as outdooor dishes, outdoor music systems, lawn mowers and swimming pools could be shown here. User is provided with the system status through dot navigation. Swipe navigation allows the user to quickly scan this section.
User is given the opportunity to obtain more information about the product, financing, promotions, special offers and to obtain answers to question. This is provided by the expanding information box. User can quickly expand the box through the arrow icon.
User is provided quick access to expanded method using scroll action. The user is provided with the product and model number as well as a brief description which includes the product size. A link is provided for the viewer to view the complete collection. This feature assists in obtaining point of purchase.
User is provided with a method to view the ratings and reviews from other customers. This is accessed by one of the expanding information boxes. User is provided immediate feedback to the average rating and number of reviews. When this is expanded and the user reads individual feedback, they can engage by pressing a down or up thumb to show whether they found the rating userful and helpful.
This utilizes social peer purchase psychology and assists in consumers returning to rate a purchase to re-engage with the site to see if their rating and comment was well received by other potential consumers.
Utilizing the power of social media and consumer psychology, the user has the ability to "brag" about what they are thinking of purchasing. This assists in providing free product and company marketing through the user's social media page, which will link back to the product.
Chicago is a business hub for conventions and meetings. Our world class city offers corporations the full amenities to conduct their business transactions while emerging in the culture, food and arts found in Chicago. Scenario 01 and 02 demonstrates the corporate executive experience while traveling through Chicago O'Hare International Airport.
To enhance the business executive experience. My O'Hare app was developed. Executives with a short layover and those with an extended stay, will benefit from utilizing this app. Executives with a relatively short layover will be able to meet with clients at one of O'Hare Executive Meeting Rooms. Those with an extended stay will quickly be able to check on their limousine service, hotel accommodations and if other executives have arrived.
iOS and Android mobile applications are shown, with the slight variation to the app based upon the operating system. iOS app have an additional row of navigation. Android phones elevate the need for this navigation because the phone has built in navigation to assist the user in navigation. This allows the user to gain access to more information on the app without having to scroll. Each page is displayed as inside the mobile framework. Effort was made to present the information in a single screen to not cause the user to scroll.
Hand gestures used on this app are:
Michael has a tight schedule of corporate meetings. He is flying into Chicago and has a several hour layover before departing to New York. To maximize his time, he has pre-arranged for his meeting with the Chicago departments heads to take place at one of O'Hare's Executive Meeting Rooms.
Upon arriving in Chicago, Michael quickly checks his New York Flight. He immediately is provided a green checkmark status symbol on the Flight button, indicating that his flight to New York is currently on time. He is provided a warning in his Status indicating that one or more of his colleagues have not checked in. When Michael presses the Status link, he is able to send out a group text message letting them team know he has arrived and asking for an update to their expected arrival to the airport.
The Status link update also provides Michael with the room location, directions to getting there and an update on his requested amenities for the meeting room. As Michael is walking to the designated meeting room, his Status link is updated from a warning sign to the green check, stating that his colleagues have checked in and are awaiting him at the meeting room.
Alicia is flying into Chicago and for a three day business conference. Upon arriving at O'Hare, she quickly opens up her My O'Hare app to get an update on whether her colleagues have arrived, her hotel accommodations and her limousine pickup service. She is quickly shown that her flight to New York, in four days is on schedule. In her Status button, she is given a red indication that her colleagues have not arrived. She send them a group text letting them know she has arrived and will be shortly at the hotel.
Alicia is also provided a green indication that her scheduled limousine service has arrived. Upon clicking the Transportation button, she received a message from the limousine driver, greeting her to Chicago and letting her know her baggage claim number and which door to exit to meet the driver.
Step by step instructions on how to navigate through O'Hare is provided through O'Hare's terminal GPS system.