The AID Project
What It Was
The AID Project was the culminating project of the
Cleveland Codes Bootcamp cohort of 2020, intended to be a real online repository that immigration lawyers could use to help provide evidence for the cases of their clients who were in the process of immigrating to or seeking asylum in the US.
It was an ASP.NET web app that stored its documents in a database that could be searched on the site by country or issue. Using Visual Studio as our IDE, under the leadership of our instructor 6 other students and I built the app using C#, built and migrated databases using SQL, and created the front end of the site using CSS and simple javascript. The copy was provided by an actual immigration lawyer and the project was intended to launch on a website owned by a non-profit organization that specialized in providing support for immigrant asylum seekers.
Unfortunately, due to the onset of the coronavirus at the time, the project was not able to be finished.
My Role
I was responsible for designing the identity and the overall front end of the web app. During meetings with the instructor and my peers, we determined the information architecture of the web app, and its features, and created low-fidelity wireframes of what pages would look like. I made bootrap mockups of some of the UI elements I designed to be implemented by other person responsible for the front end to be seen in action by the others on our team that were doing other forms of programming.
You’ll see here the mockups that I made that were intended to be used on the app. Some of the mockups include annotations to explain the envisioned functionality of the elements.
Logos
(Simple)
(Extended)
Low Fidelity Wireframes
During a work session with the other members of the group, we identified some of the core pieces of functionality of the web app and I created quick mock-ups that the team confirmed as I was working.
These wireframes provided the development team with the visual reference needed to properly situate the features they were working on within the HTML. Naturally, as we worked on the project, some features ended up being scaled down, reconsidered, added, or eliminated altogether. So what’s seen in the wireframes may not be a 1:1 represented in the mockups.
High Fidelity Mockups
When the development team got some of the basic structures of the app features in place, it was now time to think about how exactly what the web app would look like.
I designed all the mockups below and worked with the other designer on the team to figure out how to implement some of them in Bootstrap before the project ended. I made some HTML mockups of some layouts using Bootstrap so that the developers on the team could tie the visual elements with the C# objects and seed data that the search results would be tied to.
Notes are included with the mockups to explain the rationale behind certain features and how they were intended to work.
