Hello 👋, my name is Fitri eka cahyanti, usually called Fitri. I’m following UX DESIGN CONTEST # 14. In this contest, the theme raised was to give a free design to SF Zoo.
What is SF Zoo?
SF Zoo is one of the zoo websites in San Francisco. SF Zoo provides many services such as watching animals, playing with animals. Many programs can be run with SF Zoo, including Zoo camp, Family and Adults program, School service and Teacher Resources, and many more.
In the framework of UX DESIGN CONTEST # 14, I chose three pages that I will redesign with a fresh and attractive appearance, three pages are Landing Page, Signing & Sign Up, and the Ticketing page. The framework I use is Design Thinking. Here are the steps that I will go through:
At this stage, I will look for problems on the website. First, I do a Heuristic Evaluation that is Nielsen and Molich’s 10 Rules of Thumb principles, to evaluate the website’s features and appearance, whether they are by user needs or not. I wrote down the results of the Nielsen and Molich’s 10 Rules of Thumb principles, and then asked the user. Coincidentally, in this case, I did an in-depth interview with five users. This aims to validate the problems I face to other users, whether they are also experiencing this same problem or not.
Before I did the interview, I divided the users into two categories of users. 5 out of 5 users I ask to try the SF Zoo website first, and 2 out of 5 users are new users who have never tried SF Zoo.
In this case, the following is a persona that can describe SF Zoo users as a whole.
Here are some of the problems and difficulties encountered by users:
- PainProblem 1: 5 out of 5 users have trouble finding the sign-in button
- PainProblem 2: 5 out of 5 users are confused about the number of tickets that are still available (Tickets Page)
- PainProblem 3: 5 out of 5 users are confused when looking for ticket prices because there is no information about costs (Tickets page)
- PainProblem 4: 4 out of 5 users feel confused when filling in the signing and sign up fields (Sign In Page)
- PainProblem 5: 4 out of 5 users feel that the word used is inconsistent
- PainProblem 6: 4 out of 5 users find it challenging to order tickets because the flow is quite complicated
- 5 out of 5 users want to see reviews from other visitors (Landing page)
- 4 out of 4 users want to see all the animals in Sf Zoo and the activities on the Landing page (Landing page)
Based on the observations made, the following are the difficulties experienced by users when using the website:
#PainProblem 1: 5 out of 5 users are having trouble finding the sign-in button
On the home button, the sign-in page is not displayed initially. The user must look for the button signing in several sub-menus provided, which makes the user confused when the user has to sign. 3 out of 5 users I asked to try the website couldn’t even find the sign-in button.
#PainProblem 2: 5 out of 5 users feel confused about the number of tickets that are still available (Tickets Page)
Information on the number of tickets is not displayed on this page, even though this information is critical because it could be that at 9 o’clock there are only 3 tickets left even though the user may want to visit the SF Zoo with 6 other friends. This requires the user to click the order first to find out the remaining tickets. This is enough to make the user make a lot of effects.
#PainProblem 3: 5 out of 5 users are confused when looking for ticket prices because there is no information about costs (Tickets page)
There is no information about the ticket per ticket on the Tickets page, which is confusing for the user. Users must click the order first when they want to know the ticket price. Some users, especially new users, will feel confused, especially if someone wants to come with their friends. They will find it difficult to estimate the budget that must be issued if there is no ticket price information.
#PainProblem 4: 4 out of 5 users feel confused when filling in the signing and signing up fields
4 out of 5 users are confused when they want to fill in the column on the signing page. On the signing page, there are 2 actions at once, namely actions for signing and registering members. Even when signing and registering, the user is not freed by the signing option. This is in stark contrast to the UX Laws, namely Hicks Law and Parkinson Law.
#PainProblem 5: 4 out of 5 users feel that the word used is inconsistent
Some of the terms used at SF Zoo are not by their function so that it makes users think confused, such as the word Sign Up, but there is also the word register. However, when these two actions are clicked, they ask for different input.
#PainProblem 6: 4 out of 5 users find it challenging to order tickets because the flow is quite complicated
The flow offered is pretty good, but this flow makes the user click several times to place a ticket order. Selection of the ticket type also requires an effect where there are tickets with the General admission type, member reservation, and parking. When the user clicks wrongly, the user must do a back first then choose the appropriate type name.
From the problems that have been defined above, I got several solutions, including the following:
- Landing page (PainProblem 1.6 and additional features)
On the Landing page, I added a button signing where this button will free the user to immediately sign or not. This is following the principles of Nielsen and Molich’s 10 Rules of Thumb principles,: Flexibility and efficiency of use and User control and freedom. Then I also added the ticket order feature on the landing page, reducing the effect the user makes to order tickets. The flow provided does require a bit of an impact, but this flow cannot be removed. I made it more straightforward, fast, and easy to use. I tried to apply one of the Laws of UX, namely Teslers Law, “For any system, there’s a certain amount of complexity. that cannot be reduced “- Law of conservation of complexity. This ticket ordering feature can be customized according to the filters provided. Users can directly select the ticket type, ticket date, and ticket hour and apply for promo vouchers. This ticket booking feature will also be real-time. When the user selects the ticket type, the date and time status that appears are only the date and time available. This makes it very easy for the user to do the initial plan. This is following the application of one Nielsen and Molich’s 10 Rules of Thumb principles,: Recognition rather than recall.
Ticket Pages (PainProblem 2,3,5 and 6)
In this ticket window, I implemented a Nielsen and Molich’s 10 Rules of Thumb principles,, namely Visibility of system status, which I added breadcrumbs to provide information on how many users are on which side of the page. Then I also added information regarding ticket prices and the remaining tickets that were ready. I added a little information regarding the discount price where I also gave a different touch of color and gave a larger font size than the others. In this case, I applied one of the Laws of UX: The Von Restorff Effect, “When multiple similar objects are present, the one that differs from the rest is most likely to be remembered! “. On the right side, I added a special offer that can be used by the user. On the left side, I also added a filter for booking tickets, which makes it easier for the user to enter the wrong ticket type, date, or time available. The user can immediately make changes there, so there is no need to back to the previous page.
Sign In Page (PainProblem 4)
On the Sign In page, I separated the Sign In and Sign up settings, where when the user doesn’t have an account, the user can immediately click sign up. Then I also added an eye icon to the password field to minimize errors created by users. This is following one of Nielsen and Molich’s 10 Rules of Thumb principles, namely Error Prevention. I also added a forgotten password, this is so that it can help the user forget the password. Then I also provide the option to sign up and sign in using a Google account. At this page, when the user selects the option to sign up using a Google or Facebook account, the user can automatically enter the application without filling in the information on the list form that has been presented. In this case, I am adapting one of the Laws of UX, namely Parkinsons’s Law. Where the more fields the user must fill in, the more time and effort the user needs to fill out the form. Initially, the user is given 7 fields to fill in. With the list feature using a Google or Facebook account, the user can shorten the effort to fill in the 7 files with one click. The addition of a list feature using Google is because not everyone uses Facebook. I added the application of one Nielsen and Molich’s 10 Rules of Thumb principles,, namely Visibility of system status, where I provide information regarding the page being accessed by the user, namely the Sign-in page.
4. Wireframe & Prototype
I do sketching on the paper first to make a picture of the proposed design solution that I will make.
- I added the Sign In and Signed Up features on the landing pages
- I added the ticket order feature
- additional information about the types of animals
- there is an input for user experience
- there is experience from other users
- Change the color of the text button to black to have a better contrast ratio.
- The contrast ratio for white text on the black button is 21, while the contrast ratio for the previous text is 3.67
- Then i changed the position to visit the online store by being at the bottom of the page before the footer. This is because Users have a propensity best to remember the first and last items in a series. (Laws of UX: Serial Position Effect
- I also do a grouping on the footer such as what menus can be accessed in the footer, then other information that can also be accessed in the footer.
Sign in page
- Added an eye icon on Password input field
- Added the forgot password feature
- Added a login feature with Google and Facebook accounts
- The separation between signing in and signing up
- Additional information about the SF Zoo
- Change the color of the text button to black to have a better contrast ratio.
- The contrast ratio for white text on the black button is 21, while the contrast ratio for the previous text Button is 3.67
- I added breadcrumbs to the design
- I also added ticket filter feature on the left so that when the user chooses the wrong type of ticket, user can immediately change it
additional information about ticket prices and highlight promos and prices
- Then, i added information about the number of tickets that are still ready
- In the right, i added Further information about special offers
- I Removing the header because it is not necessary
- Also Removal of the SF Zoo logo on body pages
To measure if my proposed design is the ideal solution, I set a questionnaire to the user for the before-after design. The user will decide which one is the better solution to their System Usability Scale (SUS) problems. I choose SUS because SUS can help me to calculate the usability of the product/ system
- first, I do a Usability Testing Session with an existing website
- then I also do a Usability Testing Session with my proposed solution
- after it, I give Post-test Questions
System Usability Scale (SUS) Result
From the validation, we know that the proposed solution gets 12 points more than the existing one.
Thank you for taking the time to read my article. You can immediately provide input or questions to me in the comments column.