Examples of interface designs

Project overview:

GlockApps is a SaaS platform with tools to test and improve email deliverability and trustworthiness.

Challenge:

Redesign UX on the SaaS platform to improve usability and increase customer satisfaction. Create new UI for the product website and back office to improve brand consistency across products.

My Role:

User Research, Illustration & Branding, UX/UI Design


Collaborated with:
Project Manager, Developer, Copywriter


Apr 2021 - Sep 2021
Hide Process Details

Research Phase

1. Web Analytics

I used web analytic tools to collect website data and then process and analyze it to create an online strategy for improving the user experience. It's helped me better understand user behavior and find pain points with the user flow. Here are a couple of issues I can highlight:

  • The "Add domain" step is the first step for the DMARC analyzer setup. It was crucial to keep it simple and easy to understand. But unfortunately, in our case, that step was too complex, the helper text was not easy-to-read, and a call to action was unclear to the user.
  • Information architecture had no clear hierarchy for all of the products. It made it harder to gather information about them.
  • The visibility of the system status also was not clear.
Web analytics examples

2. Competitive Analysis

I did a general competitive analysis to research their different marketing strategies and compare their solution to our product solutions to identify our product strengths and weaknesses relative to each competitor. I also did additional research for a particular feature we implement, user needs, and business goals at that stage.
As I mentioned above, we had a screaming problem with the pages on the "Add Domain" flow. Hence, I conducted additional research to compare our existing solution with competitors' solutions.

Competitive Analysis examples

3. User Research

Web analytics was a perfect fundamental to conducting user interviews and usability testing I did. After the user research phase, I come up with a strong understanding of experience problems on the product.

User Research results examples

Information Architecture & Wireframing

After a deep research phase, I possess a strong understanding of the problems I have to solve. I start brainstorming about how to solve them. And at the end of this process, I have a user flow (see the example below) and a wireframe.

User Flow example

Visual Design

My goal was to redesign the whole application, which is a huge task. To manage the complexity, I split it into smaller chunks and created mockups step by step with a bunch of feedback sessions and testing. It helped me to come up with solutions that were simple, aesthetic, and easy to use. I paid a lot of attention to the pattern library because the consistency was extremely important in this case.

UI kit example
project examples

Conclusion

As a result, I redesigned dozens of screens in close collaboration with manager, copywriter, developer, business analyst, and other team members.
Regarding the "Add Domain" flow, we completely redesigned it. There are a couple of improvements I delivered:

  • Created "Gappy" character who is an email deliverability guide that helps users to set up the domain
  • Implemented a clear information hierarchy. Made the next steps easier to understand and use.
  • Created better copy for guidance and CTA text
  • Added links to the helping resources
  • Added breadcrumbs, back button, and so on for better user control and freedom, and visibility of the system status
  • Refreshed UI for a clearer and simpler design

It was the largest and the most complex project so far. And I learned a couple of great points while improving it:

  • Deep research is a fundamental part of your design cycle.
  • You can not "eat an elephant with one bite". Always divide large tasks into smaller chunks, and move one small step at a time.
  • The atomic pattern library is extremely important in large and complex projects.
  • And, of course, there are no problems that can not be solved even if it appears unsolvable looking on the facade of a large and complex product.
Lets work together Back to the Home

Visit GlockApps

project examples

Other Projects


other project

Furniture Store

View case study
other project

SaaS Education Platform

View case study

© Helen Vintoniak. All Rights Reserved.