Technocopia Redesigned by Jeremy Hoffman, Myles Spencer, and Zackary Fitzgibbon

Introduction

Our demographic for the website redesign project was 18–25 year olds who were not in college. Since our demographic was on the younger side, we figured they would be less likely to go to a library’s website. Since they were not in school, we thought they would likely be trying to learn some news skills which led to our decision to redesign Technocopia’s website. We wanted to make the site a little more modern and follow a more standard format for mobile websites. The other main goal was to provide easy to access information about learning opportunities that they could take advantage of.

Paper Prototypes

Our Design

After choosing the focus on the Technocopia website and keeping our demographic in mind, we chose a few pages to re-design. These pages were the home page, the calendar page, the direction/parking page, and the photos page. These pages were selected because if someone in our demographic was to visit the website, we decided that they would try to register for a class. The calendar page highlights all the offered courses and their times over the month and months to come. Being able to then select a class and register from there would be incredibly useful for our demographic. The directions/parking page is useful in figuring out how to get to the Technocopia location. Since not all people would have cars, public transportation stops were added in such as bus stops and train stops. Photos page is useful in visualizing the location, classes, team and various other aspects of Technocopia and taking a course with the team. Separating the page into logical headings helps to add to the readability of the page and provide contrast between the differing photos. The home page also offers a lot as the first page that is viewed. Adding in some photos with a description and links to other pages added a lot to the page that people in our demographics would like.

Home screen
Directions page
Photos page
Calendar page
Course pop-up
Drop down menu

Testing and Feedback

When we were presenting the paper prototypes to the members of our class most of the responses we got were positive. The most popular thing that our users said was that our prototype was easy to navigate and self explanatory to find the different pages we wanted them to find. All of the feedback that we received on the paper prototypes we implemented into the final design. Those were adding a home button to the menu page, adding a link to the home page to both the logo and the Technocopia Worcester in the header, having a link to the mailing list on the home page, and changing the calendar so if you click on the day you get a bigger pop up of the classes on that day. We found all of this feedback very useful. While paper prototypes were very useful because they were easy to make so not much time was wasted if we had to completely change the design, it was hard to put certain screens on to paper. Some of the screens we had trouble with were the calendar and photos. The calendar screen was hard to put on paper because the writing for the course names were too small to actually write on the paper. The photos were hard because we didn’t know how small we could make the pictures while still allowing people to see them, which caused problems with how many pictures we could fit in a row.

Testing Paper Prototypes
Testing Paper Prototypes

Invision

Our Design

When translating our paper prototypes into a digital prototype there were a couple things we had to think about that we hadn’t had to think about before, the biggest one being color. For our color scheme we tried to keep it very similar to the current site so it would still look familiar to anyone who had previously used the site so as not to cause any confusion. The color scheme we took from the current website is brown and gold with white and black text. Another thing we had to think about was what fonts were used as the paper prototypes were just handwritten. We chose to go with the font Nunito because it is a modern font that is easy to read and fairly common across the web. Another thing we had to think about way more with our digital prototype was consistency. With the paper prototype we could get away with every page being slightly different because they were hand written and didn’t look like they were made to be exact. But with the digital prototype any inconsistency between the pages became apparent very quickly. By making things such as font, font size, color scheme, and spacing consistent across of the pages it makes the browsing experience feel connected.

Testing Invision

Final Design

Following the testing on demo day in class, the team received valuable feedback. Firstly, almost every single user was able to guess around our general demographic. The guesses were high school students, college age people, and people in their twenties or thirties. The feedback for the guesses was that since we targeted the pages we did, it would be in those ranges. The users noted the emphasis on transportation and taking these classes which also attributed to the guesses. The team wanted to keep the core of the design the same, as it received mostly positive feedback in terms of design and our targeted demographic was coming across. Using the feedback, minor changes were made. For example, text size was increased on the homepage for it to be easier to read. Also, the more info buttons were changes to an in-text link to appear more modern. The calendar page was changed to include the address for Technocopia at the bottom for consistency across all our pages. A final change was to allow for photos to become enlarged for easier viewing.