Ideahack: OperationCode
About: My first 12-hour Hackathon involved working with a Veteran-led nonprofit aimed at helping US Military affiliates and their families transition into Software Development
Challenge: Within this limited timeframe, our objective was to conceptualize a user experience that would :
Encourage partnerships with other organizations
Make it easy for visitors to join our community.
Research: Our first line of action was to chart user flows of the current website and see how the information is laid out. We noticed that a lot of the information from the website was scattered and the hierarchy of information needed to be re-organized. We noticed that some of the company's services towards the user were hard to notice from the website at first glance.
The original OperationCode Landing Page- We looked to re-purpose it while streamlining the user experience
Ideation:To gather information, we navigated the Github repo to test for the functionality of our ideas; whether they had been thought of or attempted already or if there was any other salient functional improvement we could look towards. and managed to communicate with the client's development team about issues regarding the website site infrastructure.
Upon gathering this information, we set out to streamline the content on this website, make it a one-step process to sign up, and highlight the client's features to suit potential partners. We set out with the initial goal of "visualizing what OperationCode enables the potential user to do", and decided to direct our changes towards OperationCode's audiences: Military, Partner Companies, and Mentors.
Design Process: With the goal of streamlining and visualizing in mind, we started drafting changes that featured these objectives:
Re-organize the information hierarchy and highlight key information first
Craft the feature layout to enhance the user acquisition flow
Move the input form above the fold
Incorporate a step-by-step flowchart illustrating the sign-up process to the user
click to open each image in a lightbox
Wireframes: We used Balsamiq to prepare comprehensive screens for preliminary feedback from the OperationCode CEO and Staff. Our new landing page had a form above the fold, followed by a brief "About" video, a Process Flow Chart, and a "Success Stories" section to help members of our audience relate to the service.
Initial Feedback: At the time of our presentation, the Membership Process flow-chart was our most well-received feature. We were told to reconsider our choice of call-to-action words for the navigation bar, and to think of other ways to get our audience members to relate to OperationCode.
Iteration: After the initial presentation, we entered the iterative loop of making small changes to the UI and IA and receiving feedback from our Client. We decided to re-assign the pages according to the new hierarchy we made, highlighting Code Schools as an integral part of the solution that OperationCode provides.
Code Schools are what OperationCode connects the user to. Operation Code functions as a resource and community for the User as they progress through Code Schools and subsequently jump-start their new careers. As this aspect was missing in the old page, we found that the "Code Schools" page was a key answer to the "How?" of OperationCode's service toward the user.
Design Solution:
Our new website design had a simple approach, aimed at removing the information overload of the previous landing page. We kept the form above the fold and removed the dropdown menus in the old navigation bar in favor of three sections: About, Donate, and Join. We diluted all of OperationCode's inspiring, but redundant (and long) banner quotes and summarized them into one opening statement.
Following the fold, we opted to replace the video section in favor of the "What We Do" section, which we found better illustrates OperationCode's purpose and functionality, while sparing the user's attention span. We then illustrated the next steps, taking the user through the Membership process and giving them the opportunity to see what happens as soon as they get started.
The "Who we are" page revealed the audience, matching with the marketing to make sure the right kind of web traffic is gathered. We then further reinforced Operation Code's credibility by following that up with a partners page. We made sure to add a Contact Button in this section so that potential partners and prospective associates can quickly connect with OperationCode and get involved on that front.
Finally, at the footer we placed the donate and join sections. These sections were at the bottom because we planned to make separate pages for these regardless, with links at the navigation bar. The landing page started off with opportunities to donate and/or join, so we thought it was best to reinforce the same message at the end of the User Flow.
Credits:
Design: Ronny Mitra, Carolina Andreoni
Development: David Roth
Marketing: Sunanda Narayan
Sales: Grant Monson