Customer Interface

Customer Interface

UI/UX • BRANDING • DATA VISUALIZATION • COPYWRITING • INFORMATION ARCHITECTURE

Though functional, the search system was not user-friendly or attractive. The new interface needed to be flexible and logically organize the dynamic journal information.

  • build a modern, single page application for dynamic journal searching.

  • integrate a new blacklist, user profiles, and account management system.

  • onboard new users and explain complex metrics.

  • match the updated branding of the website.

Old design

Once the brand identity was settled on and the website was designed, the next critical project was the customer interface. This is where the customer would spend all of their time so it was the most important part of my job. I was already working on the new journal cards for displaying the data, so the rest of the framework needed to be built. As with the other projects, I started with discussions about priorities and past complaints, then moved to UX user flows, sketching, then digital wireframes, mockups, and prototypes.

The old website, which acted as the search system, included an account management system that few used because of its poor functionality. My main goal was to create a new way to search and manage accounts.

Old search interface and account management elements

New personal profiles

The user account system would include administrator accounts for billing, user management for campuses, and viewing usage data. This would be built on top of a general user profile system that included individual accounts for saving lists and search settings.

The new login system ran into difficulty because of the way campuses distribute access to students. Students are only allowed to log in through public, on-campus computers. I wanted to make it as easy as possible for anyone to quickly log in and search without needing to verify campus IPs. I created designs for different types of accounts that would progressively allow more access based on the permission level. We created onboarding processes for administrators with new accounts. Once set up in our system, anyone who was on campus could quickly log in and search. If they wanted to save journals for future viewing, they could easily set up an account. All of the complex login issues, with IP and firewall complications, authentication, and security, would happen behind the scenes.

Personal profile mockups

The old website was weighed down by data and outdated methods of development. I introduced our team to more modern SPA frameworks (Angular in our case) that would load journals quickly without the need for reloading a page.

Subscription management

Even though we had an online payment system set up on our website, customers were used to making payments over the phone because of functionality issues and confusing invoices. I felt like this was a waste of time for our employees to handle manually so I designed a new online version. It would allow customers to track product subscriptions, view past invoices, save payment methods, and make payments.

Subscription management and billing mockups

Onboarding

Most users had no idea when the website was updated so I designed onboarding messages to display with each release of a new feature. I wish I had more time to work on these because I think they are critically important to how users are introduced to our product.

The search system layout was the hardest and most important part of the customer interface. There was such a wide range of ways customers used our product so it needed to be flexible and simple to use. Our engineering team is constantly finding ways to make it faster, but I was responsible for the underlying UX and UI. I created an onboarding method for quickly browsing journals by discipline instead of being thrown into the complete list of journals. This preference could be saved for future searches with a user profile.

New feature and search setting help screens

New search system

The main search bar would be the universal and flexible way to search for journals, with dynamic results being separated and previewed by category in the dropdown window. We replaced the advanced search popup I originally designed with a set of filters and sorting system that would update the list immediately. I also created a feature for comparing journals next to each other. Customers could now find a journal by any method they chose, whether they browsed or knew exactly what they were looking for.

Search UI wireframes and mockups

Related Projects

2019-08-17T20:55:34-06:00