UI Design
CSS
Usability Testing
Figma
Squarespace
May - July 2025
Designing for UDIL's Website
Design/redesign five of UDIL's free resource pages
Create two new webpages for UDIL's in-person and online services
View Design Results
August 2025
Auditing UDIL's Digital Platform
Evaluate the user experience of UDIL's online service packages
Provide design, content, and user flow recommendations
View Audit Stage
UI Design
May-July 2025
Skip to Results
My Process
While creating UDIL’s website, I aimed to ensure that every page was uniquely catered to its users, while maintaining UDIL’s branding and consistent comprehension of page content. My process and methodologies while designing are listed below.
Starting from Scratch
Limited options: On a website with resources as extensive as UDIL, using these templates could cause the website to seem repetitive and unfriendly. Many templates provided by Squarespace were catered towards categories such as testimonials and contact, and the majority of UDIL’s website is text-focused free resources.
Lack of Customization: Within pre-built Squarespace templates, elements such as margins and text padding cannot be customized. Even though Squarespace offers an easy-to-use grid format for their page elements, you cannot move elements within a page section.
Consistently Consistent
How I ensured aesthetic consistency across the website.
When users begin trusting UDIL's website and services, consistency is key- both with branding and design choices.
Making it Colorful
My color choices and usage across my UI Designs, and how I added a professional pop of color across UDIL's website.
Using the colors from UDIL's branding guidelines, I assigned defined use cases for each color.
Used to put emphasis on certain words/phrases or boost branding.
Slate Purple
Used for warnings or especially important notes that the user would otherwise miss.
Dark Grey
Can be used as a card background to make certain sections stand out.
Colors of icons are generally always the same color as the text to create a sense of unity with the text.
Symbols & Icons
The creation of icons, symbols, and images in my UI designs on Squarespace.
When users begin trusting UDIL's website and services, consistency is key- both with branding and design choices.
My Designs
In this section, I will cover the highlights from my UI designs in Squarespace. This will be split into two main sections:
Service Pages: Webpages for the user to gain an understanding of UDIL's services and how to purchase them.
Resource Pages: Information-focused resource pages that are completely free to users, even if they have not purchased a UDIL service.
Service Pages
Clinic Page
In addition to fully online services, UDIL offers in-person clinics for self-representing litigants dealing Domestic Violence Restraining Order cases. I designed this page to highlight the features that this clinic offers as well as present information relating to clinic type and pricing.
Services Page - Additions
I optimized the service page created during my experience working with UDIL duiring the Spring 2025 semester (Purdue UXD x UDIL) to include information about UDIL's online service packages. This page was split into two main sections, which are the online services section and the in-person clinic section.
Resource Pages
One of UDIL's company goals is to provide free resource pages for users visiting their site. However, creating these resource pages came with challenges. Squarespace has pre-made layouts built for short and simple portfolios and service branding- but the lack of symbol and line element support makes it difficult to create a long-text focused page like the resources page that UDIL wants to provide to their users.
To solve this, I created design elements on platforms such as Figma or Canva then imported them into Squarespace. By doing this, I was able to build resource pages that were designed for long-term comprehension.
Click through the slideshow to see components of the resource pages.
Evaluation of Online Packages
August 2025
After implementing UI Design changes in UDIL's website from May-July, I was tasked with evaluating their online services. These services are split up into five domestic violence restraining order packages, and the user purchases the package that most closely aligns with their legal situation. In these packages, users can fill out important court forms, learn how to present themselves in court, and become familiar with useful resources.
My process for evaluating UDIL's service packages is as follows:
Chronological evalution: Evaluated the demo interview package, then packages 1-5. Each package relies on conditional logic to provide a personalized experience to the user, so I oversaw 10+ logic routes to see all possible outcomes.
Usability Heuristics: Used Neilsen's 10 Usability Heuristics (linked here) to identify painpoints and beneficial features in the program. I labeled the severity of the heuristic violation by color.
Table format: Used a table format to organize components of each violation with the use case/user, the package number, a screenshot of the violation, issue(s), and recommendation(s).
Immediate feedback: I consistently shared my progress with the company, and sent immediate updates for non-functioning components.
I recorded my evaluation findings in a Figma whiteboard, as shown below.
Findings
Categorizing my findings into Nielsen's 10 Usability Heuristics, listed below are the main areas for improvement and recommendations across the service packages.
1. Visibility of System Status
Are users given appropriate feedback?
The user should always know how far they have progressed in the service. Ensure that the progress section is responsive across all packages.
2. Match Between System and the Real World
Are concepts and phrases familiar to the user?
Avoid ambiguous wording
UDIL names their individual services as "interviews." As interviews frequently mean talking with a person, I would clarify the use of this term to the user.
3. User Control and Freedom
Do users have full control over their decisions?
Users can not return to previous sections to review important details without erasing their progress. Include this information as a resource elsewhere.
Some conditional logic pathways take the user to an incorrect ending- fix these pathways to be responsive to the user's input.
4. Consistency and Standards
Are industry and general procedural standards followed?
Text and checkboxes should be left aligned whenever possible to enhance comprehension.
The section list is unbolded text with a bright blue color. This looks like a link, but is unclickable. Change to grey or purple text.
5. Error Prevention
Are users guided in a way as to not make errors?
Autofilled dates for calendar selection can cause confusion. Lead the user to choose the date instead.
Users are still given the option to print out their forms even if their situation does not require them. If the user does not and should not print out forms, remove the option.
6. Recognition Rather than Recall
Is information visible and easily retrievable?
Some legal wording is explained once then used throughout the service. Providing reminders through tooltips of these terms can be useful.
All typos found through this analysis should be fixed before product launch.
7. Flexibility and Efficiency in Use
Are options and functions easy to use?
On dark mode browsers, some buttons are completely invisible. Fix this so that button color is not dependent on browser settings.
8. Aesthetic and Minimalist Design
Do the visual elements support the user's primary goals?
Sections of the service that the user has already completed are highlighted yellow. Yellow can mean warning or error- change the yellow highlight to a neutral color.
9. Error Recovery & Diagnosis
Are users able to recognize and recover from errors?
Some error messages run over the text box and could not fully be seen. Shorten error messages to no more than a sentence or two.
10. Help and Documentation
Does the user flow require additional explanation to be used?
There is a demo service before the user completes their court forms digitally. Colors used in this demo interviews for buttons and other features should be consistent across the main online services.
These ten heuristic categories were referenced from the Nielsen Norman Group, and can be found here: https://www.nngroup.com/articles/ten-usability-heuristics/
Takeaways
Reflection:
This internship was a spectacular experience to expand on my professional development as a UX Designer through web design, feedback testing, and dedicated communication with the company team. Thank you to Kelly Crabtree for the feedback, guidance, and encouragement on my work throughout.
For my future projects, I aim to improve my familiarity with in-depth user research and analytical processes. In the Fall 2025 and Spring 2026 semesters, I will be taking classes and working on personal projects relating to human-centered systems thinking and studying user decisions.
What I learned:
Communication is key.
Especially during a remote position, consistent updates and collaboration with the company can ensure that the goals of both the designer and stakeholders are met.
Design is not a linear road.
Whether I'm creating a website, a feature, or thinking of improvements for a service, you can't have design without iteration. This allows for components to be fully researched and tested before implemented.
Don't be afraid to exceed expectations.
During this internship, I took in this company's goals as my own- to help self-representing litigants confidently navigate their legal journeys- and created UX solutions around this. A little extra time in planning and iteration can go a long way.
Back to Top
Connect with me
