Designing for Others: Technocopia for High School Students

By Nicolas Pingal, Amanda Ezeobiejesi, and Xiaoyue Liu

We were tasked with redesigning a website of a local Worcester business for the demographic of high school students. Furthermore, we were required to design for mobile devices. We decided to redesign the website for Technocopia, a local makerspace in Worcester, to encourage more local teens to learn valuable design design skills while also encouraging them to express themselves through making. Technocopia’s existing website was also very poorly optimized for mobile phones, which factored heavily into our decision.

We began by researching designs that specifically appeal to high school students, and what kinds of website layouts are most engaging to them. We found that it was most important to not “talk down” to this demographic. Through our research, we found a few trends that would shape the ethos of our design:

  • Professional looking, minimalist, interface
  • Focus on interactive elements
  • Emphasis on pictures over text

With these in mind we decided which pages we would redesign: the home page, the tools page, the tool training page, and the photos page.

The existing Technocopia home page had a large and impressive image on the front page that looked interactive, but wasn’t actually clickable.

We used this as a source of inspiration for the whole direction of our design, focusing on the creation of more clickable images to manage information better. This was in line with our research into teens’ browsing habits, which found that they generally preferred websites with a greater focus on visuals carrying most of the weight of the content. We focused most of our early sketches on the main page with its large interactive element, as the design of all other pages would depend on that the most:

Early ideas for re-arranging the home page. We considered both adding and subtracting extra elements from the main clickable image, before deciding that simplification was optimal for our demographic.
Paper prototype for the homepage. The sketch on the right shows our idea for the dropdowns.

We decided to keep the horizontal layout, as that would fit better on a mobile device, and would be the most readable and clear format. The original main page looked interactive to us, but we wanted to test exactly how we would indicate that to users. To this end, we focused our paper prototype design on the front page, to figure out how to convey the interactive nature of the main image in the most minimalist and sleek way possible.

In line with this, we also simplified the top menu, using a series of cascading links under relevant main headers to present the entire menu on one screen. This was intended to make the interface more usable on the much smaller screens of a mobile device. We also reorganized the order of links in the top menu, to make them more consistent with our overall goals. We specifically emphasized Join and Learn, our primary objectives with this audience, before showing photos of the space and all of the other logistical information.

Early tools and equipment sketches. The layout on the left was considered earlier to display them in a more condensed manner, but the vertical layout was eventually selected due to allowing for more space to select those options on a smaller device.
Tools and Equipment page sketch used in the paper prototype.

Finally, we sketched out the tools and equipment page for our paper prototype, using the same cascading menu style to maintain consistency over the whole design. This helped to break up the total amount of information displayed at once, allowing users to only see what they wanted to select, while also adding more elements of interactivity with the website.


Paper Prototype Testing

Interactive elements from the paper prototype.

Our task for testers during the Paper Prototype phase was to locate information on Technocopia’s available 3d printers. This was possible both through using the top menu, and by selecting the “LEARN” option on the front page. This was intended to test how well we conveyed that the images on the front page were interactive, and would lead to the relevant information more quickly than by using the top menu.

We had a total of six people test the paper prototype, and their feedback was very clear: all six testers navigated to the tool information page through the top menu first. When they did try to click on the large pictures on the front page, once again, all six testers did not select “LEARN” first, the header that the link to the tool information page was under. Five of our testers suggested that it would make a lot more sense to put the link to the tool information page under the “MAKE” header than “LEARN.” One tester even suggested to not make them cascading menus at all, just having the relevant information and links below the large titles at all times. With this feedback from testers, we began to develop a more coherent vision for the redesigned aesthetic of our website.


Demo Development

Our mood board, with colors drawn from the existing aesthetic of Technocopia, brought up to more flat tones for a more modern look. At least, that was our intent.

Taking inspiration from the earthy, welcoming tone of Technocopia’s original website, we sought to adapt that tone to a more modern layout and style, slightly shifting the colors to match a more muted, modern palette. In particular, we used the light, cream-colored orange as the color for the main header of the website, as seen in the background of the Technocopia logo, as we felt that was neutral enough to fit our modern style, yet still warm enough to match the earthy tone.

We chose Technovia Caps as the font for the logo because the font looks as if it is a sketch with lines on different area of the letters. We felt that this fit really well with the idea of a makerspace since it connotes the idea of designing and building something. We removed the Worcester part of the website title because we felt that it wasn’t necessary to have. Since there is only one branch of the company and the location is mentioned on the home page under “About Us”, Worcester does not have to be mentioned in the title. We decided to keep the “About Us” section before the information provided about the company on the homepage. This is because after the image, there was no clear indicator of what information was to come next.

To make the interactivity of the front page more clear, we stylized each word in the large image to look like a button, giving them rounded edges and distinct colors to help them stand out from the background, and set them apart from other, non-interactive images on other pages. We hoped that this would be enough to convey their interactive nature.

Tools and Equipment Page.

We used four fonts, besides the title of the website throughout the whole design of the demo. Those were Franklin Gothic, Bookman Old Style, Berlin Sans FB Demi, and Eras Demi ITC. We used these to distinguish different sections and different levels of the dropdowns on pages like the tool information page.

Our final top menu. Franklin Gothic was used due to its easy readability on small screens, and the background was given a small gradient to distinguish it from the rest of the website.

Demo Testing

Once again, we had six people test our demo. This time, though, we were not as successful. Despite our efforts to distinguish them, the interactive elements on the front page still looked like static images. In fact, not a single tester intentionally clicked on one of those to see if they were actually drop-downs. Furthermore, most testers found our style to be all over the place: one tester questioned if we had actually changed the logo to something more appealing, and claimed that our website felt like it “lacked modernity,” while another found our color scheme to be inconsistent and our choices of fonts to be questionable. It was very clear from our feedback that our website lacked style, and nowhere was that more clear than when we asked them what our target demographic was: not a single tester thought we had designed for high school students. In fact, the earthy tone and large text in the menus made it seem to some testers like we designed for senior citizens!

It wasn’t all negative, though. Most testers said that the content of our website was very well organized and easy to find. Our tool information page went over very well with testers, as the cascading menus allowed for information on specific tools to be found very easily.

Conclusion

Our biggest conclusion from this was that we changed far too little. We should have completely overhauled the website’s aesthetic instead of trying to adapt it for our demographic. We should have more seriously considered more font and color scheme options to establish a better sense of consistency over the whole website. We should have focused more on a much more comprehensive redesign, and spent more time figuring out our style and making it more coherent. Our content was sound and well organized, but needed to be presented in a more appealing way to our target demographic.