Keywords: UX/UI case study, large-screen design, interaction design, higher education, school application, recruiting strategy

Prospective Project to be Implemented at USC Facilities

• Time: Oct. 24 – Dec. 5, 2019
• Team: Juii Ye (me), Kaidi Mao, Xixi Huang  
• My role: research, interviews, synthesis, pain points, persona, journey map, problem definition, information architecture, sketches, wireframe, prototype, UI design, illustration design
• Tools: face-to-face interviews, on-line interviews, post-it-on stickers, whiteboards, sketchbooks, paper, printers, Sketch, Figma, Illustrator, Photoshop, After Effects, Keynote, Trello, etc.
  

1. Project Brief

This project is a student project for the School of Cinematic Arts (SCA) of USC. We formed a group of three to create a new design solution for the interactive screens in the lobby of USC’s SCI Building. Our design targeted on the group of prospective students to provide viable information and interactive activities, which attracts them to this program.

2. Design Challenge:

There are 6 big touch screens in the lobby of the SCI Building, but they are not being utilized very well. How to engage people and create interactive experiences for users to better use the screens?

3. Research

Target Users

Before heading on to design, a pre-discussion of potential users was conducted (see below figure). Features were listed out for comparison, namely visit frequency, information they want to get, and activities they may experience when using the screens.

Interviews

After we decided the target groups, we conducted interviews with prospective students. The problem we faced here is that it was not easy to find prospective students. At first, we contacted several oversea-study agencies in China. They provided with us some students resource – it is still very limited as we need to find the very students who are applying for programs in SCA at USC. We also tried to contact the friends and classmates of these students. After so many trials, we got some interviewees who would like to spend time with us. Secondly, we think the most possible situation prospective students will pay an on-site visit to USC is when they are attending the info sessions – that’s the only chance they will use the screens. Therefore, we went to the info sessions and found some great interviewees.

We had 9 interviews in total: 6 of them were face-to-face interviews, the others were conducted through on-line video chatting. Each interview lasted for around 20 minutes. The interviews were structured with some initial questions, and we managed to let the students speak more and give us sufficient insights. Some of the questions are listed as below. We mainly wanted to know how the students will choose their further study institutes. What do they feel and how do they think of the info sessions? Is there anything missing during the process? When can the screens jump in the best?

Sample Questions:

• Tell me about your name, age, current school, grade, future school expectations (majors, ranks...).
• What characteristics do you value the most when choosing a school? (Such as ranking, environment, resources, faculty, etc.) Can you rank them?
• Have you attended any of the info sessions before? In which university? How do you feel? Can you tell me more about the process? What about the pain points?
• Do you have any info session take-aways? What’s different before and after the info session? Is there any new information? Do you want to know more? About what?
• What are your on-site visit expectations?
• List and rank the features you would like to see when using the huge touch screens.
• Do you know any famous alumni from USC?
  

Quotes

Here are some quotes from our interviewees, which helped us to synthesize pain points.

Pain Points

From the result of the interviews, we synthesized some pain points we want to deal with.

Persona

Based on the interviews, we created a persona that addressed the major concerns.

Journey Map

Below is the journey map of Hurry Han’s visit to the info session at USC. We synthesized students’ thoughts and feelings during the process. This also led to opportunities where we could introduce the screens and their functions.

Problem Statement

Then we concluded our target problem with Hurry’s scenario as follows:

4. Design Development

After synthesis of the research, we started to brainstorm ideas of how we can solve the problem. For the process, first of all, we needed an intriguing interactive interface at the beginning page to attract people’s attentions. We were thinking of ways to connect passing-by people with the screens. Secondly, we wanted the users to choose their roles at the very beginning so that our systems could be fully customized to the target group of their choices. In this case, we focused on the prospective students. After that there came two methods of communicating with the users. One was detailed information of the program the user was interested in, which included students’ work and a virtual tour of our facilities, classes, and other resource. The other one was fully personalized consultation with our smart chat robot iii (Internal Interactive Intelligence).

Information Architecture

Based on the analysis, we came up with a basic information architecture which we would test and implement later. It was simple and straight forward, focusing entirely on the target users.

Sketches

After deciding the user flow, I started to sketch out ideas of each stage.

Paper Prototypes

We made some paper prototypes and chose one to test. We tested our ideas with 5 users. The first problem came when we noticed that our prototypes are too small for the screens, so we put them up on the walls to simulate the process in a similar way. If we have more time, we will draw the prototype the real size as the screens to test.

It was quite helpful to do the testing and we received many useful insights to iterate our design. Some of the problems are listed as below.

• People were confused by the images and some of them even refused to do the pose. We illustrated the image more clearly and we provided several images to run randomly. Some people also mentioned that we needed to consider the accessibilities. Maybe we will add some gestures that are barrier-free in the future.
• Our intention was to lead the students to choose “prospective students”. However, some of them didn’t consider themselves as prospective students either because they had not decided which university to go for or they felt they were not qualified for USC. We then changed the option to more describing words like “I’m interested in studying here.”
• Some of the students wouldn’t choose iii to talk to with the concern of privacy. They didn’t want to speak in the public. We thought of solutions such as making the talk more like a game or we could also provide earphones.
• Some of them were confused by the word “classroom”. They didn’t want to see the classroom but to see hardware and software facilities. We made the decision to change the words to “virtual tour: visual class & facilities”， and the sub-choices and also be selected in the same page.

wireframes

After the testing, we iterated our prototype and created a wireframe in Figma. We tested it again with 2 users before we stepped into the UI design phase.

5. UI Design

In order to feel the scale of our design, we digitally placed the interface images in the actual screen and made some subtle changes about font sizes and object placement.

We wanted to create an artistic and mysterious feeling, which represented the atmosphere of SCA, so we chose the flowing colorful theme. We used floating bubbles to indicate that the buttons were clickable (touchable).

smart chat robot: i|i

Another big feature of our design was the interaction with AI (iii). We read through several articles talking about the design of AI and how to write engaging conversational scripts. It was very difficult to design AI to provide senses of humor to human, but at the same time it wouldn’t recognize it by itself. We practiced and read the scripts to our friends to test the machine jokes. Below is a sample video of how users can interact with iii. We designed it as simple as possible and provided some clickable phrases so that users can interact with iii seamlessly. We also provided background images along with the talk to give out more information. Through this way, users will get the most personalized information.

6. Takeaways

• The paper prototype was too small. If we have more time, we will build real-sized prototype on the wall for people to test.
• It was really helpful to do interviews and testing. We could get information and suggestions we have never paid attention to. If we have more time, we will conduct more testing.
• Synthesis was very important but at the same time difficult. For example, we got many advices when testing with users. Some of them were coherent, while some of them were either conflicting with each other or with our own concepts. We needed to make our design choices at the end by balancing pros and cons and figuring out the optimized solution.