NLSC

Project Background

The National Language Service Corps (NLSC) is a volunteer network of trained language speakers that assist in foreign and local affairs alongside the federal government. NLSC’s mission is to assemble a solidified cohort of proficient linguists to positively impact global communities. The scope of this effort involved having to rebrand the pre-existing layout of the NLSC homepage. 

This was my very first major project working in the field as a UI/UX practitioner. What originally started as a simple task of recreating a site, ended up eventually being a series of numerous iterations to ensure our deliverable was addressing the client and end user need. In addition to reformatting the NLSC home page, I was given an opportunity to work alongside developers and designers in order to implement a more intuitive application. It’s tough to cram 3 years worth of progression into a single page, however scroll to see some of the highlights! For more questions, check out: https://www.nlscorps.org/. 

Project Requirements

Below is a list of a few of our high priority development team action items. While this page is meant to focus more on the UI/UX design process, our team was given a range of tasks to address including the following:

  • Have database migrated over and set up in our development environment. Will / should be able to query the data and look for users and specific language competencies

  • Last minute style changes and mobile friendly capability. Soft date for deployment to test servers (ready for Booz Allen staff to use new NLSC site). This includes Web based inquiries, new member and partner signup

  • Continue testing and address any last minute development wishes from teams.

  • Build wireframes of site/critical paths

  • Design Landing Page

  • Design Interior timeline(s)

  • Validate/Test Desktop

Requirement Tracking

  • Sprint: A

    The overarching structure of this project gave me a chance to actively learn the importance of identifying core requirements and scheduling a timeline to address each task accordingly. At this stage; design, development, and requirements gathering teams needed to communicate an effective and realistic schedule.

  • Sprint: B

    Throughout the course of each sprint, each member of our team was tasked with providing daily updates on our respective progress. Working in an agile environment was helpful for adopting an incremental approach to tackling multiple design & development tasks. Each sprint concluded with a retrospective on strengths, weakness, and areas for improvement.

Lo-Fidelity Wireframe Phase

  • Concept A

    A key design task in the NLSC initiative involved having to recreate a members portal for incoming language speakers. Pen and paper is ordinarily my go-to before moving to the computer.

  • Concept B

    Having the chance to flesh out each idea from scratch made the overall development and design process much more seamless. Mapping each element out was crucial for staying on track.

  • Concept C

    An important aspect of wireframe building process included making sure that we were mapping out as many ideas as possible for what our end users would interact with.

Mockup Phase

  • Step 1

    After having a rough idea of a standardized UI concept, we were then able to move into creating a drafted prototype for the look and feel on the portal page.

  • Step 2

    Per agile methodology standards, this was an iterative process that required several white-boarding meetings and collaboration with stakeholders to ensure we were meeting the business need.

  • Step 3

    One of the greatest parts of moving into the digital stage of mockup building was the flexibility to test out the placement of different elements on the User Interface.

Progression

  • Start

    A quick use case for our development effort can be seen in the rebranded NLSC home page. Below is an image of the pre-existing site we were tasked with rebranding.

  • Mid-Point

    Through utilization of HTML, SCSS, jQuery, and bootstrap, we were able to implement an updated look and feel for the landing page user interface.

  • Redesign

    After weekly meetings with stakeholder teams and feedback synthesis, we looked to further improve the wholistic layout for the NLSC landing page.

Top Project Playlist:

Music has always been a helpful medium to keep me a bit more inspired and focused when working through the UI mockup and development stages. Feel free to check out some of the tracks that helped me through!