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.
Testimonials are valuable for trust, and users wanted to see them higher up on the home screen.
Users want more visible contact info, such as a chat bot.
Users want to see pricing upfront, or at least the comparison between having PIIvately versus not.
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