HCI Project 1: Design For Others
Cole Granof, Carla Duarte, and Xinzhe Jiang
WCTI is a technology incubator that gives its members the tools they need to develop successful startups. The main purpose of the current desktop website is to convert potential members by making the opportunities at WCTI appear as attractive as possible. The tools, workspaces, partners, and accomplishments of WCTI are all pieces of information aim to fulfill this goal. All the content that promotes WCTI needed to flow toward signing up for membership.
We were tasked to redesign the current WCTI desktop website into a mobile website for the demographic “young entrepreneurs between 20 and 30 years old.” The goals and motivations of this demographic are highly aligned with those of WCTI, making for a natural fit. Since mobile is becoming more ubiquitous, especially among our demographic, it was important that the content and functionality of the desktop website was adapted for mobile thoughtfully. Young people are familiar with the conventions of web content as a whole, so we chose to stick to conventional iconography for maximum usability. At the same time, the website needed to appear modern and engaging. A design that lacked modernity would reflect poorly on WCTI as a “tech incubator.” Pinpointing the design elements on the desktop website that we reasoned to be “dated” or “kitsch” helped us create an image that would appeal to young entrepreneurs.
Paper Prototype
Our paper prototype tested multiple methods for navigation. The hamburger menu would reveal a set of navigation links to access the About page and Membership Application page. These pages were also accessible from the home page by clicking on the corresponding buttons. These buttons were placed towards the bottom to allow a user to “tour” the contents of the site in a natural order without relying on the hamburger menu for navigation.
We used a paper mechanism to simulate the bezel of a phone, “scrolling” the content by pulling paper tabs through the frame. During testing, one person operated the paper prototype while another took notes based on observations and comments from the user.
These tests revealed that the users’ first inclination was to consume the content presented on the home page in a sequential order. Navigation buttons outside of the hamburger menu acted as breadcrumbs, leading the user through the informational pages of the site. One user commented that they liked the “flow” of the website, attributing this flow to the logical ordering of the buttons at the bottom of the page.
No testers interacted with the hamburger menu unprompted. After the test, multiple testers mentioned that they did not notice the hamburger menu in the navigation bar at all. This could be a limitation of our paper prototype, since the sketches lack contrast compared to a full color web page. In a future paper prototype test, we should make our paper elements more distinct to avoid confusion. Instead of sketching thing with pencil, we should use colored paper prototype to enhance contrast.
Even though testers did not leverage the dropdown menu, most testers had no trouble navigating through the entire site. Each user eventually arrived at the membership signup page by clicking one of the “Become A Member” buttons, which were present at the end of multiple pages.
Navigation was not completely intuitive for everyone. One user attempted to go back to the home page, but could not find out how to do so. Our assumption was that most testers would attempt to tap on the WCTI logo, since many sites link the logo back to the home page. (Apple’s mobile website and WPI’s mobile website behave in this way.) This lead us to consider other ways to make navigation back to Home more explicit.
InVision Demo
We used Sketch to create a prototype which was then transferred to InVision for testing. In designing this prototype, we felt it was appropriate to preserve the Sans Serif font type and color scheme of the desktop website. We chose to leave behind the Serif font which the desktop version uses in some areas. This decision was intended to increase the readability and modernity of the mobile design. A mood board allowed us to gather our ideas regarding the overall style of the website.
Our paper prototype testing revealed that navigation system was successful overall. One of the few criticisms we received was that our hamburger menu icon did not emphasize the menu enough. The hamburger menu was enlarged, and text was added to emphasize the functionality of the menu icon. A menu bar appears on every page of the mobile website, allowing the user to navigate to any page regardless of where they are. When the hamburger menu icon is selected, a drop down menu appears, blurring any content on the page behind it. This was intended to allow users to focus on the menu options.
The login button was put in the drop down menu to avoid crowding the menu bar. Some of the testers mentioned, however, that the login was hard to find.
It was essential for our users to find their way to the About page, where they would find compelling information regarding what services WCTI offers. One criticism we received was that the content seemed really plain and was not engaging to the reader. Because the About page is crucial to WCTI’s main goal, we knew this would have to be addressed in our final design.
We modeled the Contact Us page as well as the Membership Application page to be simple forms. We intended for these pages to be easy to fill out on a mobile device.
At the end of each test session, participants were asked to guess our demographic. As previously mentioned, our demographic was young entrepreneurs in their 20s and 30s looking to start up a company. Most of our prototype testers guessed that the website was designed for people who were interested in starting up a company. Some testers also guessed that it was designed for “young people.” One outlier said that they assumed the page was designed for visually impaired, older individuals. Overall, our design seemed to align with our target demographic.
Final Design
Our final design applies what we learned from the demo to enhance usability and aesthetics in multiple ways.
We added a light drop shadow to visually separate the menu bar from the background. This was important for pages that did not begin with an image. The effect of this design choice can be seen on the Membership Application page and the Contact Us page.
To address navigation concerns, we removed the login button from where it was hidden within the drop down menu, instead placing it to right corner of the menu bar. Further, we removed the redundant “Membership Login” option from the drop down.
To break up the bulleted lists on the About page, we included thematically appropriate icons above each section. This added variation to the layout and created clearer separations between sections. Additionally, the hyphens used in the bulleted lists were changed to proper bullet points in the final version, which added a layer of polish
Using the existing color scheme and typography, we created a new, more minimalist logo for the menu bar. The original logo was rectangular and spanned the height of the menu bar. This had the effect of separating the menu bar into two separate pieces. The new logo removed the surrounding rectangle, which makes the menu bar appear contiguous from left to right.
The text at the bottom of the logo reading “Worcester Clean Tech Incubator” was removed, because it was unreadable at a small scale. In order to reintroduce WCTI’s full name back into the design, we placed text at the top of the picture on the home page.
We expanded all pictures to fit the width of the entire page. This removed the white borders that were perceived as “awkward” during user testing. Additionally, this gave the menu bar a more obvious rectangular form.
The final version of the mobile website preserves the branding and successful design motifs of the desktop website. Our careful consideration of “pointing” the user to signing up for membership proved to be successful in our demos. By paying attention to the order in which users consumed content, we were able to refine the navigation systems within the site. Our consolidation of the website’s core functionality allowed us to give extra attention to aesthetics and consistent branding.
Young entrepreneurs are steeped in the world of technology, and therefore sensitive to lapses in modernity and usability. Keeping in mind this demographic kept our standards high, and helped focus our design.
You can browse an interactive InVision prototype of our final design here.
Relevant Links
WCTI’s website: https://www.wcti.org/
Icon resource: https://www.flaticon.com/