A Design Document: Technocopia Redesigned for Young Adults Not In College

by Aidan Buffum, Rafael Pimentel, Meixintong Zha

In Professor Charlie Roberts class, we redesigned Technocopia Worcester’s mobile web page. Our target demographic is young adults age from 18 to 25 who are not in college. This experience involved paper prototype testing with our classmates and final design demo. In this document, we will show you our sketches and final products, and we will go over our design choices and feedback from our classmates.

Sketches

Mood Board

Final Product

Feedback

Paper Prototyping Feedback:

When user testing with our paper prototype we received largely positive feedback. Testers liked the white background accented with colors (a bright yellow at the time) around buttons and the menu. Likewise, they appreciated the blue text to indicate links as opposed to the black text otherwise. The first suggestion we received for improving our prototype were to add a home button to the top of the screen or the menu. Users generally did not attempt to click the logo to navigate home as we had originally expected and stated that they would prefer a visible home button. The second suggestion we received was to make the Subscription page separate from the contact page. Our initial reasoning behind the decision to cluster the two pages was to reduce the number of pages with only a single line of text, a small textbox, and a submit button. Although this change was positively received across the rest of the website, users preferred that the subscription page be separate.

Demo Feedback:

  • Love the clean color choices
  • Love/Dislike the white background (we received opposite comments)
  • Love the sliding boxes in Tools page
  • Suggest to enlarge the font size
  • Suggest to add a footer
  • Suggest to use larger margins
  • Suggest to change the order of the dropdown menu
  • Suggest to add the design for Learn page for our demographic
  • Suggest to add more information before subscribe button
  • Suggest to add more visual guidance

Design Decisions

The general idea for our web page redesign was to have a clean background with easy to follow buttons. Our demographic is young adults from 18–25 years old who do not go to college. Young adults in this age tend to be compassionate and motivated to learn new skills and turning more mature and independent. Our primary changes to the website were in a restructuring of the inter-page navigation, an overhaul of the tools page, and an overall aesthetic update.

In redesigning the inter-page navigation of the website, we made a standard mobile-friendly dropdown menu denoted by the common set of 3 horizontal bars and aligned it to the left side of the page. We centered the Technocopia logo next to the menu button and added a home button to the right of that as a result of tester feedback. We also altered the order of the items in the menu and changed some of their names to be more fitting such as condensing the “visit us” and “directions” pages into one, separating the “contact us” and “subscribe” links,

We decided to redesign the tools page by adding icons to give user more visual aid on learning the types of tools technocopia has. Likewise, we chose to separate each type of tool into sections rather than a massive list of text as was on the original site.

Aesthetically we decided to make the font size of regular informational text 10pt to fit the text beside the picture and not occupy space beyond it for other buttons. We chose to use 16pt bold font for button text and tool links for emphasis.

When deciding which colors to use in the website redesign leaned away from the dark brown and orange scheme on the original Technocopia webpage. For the menus and buttons around the website we changed the previous orange to a mellow yellow. We chose this yellow because it is a more energetic color, which we deemed fitting for our demographic, and because it provided better contrast from the technocopia logo so we could move it to the top of the page without obscuring any of the logo. Likewise, we believed a yellow or grey color would be most fitting to represent the makerspace environment of Technocopia so we chose to use the yellow.

For the page backgrounds and text, we chose to change the white text on dark brown to a more simplistic black text on an off-white eggshell background. Our reasoning behind this change was to make the pages feel less busy and increase simplicity of the pages.

In keeping with our yellow menus, we chose to accent several parts of the site with a soft purple both because it is a complementary color to yellow and because it is dark enough to provide an outline to the lighter yellow components of the site.

In order to maintain readability, we kept links in blue text as it is is a general standard across the internet. Likewise, we kept important tables in the original orange color from the Technocopia website in order to increase contrast on the page and draw readers to them.

The moodboard is one of the keys we used to decide how we would design our site, this kind of demographic is all about progressing, getting projects done. So we emphasized on making things easy to use and finding a good way of displaying lots of useful information in an comprehensible way, we truly believe that the color choices and the way we implemented the tools page is a good example of these decisions.

Demographic

On demo day, two of the six individuals who tested our redesign of the site were able to guess our target demographic, but most guessed that it was targeted towards a younger audience. The key they used to guess the age group was the font size, especially the one in the front page. Some other clues were the white background and the minimalistic way of quickly accessing information. For the remaining testers, the simplicity of the site obscured our demographic and they gave up instead of venturing a random guess as to what our audience was.