Piivately

Designing a marketing site for a Saas platform.

Piivately is a cybersecurity startup grounded in the conviction that businesses bear the responsibility of safeguarding their customers' personal identifying information. The founders engaged my team to develop an outward-facing marketing website aimed at elucidating to B2B clients the critical significance of preserving their company's data integrity.

Roles: Designer, Researcher

Duration: March 2022 - April 2022

Strategy

Annotated Wireframes

In order to convey the final concept, findings, and recommendations to Piivately stakeholders, I developed annotated wireframes of the essential screens from the prototype (a selection of which is illustrated below). Additionally, I collaborated with our lead researcher to outline methodologies, emphasize significant user quotes and insights, and envision next steps, all of which were presented in the final report.

Process

  • Researched user expectations for a B2B software website and formulated the information architecture.

  • Crafted pivotal pages for the website and assessed a desktop prototype, adhering to a style guide.

  • Oversaw internal team communications, assigned roles, and spearheaded external communications with stakeholders.

Business context

Since 2018, data security breaches in the US have doubled annually, with customers' personal identifying information being the primary target. Piivately provides a solution aimed at assisting businesses in safeguarding their customers' data and preserving their reputations. The founders enlisted my team to develop an informative website to be externally facing, emphasizing trust and security. The website's purpose is to enable B2B clients to swiftly grasp the importance of protecting their company's data.

Stakeholder focus areas

  • Target market- executives at small to midsize companies and late-stage start-ups

  • Understandable- Users quickly understand the importance of the software for their customers

  • Media- Include a variety of media types (graphics, video, text) throughout the site

  • Trust & Security- Users should be able to quickly understand why it is important to keep their company’s data safe, as well as how PIIvately’s software benefits their business

  • Aesthetics- Design should be dark background with bright accent colors

Mapping

I led my team in conducting desirability tests with primary users, specifically mid-stage start-up executives, to gain insights into their preferences and dislikes regarding competitor websites. In this capacity, I moderated the interviews and synthesized the resulting data.

I also conducted a card sort to understand where users would expect to find key information on a software’s customer-facing website.

Using this information, I created a sitemap for the PIIvately site.

Customer Journey

Leveraging data obtained from desirability tests, we crafted a user persona and mapped the existing journey by identifying actions and areas ripe for improvement, alongside mapping out a projected future journey.

Wireframing

I created sketches of several pivotal screens aligned with the project's objectives and shared them with my team. Once key designs were selected for implementation, and I collaborated with a graphic designer to develop high-fidelity wireframes for these key screens. After incorporating interactions into the prototype, I conducted usability tests with primary users to gather feedback and insights.

Asses

Final Thoughts

Low Fidelity Wireframes

User feedback

As demonstrated by the accompanying quotes, users had a some feedback about the site that informed the final version of the prototype that we delivered to the client.

  1. Testimonials are valuable for trust, and users wanted to see them higher up on the home screen.

  2. Users want more visible contact info, such as a chat bot.

  3. Users want to see pricing upfront, or at least the comparison between having PIIvately versus not.

  4. Users want to see a demo and/or more detailed case study to further understand why they need the product.

Takeaways

  • Ensuring accessibility is paramount. We collaborated with stakeholders to guarantee clear color contrast and button affordances, while also ensuring screen-reader compatibility for the website.

  • When tackling complex subjects, thorough information gathering and ongoing inquiry with stakeholders are essential practices.

  • Effective teamwork thrives on clarity of roles and continuous communication. As a leader, I prioritize maintaining open lines of communication to foster cohesion and alignment.

  • Operating within a style guide alongside fellow designers promotes consistency and transparency throughout the team's efforts.

Goal Statement

“When executives at start-ups and small businesses visit PIIvately’s website, they want to quickly find key information and feel the software is trustworthy and secure, so that they can make an informed decision about what cybersecurity software to purchase.”

Execute

Creating a style guide

In order to ensure the team used consistent design elements, a style guide was created and implemented. I selected colors and typography based on user research and stakeholder input.

“I like how it looks aesthetically. There’s not too much scrolling. It is data focused and urgency and credibility is conveyed.”

— User 1

“I appreciate the concept of [the case study], I would want to see just a few more reasons why I need that product.”

— User 2

Next steps

  • Create a high-fidelity, animated version of the informational video

  • Add case studies to the site once the product has been implemented with a customer

  • Add pricing to the site, or a net cost of having PIIvately vs. not

  • Conduct A/B tests on CTA button verbiage to learn what drives the most leads

High Fidelity Wireframes

Previous
Previous

UHG

Next
Next

Nickelodeon Universe