Customer Success Microsite

Browser window frames with 6 webpages stack on top of each other.

Company

Technology & Services Industry Association (TSIA)

Duration

5 Months

Team

Head of Digital Marketing
Senior Project Manager
UI/UX Designer
Senior Full Stack Developer

My Role

UI/UX Designer

Tools

Figma
Builder.io
Photoshop
Illustrator

Background

As a UI/UX Designer at TSIA, I created a microsite for the Marketing Department to better serve their customer success base. We also utilized this project to explore and implement a new visual direction and to experiment with a newer technology stack.

Problem

The marketing department required an environment where they could share their value only with prospects who are interested in customer success.

Solution

This microsite was designed as an experience tailored specifically for prospects who are interested in customer success. I successfully brought this concept from development to launch, in time for their next conference cycle.

Discovery Insights

After the kick-off meeting, I started the process by conducting research on user interfaces. I aimed to answer questions such as, "What are the common patterns for sub-pages that differ from homepages?" and "How do other companies represent customer success?"

My findings revealed that:

  • Homepage sections tend to have unique variations.
  • Some sub-page hero sections have contrasting contrasts compared to the homepage.
  • The positioning of social proof logos varies.
  • Text and images placed side by side is a common occurrence in both homepages and sub-pages.

Wireframes

During the wireframing stage, the team wanted a spacious design for the content. I supported this vision as a visually spacious page not only enhances aesthetics, but also improves accessibility. By utilizing clear and concise copy and strategically placing design elements, we were able to effectively communicate the message while reducing cognitive strain. When building the wireframe, I planned for the placement of copy and incorporated contrasting elements for optimal color contrast. The code structure was also taken into consideration in the annotations to support search engine optimization efforts.

screenshot of figma wireframes

UI Design

Constructing the user interface need a deep understanding of the new technology stack. Our objective was to utilize as many widgets from Builder.io as possible, with minimal custom coding and dependence on developer support. To gain this understanding, I carried out a small test project in Builder.io, which gave me a clear picture of the design possibilities. In addition to understanding the tech stack, we aimed to explore a fresh brand direction. In close collaboration with the Senior UX Designer and Researcher, I interpreted and integrated their new style from other projects into the microsite design. Armed with this information, I was able to develop mockups for all six pages.

screenshot of figma mockups

Development

After obtaining final approval from all stakeholders, I utilized Builder.io to build the website. This tool proved to be a valuable asset in the construction process, allowing for quick and efficient development of the user interface. With my knowledge of HTML and CSS, I was able to construct the design nearly identical to the mockups within Builder.io alone. The Senior Full Stack Developer supported me by setting up Builder.io for use and writing bits of JavaScript for the front-end where necessary.

Conclusion

The microsite project for the Marketing Department at TSIA was a successful effort in creating an environment for prospects interested in customer success. The design process helped us meet business needs while also considering accessibility and brand direction. From conducting discovery and wireframing to building the user interface, I was able to bring the project from concept to launch in time for the next conference cycle. By utilizing clear and concise copy, strategically placing design elements, and incorporating a fresh brand direction, the microsite effectively communicated its message while reducing cognitive strain. This project is currently being measured and the data will be used to inform us on the success of our direction.

Reflection

The project was rewarding as it involved developing and experimenting with a new brand direction, based on in progress research from the Senior UX Designer and Researcher. I successfully interpreted and integrated the new style into the design of the microsite while incorporating my own touch in certain areas. This experimentation helped advance the brand towards a more polished direction and pushed me to grow as a designer.

Back to home