Simplifying SISTIC
SISTIC is a ticketing service and solution provider behind more than 1000 events every year. SISTIC is a leading provider in Singapore, it sells tickets to events ranging from pop concerts, to musicals, theatre, family entertainment and sports.
I got an opportunity to do a UX review of SISTIC along side another enthusiastic UX designer. We both teamed together and called ourselves Team Simplex. Our major goal was simplifying experiences for users.
In order to understand the users view about SISTIC, we looked into SISTIC facebook page and people seem to love SISTIC since it gets all their favourite events to Singapore. People also feel that this is the only place where they can catch their favourite events. They also seem to appreciate the customer service SISTIC provides.
We had to pitch to the client at the end of two weeks. We had exactly nine days to carry out the UX review and propose solutions to address user problems with mockups.
Stage 1: Competitive analysis & Heuristic evaluation
Our first step towards this project was to identify the competitors. We looked at both local and global players to understand the current trends. Based on this we came up with an elaborate feature list alongside the competitors. The key competitors we identified were Peatix, Eventbrite and global players like Official London Theatre, Stubhub.
Click here to download the complete competitive analysis document.
We also carried out Heuristics evaluation based on Jakob Nielsen’s 10 principles of interaction design. The evaluation clearly showed that most of the principles were violated.
Click here to download the complete Heuristics document.
We collected the metrics of SISTIC from www.similarweb.com, to understand the traffic attracted by the site and the engagement ratio. The site attracts close to 500k visitors every 6 months and every visitor spends close to 5 minutes on the site. The traffic sources are mostly from search and referrals from other sites. However out of 67% of users who visit the site only 31% buy tickets, resulting in low conversion rates.
We also did a content audit of the site. The content on the site seemed to be inconsistent with the brochures. The content on the brochures was more appealing to the users and easily understandable. So we collected the brochures from SISTIC Counters and synched with the show content on the site.
Click here to view the detailed Content Audit details
Stage 2: User Research and Data synthesis
We started off with an online survey using www.surveymonkey.com to understand user behaviour w.r.t online Event ticketing. The survey helped us collect quantitative data about online event booking sites. It also gave us a clear idea of what are the competitors which users prefer and understand user behaviour better. Users felt that SISTIC was slow and very cluttered.
Click here to see the Survey Results document
We then conducted User interviews to understand problems users are facing during ticket booking. Most of the users we interviewed, searched for the events on Google instead of SISTIC. We also conducted usability testing of the current site to understand the difficulties faced by the user while using it. The main issue faced by most of the users seemed to be with the seat selection. Users felt that seat selection was quite tedious with too many steps and users could not visualise what is the view of the stage from the seat they selected. The other issues which cropped up were w.r.t the payment process and printing out e-tickets before going to the event. Users also felt that home page was too cluttered and none of them knew the Attractions tickets were available on SISTIC. The Navigation of the SISTIC site was not noticed by any of the users. Even on the SISTIC site users preferred to use just Search option instead of navigation.
Based on the responses given by the users we did affinity mapping to draw the problem statement. We used different colour post it’s to write down the problem of different users. The problem statement we arrived at was “Difficulty in Seat Selection and Payment Process”.
We also studied the pattern of user behaviours to create personas. Based on the behaviours and patterns of the site usage we identified two personas.
The first persona was that of Social guy who had a balanced life, not so tech savvy but good with devices. He was always on the look out for music concerts when he is free and loved attending them with friends. The main frustrations the persona faced was w.r.t seat selection process. The seat selection was tedious and he did not know the view he was paying for. He was also turned down by the cluttered home page.
The second persona is that of a tech savvy mom of two. She was not very social and had a hectic lifestyle. Her main goals were to keep her kids engaged during their vacations and look for right events for them to enhance their learning. Her frustrations seems to be with a lengthy payment process and printing out e-tickets for events to hand them over to kids.
Based on the user needs it was important to provide a real time seat selection process to help the users visualise the stage from their seat.
Stage 3: User Flow and Customer Journey Map
Since the problem statement was very well established as “Difficulty in Seat Selection and Payment Process” based on user interviews, the task user needed to accomplish was clear. The next step was to break this task into several discrete steps and understand how the user accomplishes the goal of booking a event ticket. The user flow diagram illustrated the movement of the user through the site to accomplish the goal.
After plotting the userflow, we came up with the customer journey map. Customer journey included how a user learns about SISTIC, how he becomes a part of it and interacts with it. Customer journey map was very useful since it helped us understand the customer’s journey through their eyes. This also helped us identify the pain points faced by the customer and opportunities to make the experience better. The customer’s journey for achieving a goal is broken into different phases “Motivation”, “Research”, “Buy”, “Attend”, “Exit” and “Extend””. In each phase the user has different actions, thinks differently, has different feelings and pain points. There are various opportunities for the Business during each of these phases to make the experience better.
Below are the customer journey maps for both the personas.
Stage 4: Information Architecture
Based on the user needs drawn from the user interviews, it was quite evident that SISTIC required a revamp of the sitemap to provide better access to users. During user interview we also figured out that labels and categories were not clear to the users. So we came up with an information architecture with simplified labels and clear grouping of similar categories. Since the categories and sub-categories were few we decided to conduct Tree testing instead of card sorting using www.optimalworkshop.com/ . The results of tree testing helped us easily visualise the Information architecture of the site from the users perspective. The sitemap labels we came up with are “Entertainment”, “Leisure”, “Learn”, “Travel”.
Click here to find the Tree testing results
Stage 5: Wireframes
Since the IA of the site was ready it was easy to visualise the wireframes and its navigations. Both of us drew up some low-fi wireframes and brainstormed to come up with paper wireframes. Once these wireframes were tested with users, it was converted into mid-fi wireframes in axure. In order to solve the users problem of seat selection, we decided to provide users with a 3D model of the theatre which would give them a sense of virtual reality while selecting seats. Based on the users view of the screen they could select seats. We looked up for some existing html and javascript plugins to achieve this task and integrated this with axure to solve the user problem. The plugin required some customisation w.r.t on boarding. We then came up with the high fidelity mockups for the solution after incorporating feedback from users for midfi wireframes.
Low Fi Wireframes
Mid Fi Wireframes
High Fi Wireframes
Stage 6: Prototyping
Prototype was designed to cater to the needs of both the personas. Once the wireframes were ready we started doing all the interactions for the site using Axure. The Home screen had most of the interactions like ad banner carousels, event carousels, the search, header and footer navigation. The seat selection was integrated with external html link for onclick interaction.
Click here to view the prototype http://rwf270.axshare.com/
Stage 7: Usability
Testing the prototype was the most crucial step of this journey. Validating the design to make sure our user goals are met was important. We first conducted usability test on paper prototypes to ensure the user was able to follow the steps clearly. We then reiterated the wireframes and made mid-fi wireframes. This was tested for easy flow of user through the various screens and then high-fi prototypes were tested with 5 different users. Initially we had image backgrounds for various categories and users did not notice it. So we changed it to label blocks as header. Users wanted clickable progress bar. The seat details were not big enough and visible to the users on check out so we modified it. Prompting for email id after the process completion was confusing to the user, so we modified it to appear before payment. Users were very impressed with the real time seat selection and expressed that it is very useful. Initially they were surprised that on clicking seat category they were brought to 3D model screens. So we added instructions and banner indicating they are in a virtual theatre. This seemed helpful.
Click here to view the detailed Usability Test report
Future Developments
Some of the future developments that can be proposed for SISTIC are
- Consistency across different platforms — Website, Mobile web and App look different.
- Language selection options — There are shows in different languages and the site must be able to cater to the needs of different users
Reflecting Back
After the redesign the purchase flow reduced to 14 steps from the existing 18 steps. The user was able to achieve the goal quickly.
This project helped me stretch my limits and work in constraints and produce quality deliverables.
Thanks to my team mate Eugene https://medium.com/@eugenelow who encouraged me to grow, experiment and learn together.
If you like what you read, do not forget to click on the green heart :)
