UX/UI Design | August, 2021

CAD Enterprise — Premise Utility

Feature Design

Case Study

My Role
UX/UI Designer, User Research, Usability Testing, Wireframing, Prototyping
Tools
Figma, Cacoo, MS Word
Timeframe
8 Weeks

Problem

Current users reported usability issues when using the Premise Utility feature in the CAD Enterprise product such as adding a master premise location without looking at a map, adding sub premises, searching the map for existing locations and adding premises that differ from the routable location.

Solution

Update and modify the user experience of the existing map utility while incorporating ArcGIS functionality.
The client approached me with the understanding that their website, while useful, was outdated and in need of a refreshed look. They were adamant about keeping some aspects of the original design - like the rainbow logo their schools had become known for - but they were very much open to other new ideas.

After a client kickoff meeting, I began by conducting user testing on the existing site before starting any redesign work. The objectives of the tests were to determine how effectively the current website communicated the school's quality, cost, and location information. The results of the user tests were:
Overall Impressions:
  • School seems high quality (name implies quality)
  • The schools have history - est. 1976
  • Intention of the site was obvious - student enrollment
  • School location and fees were easy to find from the main navigation menu
  • Testers liked the slideshow images
Pain Points:
  • Too much text
  • Dropdown navigation is buggy
  • Clicking a nav link should take them somewhere
  • Unsure about some of the enrollment requirements - e.g. state age info
  • Wanted more detail about teachers
  • Improve design of the pricing page

Logo Development:
While the client wanted to keep their rainbow logo, they didn't have a version in vector format. So they asked me to redraw a vector version of the logo using the existing PNG. The only logo version of the logo they had was in the header of their current website:
I took a screenshot and imported the low-resolution logo into Illustrator and began the process of reproducing it - as I've done for several clients in the past.
With both graphic elements reproduced in vector format, I used the font 'Candara' for the school name and locations as it was similar to the original font. I created a stacked logo for use on the website homepage and horizontal layout for the sticky menu.
final logo:
Mockup Development:
With the final logo complete and approved by the client, I began to design the webpage mockups in Adobe XD. The client's direction and requirements regarding the style of the new website included:
  • Trustworthy / homey feel
  • Emphasize child/teacher environment
  • Highlight accreditation and their commitment to higher standards and quality
  • Incorporate the rainbow colors throughout the site design
Initial Homepage Mockup:
The client wanted to focus on each of the four schools, so the homepage featured a photo of the school, the address, a small snippet about the ages it serves, and a link to more details.

The redesign for the schools detail pages included adding an area to introduce the school Director with their name, a photo, and direct contact information to add some personality to the once sterile site.
Updated Redesign
Original Design
Another problem for the client prior to the redesign was routing emails meant for each school as they were all sent to one email address.

My solution included adding an email form on each school detail page sent to the specific school's Director and creating specific tabs on the contact page form so users could select which school to send an email to:

Conclusion

It's always a great feeling when you can help a small business communicate their story, value and trustworthiness to their customers. The clients loved the new design of their website, how it clearly explained the benefits they provide and how it resolved the user pain points identified in the testing - we reduced the amount of text, added more detail about the teachers and their credentials, and cleaned up the navigation.

I was also able to streamline some of the school's internal processes by filtering incoming email to specific recipient's based on which school the user was interested in.