We were presented with the ticketing website called State Theater. The website had a bad checkout process. The process was complicated. In order to reach the checkout area, the user had to go through many windows, clicks and loopholes. Our mission was to simplify this process and rebrand that part of the website. We had to find the best and quickest way for users to check out. We made flow charts recording each action we had to make with the State Theater's design. We pinpointed State Theater's pain points throughtout the process. The points were we were confused, lost or found unnecessary.We then made our own simplified version. Afterwards we focused on the user. We created our own user personas putting ourselves in their shoes. We imagined scenarios any user might face, when trying to purchase tickets. We made note to incorporate the user's needs in our design. After researching other efficient and well-designed websites, we designed our own wireframes with pen and paper. We then transferred these into the computer in a program called UXPin. With UXPin we did not focus on the aesthetic of the website, but the overall checkout process. The function was the only priority at that point. Of course hierarchy was considered, but not other elements like color and images. We had users come in and test out of designs. We then made modifications according to their feedback. Finally we started making mockups with Illustrator. In the end we added our mockups in Invision, and created a website experience, without actually coding. Each student designed their website according to their own aesthetic. My own was based on the Bauhaus Movement.

Website Research

1 dog2 3 3 4 5 6 7 8 9 10 11 12 13 14 15 16 16 16 16 16 16 16 16 16 16 16

State Theater Pain Points

Pain points throughout the navigation of statetheater.org: There are 4 buttons navigating the user to different pages, until the user can finally purchase a ticket. The timed countdown makes the user fill account info, shipping and billing addresses in less the 5 minutes. They did not put into account that people type slow and that there are other steps that are needed to check out. The check out button is inconspicuous. State theatre and box office policies are not presented in a way that will be actually read by the user. Different types of buttons for ticket purchase. The fact that the design element is not the same is confusing. There should be a design element being repeated to create harmony. The State Theaters address is not on the top right corner of the page with the rest of the useful information. The navigation bar is confusing and overloaded. Some information is found twice under different tabs. There is a brocken image near the logo, that does not have an alt tag. The Coming Soon box contains rows of items that do not look clickable. When the user scrolls up and down the mouse gets stuck on the google maps images at the bottom of the home page.

UXPin_Desktop

UXPin_Mobile

Desktop Recording/Mobile Recording

Conclusion

The process and effort that goes into researching and perfecting a website process or website itself is extensive. Overall I enjoyed the research and creative process. It is amazing how much of an difference a well thought out process can have on a user. Each person is different and it was really interesting to see people interact and react to my project. I enjoyed learning the different programs. I feel this project introduced me to the complex design of a website.