Movie Going is a Religious Experience
In this design sprint, we aimed to create a mobile version of the Lewisburg Campus Theatre website specifically for religious individuals. Within the given scope, we chose to narrow our focus to design only for religious groups at Bucknell, in part to give us something more concrete to work with, but also because the Campus Theatre’s policy against religious use is less an issue when Bucknell groups are considered. From examination of the webpages of Bucknell religious groups, we discovered that their focus tends to be on meetings/events, a connection to authority, and photo galleries as evidence of the above and of the group in general. With this in mind, we set out to design an app that would reflect these foci through a logical and intuitive interface, while employing a color scheme reminiscent of both the Campus Theatre’s existing webpage and the webpages of the various Bucknell religious groups.
In terms of tools and strategies that worked, I feel that drawing the sketches helped greatly with being able to put together a strong prototype. While a lot of the pages did not need to be drastically redesigned from the original website, it was still helpful to create multiple forms of each screen individually, and then to come back as a group and converse about what parts of each screen would work the best. From here, it was easy to create the paper prototypes because a lot of the screen features were uniform in terms of design. This helped make it easier for the users during testing to understand the functionality of the app on each page.
What we found to not work was Powerpoint as a tool to build screens for Invision. From Microsoft Powerpoint, we were only able to take screenshots of the produced screens. In our case, the uploaded pictures were not the right dimension and left us with some empty white space at the bottom of each screen. Other groups that used Powerpoint enlarged their images, but then were left with grainy pictures and illegible text. For the future, it would have been worthwhile to spend some time learning some of the other available options, such as proto.io, gimp, and the free version of Photoshop. However, having been most comfortable with powerpoint and not having enough time to fully develop a working ability with these other tools, we thought we would at least produce some images even with the unusable white space at the bottom.
With such an open-ended problem, there were plenty of options that we could have taken when finalizing our prototype. Each specific detail, ranging from color, to size, to location and many other factors, all will impact your user’s experience. Early in the design process, we were faced with the options of choosing which screen styles we wanted to use. The group here was generally in agreement that the page should focus on the content and have the hamburger button on each page to allow users to pull up the button at any time. This approach followed the idea of progressive disclosure: that we could avoid cluttering the page, but still give a clear notion that the menu was readily available. Through the feedback, it seems that the hamburger button was both liked and disliked (styling issues with it aside) and that it may have been a successful menu integration had some other aspects of our app been a little bit better.
Another area in which we explored options was on our group. Originally, we were tasked with redesigning one of the three website options for religious groups. Of the options (the Campus Theater, Union County Library, and Weis Center, we thought that the Campus Theater would be the easiest to do with their ability to screen various religious movies and also their capacity to bring in Bucknell student groups. Due to other limitations from their policies, it was once we chose to do the Campus Theater that we narrowed down our group to strictly Bucknell religious groups. This had a profound impact on our final product because focusing on Bucknell religious groups altered our color scheme and some of the functionality that we got out of our prototype. It was difficult to redesign the web page with a focus for religious groups because the existing site has any links that center opportunities at the theater around religious groups. As we checked related websites and built our mood board, it seemed to make the most sense at the time to combine the two overarching themes of the Campus Theater’s existing website and the Bucknell Religious Group web sites — all run through the Involvement Network.
After review, the feedback shows that we probably should have avoided combining this color scheme. The black background that seems to work for the current website did not translate well to our mobile prototype. Adding the light blue and orange buttons/text also seemed to be unfavorable by many. In the future, it would be more aesthetically pleasing to still use a neutral background, but one that is not so dark and overwhelming. The color scheme should be simple and not try to mash as many related colors into one app at once. For example, with an iteration, I think a medium gray color would do for the background, maybe with white or lighter blue accents for buttons and text. These days, it seems like sleek and simple is the way to go, and looking back at our design we have a bit of a busy page with clashing colors.
Each of us chose one screen to tackle. Anushikha went with the Schedule page, Sean picked the Rentals page and Wesley chose the Tickets and Pricing page. We also each decided to come up 3–4 sketches for the home page. While sketching, it occurred to us that the best way to reach a target audience of religious groups was to create a separate tab/option in the menu that catered to their needs. Thus, aside from a standard schedule page, we decided to also create sketches for a ‘Religious Screenings’ page. Once the sketches were complete, we met up and critiqued each other’s designs to ensure that we were targeting our audience base of religious groups.
Once we had given each other feedback on the initial sketches and agreed on common layout designs, we went back and created a few more sketches based on the new input that came from the team. Based on these sketches, we then designed our paper prototypes.
We brought our paper prototypes to class and had each of us navigated through the designs. Some defects popped out immediately. Making a note of this, we moved into testing our prototype with people outside of the team. We had three other students of different religious backgrounds navigate our prototypes. This experience was more challenging than we expected it to be. Unlike invision, we had built no clear ways to explain to the testers that not all links and buttons mapped on the paper prototypes were clickable. In hindsight, it might have been better to shade in the clickable buttons and links with a different color.
Sercan Oktay, one of our willing prototype testers, said that the “designs are creative but a little hard to navigate.” When pushed further, he suggested that a button which lead back to the homepage would make navigation much easier.
Another challenge was that sometimes we received contradictory feedback on our prototypes. Sercan liked the fact that we did not have a scrolling screen because it made it easier for him to see all the available content on one screen. On the other hand, Kanishka Suwal, another one of our prototype testers, wanted to be able to scroll from one screen to another. We could not decide on which feedback to go with, but limitations of time forced us to stick to a screen without scroll bars.
Once, we had the criticism and reactions to the paper prototypes, we made a few changes to our designs. It would have been nice to have more time to do more testing on these refined paper prototypes but alas, we had to move onto mapping our moodboard and creating the prototype on InVision.
The above image is a screenshot for our moodboard. In our process of designing the moodboard, we listed all the ideas/things that we thought about when we thought about religious screenings at the Campus Theatre. We googled words like religion, religious movies, campus theatre, bucknell, campus catholic ministry, jewish house etc. and chose images to upload on niice.com (the online tool we used to create mood boards). Looking at the series of images we found, we decided on a palette of — orange and blue (since we were catering to a Bucknell audience), pale white and grey (common schemes around religion) and black (to maintain some level of familiarity and consistency with the existing Campus Theatre website).
The final version of our app consisted of a 21 screen prototype in InVision, with pages grouped around the homepage, tickets, religious screenings, and rentals. Navigation between groups was implemented as a hamburger button menu, while in-page links connected pages within the groups. In order to cater specifically to Bucknell’s religious groups, the religious screenings section includes links to group-specific pages detailing the events of each group, and throughout the app, various elements were supplied and arranged to reflect the what we saw to be the foci of the various groups. On the Rentals page, for instance, the possibility of using the rear lounge seating of the theatre for a meeting space was mentioned (meeting focus), as was the possibility of having a speaker present before or after screenings arranged through Bucknell (connection to authority focus). On a more general level, movie examples were chosen from the faith-based genre, and provision was made in the food pricing/information section for dietary restrictions required by religion.
If we had had more time, there are several aspects of our prototype we might have changed or improved, based on user response and our own plans which we were not able to implement in the timeframe of the assignment. Although there was some positive feedback on the color scheme we used, the overall response was that the colors chosen did not go well together, or were not good choices. This was a result of us trying to bring in both the existing campus theatre color scheme of black with yellow text, as well as the Bucknell orange and blue from the pages of the religious groups. With more time to spend, we might have been able to create a color scheme with a new direction, while still being reminiscent of both, which would have made the app stand out more, while also better holding it together.
Another area which users found lacking was navigation throughout the app. While we did implement the hamburger button menu and a home button consistently throughout the app, navigation through these means generally required at least two actions to reach specific pages. Furthermore, the schedule page had direct links providing one press access to the main set of pages, and only a subset of the pages provided back button functionality, making the system as a whole somewhat inconsistent. Based on user feedback, direct tab-style navigation at the top would have made the app easier to navigate and use.
With respect to the goal of tailoring the app toward members of Bucknell religious groups, though, user responses tended toward the positive. Several of the responses in particular showed appreciation for the clear and direct manner in which the app was targeted. Within this area, users also expressed approval for the ease with which religious movies could be found, as well as the wide-to-narrow flow from the overall screens to the group specific screens within the app.
In conclusion, this project was a great start in terms of learning how to implement human-centered design. Based on our demographic of ‘religious groups’, Campus Theatre was probably the least viable of the websites to choose for the project. We could have done more research on the websites and their policies before we dived in and that would have made our task a lot simpler. However, we took up the challenge and did our best to serve the target base. Our color scheme and navigation could be improved and we learned that Powerpoint was limiting as a design tool. We did not have enough time to learn how to use Photoshop or any other more versatile design tools but that can be kept in mind for future design projects. Based on the feedback received from our testers and our peers, it appears that we successfully catered to our demographic. The experience was challenging but also very enlightening and highlighted why designers have to go so much in depth with their research phase.
You can access our mood board at the following link: https://niice.co/m/d1d2727bc9a5bc57eb2e5773038bef25
You can access our final prototype at the following link: https://medium.com/@wjm024/movie-going-is-a-religious-experience-dca875a6b194
