Design for Others
Redesigning Technocopia for Mobile Devices
Similar to many startups in Silicon Valley, we were tasked with designing a web application. But in our small classroom at Worcester Polytechnic Institute, our project was to redesign a local organization’s website as a mobile app. Specifically, our assignment was to redesign the website to target people in their 20s.
Choosing A Website
There were three local organizations to choose from: Technocopia, the Worcester Public Library, and Worcester CleanTech Incubator. We reviewed each website, both for the content and the layout, from the mindset of our assigned demographic, “20’s Adults,” and determined that Technocopia’s website was the most feasible for our redesign.
Our demographic is less likely to interact with a library than the other two organizations, so we decided against choosing it early on. On the other hand, both Technocopia and Worcester Clean Tech Incubator have potential overlap with our demographic.
Between Technocopia and Worcester Clean Tech Incubator, we felt that the Technocopia website had more room for improvement, allowing us greater freedom to redesign it for our demographic.
Conducting Research
Before we began brainstorming the actual design of our mobile site, we conducted some research on how to appeal to millennials, specifically adults in their 20s (our assigned demographic). We referred to previously-made applications and psychological studies to determine how we wanted to convey information on our site.
Some of the facts that we gathered included:
- Having links to social media pages works well and facilitates communication
- Having interactive elements (videos, tutorials, etc.) are a plus
- Odd numbers are more visually interesting, even numbers are more comforting (this applies to objects grouped together)
- Unexpected aspects should be avoided, as they lead to confusion (i.e. things not working as the user expects them to)
- Simple, minimalist icons are more understandable (simple, gray icons)
We used all of this data and incorporated them into our final design.
The Beginnings of Brainstorming
Once we finished researching our demographic, we began the brainstorming process. We looked at all of the pages that the current version of the Technocopia website had to offer.
We were required to redesign the home page, as well as a minimum of three other pages. Based on the existing pages, the workshops page, the tools and equipment page, and the blog pages were the pages we felt had the most room for improvement. We also agreed to add in a loading screen when the website first loaded up, which results in a smoother, seemingly faster process when first arriving on the homepage.
Sketching Ideas and Paper Prototypes
Then, the sketching process began. We ended up having several sketches for each page, as quantity will eventually lead to quality, at least in terms of design. We had many different ideas for each page, most of which did not end up in the final product, as is the case with most final products.
We eventually came together and discussed all of the sketches that we had made. Some specific ideas that we all agreed on for the final design included adding more images to pages like the tools and blog pages, introducing the website with a welcome video on the homepage, and using drop-down menus to organize the program and tools pages.
For each page, we made paper prototypes that we drew on in greater detail paper. We heavily relied on these when making the final website design. Each one incorporated the ideas we agreed upon during our meetings. However, even some of the ideas here were changed when brought over to the final website design.
Creating a Mood Board
Before we could begin our final design, we needed ideas for the overall appearance of our website. This is where the mood board came in. Our mood board consisted of the different colors, logos, font styles and icons we could use for our site. Not all of these were used in the final design.
Some of the colors we looked into included different shades of gray (don’t you dare go there), black, browns, oranges, blues, reds, and greens. We ended up using the brown (from the original website) for the header, the grays for the background and some of the simple geometric shapes, black for the text, orange for the headers, and blue for the navigation bar at the bottom).
The logos and font styles were kept from the original website for consistency. The logos we re-used included the Technocopia Worcester name, the torch icon, and some of the images from the workshops and blog pages. The font used for the Technocopia header was Sanchez Regular, which we used for the entirety of the website to maintain consistency.
The original Technocopia website had a cardboard texture overlay that made the site visually interesting. In our final design, the Technocopia Worcester name technically had this texture to it, but the rest of the site did not. It was too distracting when used with our color choices. Getting rid of it made the site look cleaner and kept things simple.
Forming A Final Product
Last, but certainly not least, we finalized our UI design. Unfortunately, we had to use two separate pieces of software to create the pages and actually make them work. We used Proto.io to create the individual screens. (Important to note, during the transition from paper to website, the workshops page became the “programs” page, and the blog page became the “news” page. Having “programs” allowed us to combine workshops, tool training, and youth education into one page. The blog page seemed redundant since there was a link to the Technocopia Facebook page, so we made the page into “news” that focused more on formal newsletters.)
Proto.io is not the most user-friendly website, as it takes time to understand how to do simple things such as importing images and changing the background color (too bad we weren’t redesigning Proto.io.). Once we got around these obstacles, we first worked on the homepage, and then split up the work so each of us did at least 1 individual page.
Most of the time spent on the final design was getting Proto.io to work correctly and deciding on a color scheme as noted previously. Once those problems were tackled, we simply created our designs based on the paper prototypes we had made (with some minor adjustments) and then imported those images into Invision, which actually linked our webpages through navigational widgets such as buttons. This process was actually quite fun (we may or may not have included a couple of easter eggs for you to find! :) ).
Conclusion
Overall, the process of creating this design went as follows: choosing a website -> researching good design choices -> sketching -> creating a paper prototype -> making a mood board -> designing the final website -> linking the pages into a final product.
There were many strengths that our re-designed website had over the original. Our color scheme was a lot more appealing, although it did lack the original cardboard. Our site also was organized better, as all of the different types of programs were placed in one location, and all of the pages were related to each other (such as correlating tool training in the programs page with the tools page). This allowed for easier access that made sense to actually use.
One major improvement that we enacted was the interactivity that we added. Originally, the tools page consisted of a bullet-point list with no visuals whatsoever. We added several images to this page as well as to all of the other pages. We added an introductory video on the top of the home page and a navigation bar at the bottom instead of having a menu with a list of pages to tediously search through.
Reflecting Upon our Design
Our final design was not flawless, however. Our main potential issue was the use of the drop-down menus on both the programs page and the tools page. On a desktop, this probably would have been fine, as drop-down menus are good for organization. However, for mobile, drop-down menus are a lot more tricky to implement properly, as they are easier to interact with using a mouse. We also did not include functionality for every drop-down menu; this was due to a lack of time and lack of necessity, as having at least one example was sufficient in our opinion.
If we had more time with this project, we definitely would have added functionality for all of the other drop-down menus. We also would have created the “about” page that is listed on the bottom bar in the footer. We never actually made the page, but we hypothesized that it would have combined information from the original directions/parking, contact info, and team pages on the Technocopia website. We could have potentially come up with a better solution than drop-down menus for organization if provided more time.
In the end, we demonstrated our website to a variety of our classmates and a majority of them were able to determine our target demographic, showing that we clearly designed our website correctly for adults in their 20s. We had to iterate through a long, complicated process consisting of several phases of design to end up with a final product, but it was necessary to do so. Taking the time to research, brainstorm, and actually design ensured that we would have a successful product as an outcome.
Feel free to look over our design prototype and leave comments on this post. Here is a link to our Invision project: Technocopia Mobile Prototype
Made by John Amaral, Eda Zhou, Jacob Remz