Creating Innovation through Education
About this Project
UX Researcher |UI Designer
UX Researcher |UI Designer
Even though this project was a redesign, it involved a number of different roles and responsibilities. These include management (sprint planning, designs, recruitment for usability), UX analysis (flows and competitive analysis), design, low-fi and high-fi prototyping
Bay Area National Science Foundation (NSF) Innovation Corps Redesign
How mobile-first responsive web-design redefines the innovation course application experience
Initially the project scope was a simple website redesign. After reviewing the company website and learning who the target student teams were, it became clear that students in general are heavier mobile users than desktop users and having a seamless experience in a mobile-first design would allow for less confusion and better engagement.
Per conversations with the company stakeholder, a redesign of the website was requested. The current website was busy and difficult to follow. To make it more inclusive, I used a more user-centered experience approach in the application process.
Rather than designing for the web, I took the approach of mobile-first responsive design. I did this because students use mobile more often than the web. Designing for mobile first ensures that screens will adjust to correct size with the given content.
The current Bay Area NSF I-Corps website was clunky and was difficult to follow, as a new user who may be interested in applying to the short course. It was not user-centered, with elements such as the blog, leadership, and testimonials not centered on the goal of attracting potential teams for this program.The basic information of the courses was unclear with the call to action, not clearly defined.The application, itself was in a separate Airtable document with redundant questions that were not relevant to bring the team to apply to the program.
The challenge for this redesign was to bring a clear explanation of the program with a defined call to action. Bringing the other elements of the site and the elements from competitor sites together in a cohesive way so that applicants have a positive user experience without overwhelming them in the process was part of that challenge.
Modified Design Thinking
It is so often that we hear of a problem and we think we know what the solution is. However, without design thinking, and understanding the users and their experience, the results may fall short. The process of design thinking including: Empathize, Define, Ideate, Prototype, and Test are crucial in understanding why certain design solutions may work better than others. Design thinking is an iterative process. In this project, I iterated at every stage. Learning from the participants in usability tests helped me better define what was needed for a better cohesive experience.
There were no true competitors for Bay Area I-Corps. However, other I-Corps and Innovation education sites provided inspiration. These organizations include sites such as Citrus Foundry and the UNY I-Corps. They provided inspiration for the home screen where the testimonial was added, as well other aspects of the application process, such as identification.
The requirements for admission into the short course included: graduate or doctoral student teams (2-4 members) with an interest in bringing a tech idea to market. This team dreams of something big where they can create something amazing in the tech world with their idea.
The colors that were chosen were chosen as a brighter alternative to the current color scheme that would entice excitement and attract potential users.
The elements that were included were simplified. I had considered using an envelope but found through usability testing that there was confusion on what it represented. Instead a simple question mark was used.
Font Family: Helvetica
Header and Body
This is the weight and font of H1: Helvetica Bold, 32 pt font
This is the weight and font of H2: Helvetica Bold, 24 pt font
This is the weight and font of H3: Helvetica Bold, 18 pt font
This is the weight and font of the body: Helvetica Regular, 14 pt font
This is the weight and font of the caption: Helvetica Regular, 12 pt font
This is the weight and font of the footer: Helvetica Medium, 12 pt font
Bay Area NSF I-Corps did not have a logo so I created one that would emulate innovation:
Initial sketches were done from the comparative sites and current site.
This one is the “About” screen. Original idea was to have a separate page for the national program but found it was not necessary through the user’s experience.
The next screen, the Local screen, includes elements such as a photo and testimonial. It also included a comparison of the short course (local) and national, a timeline, and methodology but were not included in the final screens due to not being conducive to the user’s experience.
Wireframes to High-fidelity: Onboarding
The two screens above are the onboarding screens. Usability tests of the wireframes showed that users were confused and didn’t feel like they had proper background information on the program. By using the bullet points of the basic ideas, users felt more inclined to apply.
The application used a Typeform format.
Originally, emails were used for each member, but found it was better to get that data from the team’s website.
Original idea was to use a student ID for verification. However, the stakeholder reminded me that this may be an area student users might not be comfortable. Connecting through LinkedIn was a better user experience.
The screen on the left shows the low-fi screen of the request to upload. The screen on the right shows the video recording. Participants are required to explain more about their technology idea and what they want to get out of the course.
Team Member Invitation
Because it was required to have teams of 2-4, it was necessary to send invitations to the rest of the team.
Usability showed that users weren’t comfortable with giving access to contact list on the phone. Therefore, a simple form was used instead.
Usability Test Results
Round 1 usability was conducted using wireframes. In this round, users came to the onboarding screen which had very general information. Users were confused about what to do, especially since the screen had Apply in the bottom bar and in the button.
Other issues were confusion about icons. The envelope for most people means email and my intention was to give a way to ask questions.
Security issues seemed to be an issue, as users were not comfortable uploading ID or giving access to contacts.
Round 2 Usability tests were used using high fidelity screens. In this round, icons were updated, eliminating the second Apply in the bottom bar, removing faculty/administrators, and the envelope was changed to the question mark.
The onboarding screen included more specific information that would entice users to apply, including the amount of the grant, funding, and other support opportunities.
Security issues were dealt with by using Linked In, eliminating the need for uploading the ID. Using a simple contact form, rather than granting access to contacts made users feel more confident in Bay Area I-Corps security.
For one month, Bay Area Innovation Corps contracted with me as a UX Designer and Researcher. Initially, it appeared as though it was just a straight redesign web-only project. However, after much research on the company, the type of users, their service, as well as comparative sites, it was clear that it needed to be mobile first responsive app design.
Using the application process, with the information from testimonials, users were given an experience of moving through the application process using a typeform format, and connection through LinkedIn to make it a more organic process.
One of the areas I learned was the difference between marketing and product. Although in some ways, I am still learning it. Sometimes that line gets blurred but it is an important lesson to learn in product design. As Marty Cagan of the Silicon Valley Product Group explains, “product is about creating great products that users will love and marketing is finding those customers and convincing them to try it.”
Sometimes it is necessary to include a little education prior to the flow (this is the marketing part) but should be the entire flow.
Connecting to LinkedIn, eliminating the access to contacts, eliminated user stress and gave users a better user experience.