UX Design

It's All About the User's Experience

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.

African American girl laying on the floor with her coffee, using her laptop.

Annotated Mobile Wireframe

Exploring the full mobile experience.

Annotated Mobile Summary

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.

User Scenario Wireframe

Applying specific tasks to the user experience.

User Case Summary

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:

  • Pinch and Squeeze to zoom in and out.
  • Scroll to move to another position on the page.
  • Press to engage in button or text link
  • Swipe to input data with keyboard

Scenario 01:

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.

Scenario 02:

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.