TEAM
Project Lead: Dillon Scott
Developers: Nicholas Mamisashvili, Devashish Sood, Venkat Pamulapati, Connie Liu, Iman Moreira
Designers: Amaan Shahpurwala, Christine Cho
Developers: Nicholas Mamisashvili, Devashish Sood, Venkat Pamulapati, Connie Liu, Iman Moreira
Designers: Amaan Shahpurwala, Christine Cho
THE PROBLEM
Receiving the task, we were introduced to a web form application called EduLaw. Its purpose was to increase accessibility to submitting legal documents regarding education.
Its purpose was to enable students and parents in the state of Massachusetts to report violations of educational rights to the appropriate government offices. Was to Allow users to easily file legally worded complaints with the Mass DOE
Parents and students who wanted to file lawsuits(?) and report against educational legal issues(? i.e. bullying, plagiarism) had to go through filling out a document
we were given initial designs from the client, and were assigned(?) the redesign of the ui. The screens did not seem awful(?) (glaringly inaccessible, especially as it was just a form) but there were some significant changes that we had to implement/issues(?) matters(?) that had to be addressed.
Receiving the task, we were introduced to a web form application called EduLaw. Its purpose was to increase accessibility to submitting legal documents regarding education.
Its purpose was to enable students and parents in the state of Massachusetts to report violations of educational rights to the appropriate government offices. Was to Allow users to easily file legally worded complaints with the Mass DOE
Parents and students who wanted to file lawsuits(?) and report against educational legal issues(? i.e. bullying, plagiarism) had to go through filling out a document
we were given initial designs from the client, and were assigned(?) the redesign of the ui. The screens did not seem awful(?) (glaringly inaccessible, especially as it was just a form) but there were some significant changes that we had to implement/issues(?) matters(?) that had to be addressed.
- No brand identity, slightly tacky interface
- Disorganized navigation
- very (oversized) awkward visual design
- only accessible through laptop
- specific issues with the login page
- the progress bar, accessibility for the viewer to understand how much of the form they filled out (how much information the audience has access to)
TARGET AUDIENCE
Our target audience was parents and students, especially those who were not knowledgeable in the area of law.
We had to make sure the information we presented was formal yet approachable to address the topic appropriately.
Our target audience was parents and students, especially those who were not knowledgeable in the area of law.
We had to make sure the information we presented was formal yet approachable to address the topic appropriately.
LOFI WIREFRAMING
Most of the placement of content was made in reference to the original screens.
One of the main issues we tried to solve was the disorganized navigation. Many of the sections on the side navigation was interchangeable, and they made understanding the intstructions difficult. The top navigation on the side was used to navigate between the form question categories, and the bottom navigation was
We identified two main types of content on the website: the general information of the form and form questions. Then the questions were also divided into two categories: the responsive content, and the static (instructions and additional information per question).
Starting with the lo-fis, we initially decided that we move the side nav bar to the left side, and rearranged the rest of the content accordingly.
wireframing the general placement of all the content was relatively easy, as we had the initial screens that we could use. As it was a form, we resorted to simple question and short text boxes.
We blocked out the slight rearrangements of the components, especially using correct sizing this time. I learned the important and significance of proper sizing on websites through this project. By conducting quick research on the used font sizes for websites like Google, Dribble, Curology, I was able to find the commonly used font size.
Another big change was the navigation bar: we moved it to the other side, considering the common orientations in varying websites, and also considering the user’s direction of sight when filling out the form.
Most of the placement of content was made in reference to the original screens.
One of the main issues we tried to solve was the disorganized navigation. Many of the sections on the side navigation was interchangeable, and they made understanding the intstructions difficult. The top navigation on the side was used to navigate between the form question categories, and the bottom navigation was
We identified two main types of content on the website: the general information of the form and form questions. Then the questions were also divided into two categories: the responsive content, and the static (instructions and additional information per question).
Starting with the lo-fis, we initially decided that we move the side nav bar to the left side, and rearranged the rest of the content accordingly.
wireframing the general placement of all the content was relatively easy, as we had the initial screens that we could use. As it was a form, we resorted to simple question and short text boxes.
We blocked out the slight rearrangements of the components, especially using correct sizing this time. I learned the important and significance of proper sizing on websites through this project. By conducting quick research on the used font sizes for websites like Google, Dribble, Curology, I was able to find the commonly used font size.
Another big change was the navigation bar: we moved it to the other side, considering the common orientations in varying websites, and also considering the user’s direction of sight when filling out the form.
SCREEN ITERATIONS: SUSPENSION NOTICE
Some of the initial changes we made to screens consisted of resizing and organizing the content on the page.
1. Navigation bar
2. Top banner
3. Content, text
4. cComponents (progress bar, buttons)
Through designing these screens I learned the importance of font sizing and screen sizes
Some of the initial changes we made to screens consisted of resizing and organizing the content on the page.
1. Navigation bar
2. Top banner
3. Content, text
4. cComponents (progress bar, buttons)
Through designing these screens I learned the importance of font sizing and screen sizes
SCREEN ITERATIONS: ADDITIONAL INFO
The iterations on the side shows the process of changes that were made. Once receiving the client’s screen designs, we transferred the information onto low fidelity frames, which we continued to iterate and resolve any sizing and organization conflicts, then carried out onto high fidelity frames.
Translating the low fidelity onto high fidelity frames took the process of implementing the new brand and color identity onto the interface.
By conducting research on what the trending styles were, we designed the nav bar accordingly, with a rounded and modern design.
The iterations on the side shows the process of changes that were made. Once receiving the client’s screen designs, we transferred the information onto low fidelity frames, which we continued to iterate and resolve any sizing and organization conflicts, then carried out onto high fidelity frames.
Translating the low fidelity onto high fidelity frames took the process of implementing the new brand and color identity onto the interface.
By conducting research on what the trending styles were, we designed the nav bar accordingly, with a rounded and modern design.
DESIGN SYSTEM
COLOR SCHEME
In addition to the changed orientation of the components of the website, we also made a brand identity to use for the website. Using the preexisting logo for Edulaw, we utilized the green and blue color scheme to find the two main colors. We made adjustments accordingly to make the colors compliant with the readability and each other
esigned screens for laptop, screen mobile. in addition to any missing screens
COLOR SCHEME
In addition to the changed orientation of the components of the website, we also made a brand identity to use for the website. Using the preexisting logo for Edulaw, we utilized the green and blue color scheme to find the two main colors. We made adjustments accordingly to make the colors compliant with the readability and each other
esigned screens for laptop, screen mobile. in addition to any missing screens
TEXT STYLES
After going through several typefaces, we decided on the font family Noto Sans. We created a text hierarchy with Noto Sans.
It kept a clean aesthetic to the application without seeming too stylistic, and allowing the text to be easily legible.
Additionally, to create unity across the entire app, we used a single typeface and used varying font variations to create the hierarchy.
After going through several typefaces, we decided on the font family Noto Sans. We created a text hierarchy with Noto Sans.
It kept a clean aesthetic to the application without seeming too stylistic, and allowing the text to be easily legible.
Additionally, to create unity across the entire app, we used a single typeface and used varying font variations to create the hierarchy.
FINAL APPLICATION
The final app required making all of the potential sceens. Luckily most of the screens conveyed similar information, and allowed for the design to be unified across all pages.
The final app required making all of the potential sceens. Luckily most of the screens conveyed similar information, and allowed for the design to be unified across all pages.
FINAL SCREENS: CONCERNS
For better accessibility, we designed the final screens for all screen sizes, and made respective changes to each screen size.
Having to include the main components:
The possible orientations per screen sizes varied, and one of the biggest variation was the location of the navigation bar. As it had to be accessible to parents and students, we had to make sure it would be able to accomodate for the devices they would be likely to use. We kept it on the side for the laptop screen, and kept the continuity on a tablet, and moved it to the top for a phone. Keeping the naviagation bar on the side for wider screens like the laptop and tablet allowed for more even distribution of content on the screen, and prevented there being too much white space. On the other hand, because a phone screen was so small, it was more convenient to have the navigation as a dropdown from the top, and have the user experience the content of the page and navigation separately.
For better accessibility, we designed the final screens for all screen sizes, and made respective changes to each screen size.
Having to include the main components:
- Website banner
- Side navigation bar
- Bottom navigation button
- The page content
The possible orientations per screen sizes varied, and one of the biggest variation was the location of the navigation bar. As it had to be accessible to parents and students, we had to make sure it would be able to accomodate for the devices they would be likely to use. We kept it on the side for the laptop screen, and kept the continuity on a tablet, and moved it to the top for a phone. Keeping the naviagation bar on the side for wider screens like the laptop and tablet allowed for more even distribution of content on the screen, and prevented there being too much white space. On the other hand, because a phone screen was so small, it was more convenient to have the navigation as a dropdown from the top, and have the user experience the content of the page and navigation separately.
