Contact us

Any questions, tips? Anything else?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
UX Design

Revamping our Company Page on Siftery

A Brief Overview

Siftery is a startup that enables people to share products they use at work, and explore what others are using. At the core of our product, we're trying to provide meaningful recommendations to people who need to use better software. I'm very passionate about our mission at Siftery, which is why I'm excited to show how I'm constantly trying to improve it.

Problem

Our users are not finding the Analyze Page from the company page.
We aren't pleasing our Visitors with a login wall on the Company Page
The Analyze Page isn't converting our users as much as it could be. 
We aren't walking the user through well enough from Point A to Point B.
Adding products feels like work, there's no back and forth engagement. The process of adding products should be fun.
We aren't showing personalization to these recommendations.

Goal

How do we personalize the Company Page?
How do we convert as many users as possible into Analyzing their stack?
How do we walk the user through the Company Page, to Analyze, then have them provide us with data on their stack.
If we can get this data, then we'll be able to generate recommendations, statistics, similarities with much more powerful insight.
This is very challenging since we're literally asking our users to give us data.

Role

I led the design of this product, and was responsible for the general user experience, visual, motion, and interaction design. Over the course of 3 weeks, I collaborated with our Engineers, Front End Developers, Growth Team, and CEO on this project.

Step 1 - Who are we designing this for?

When I joined Siftery, the Company Page was the first part of our product I designed. We were structured primarily Agile at the time. After launch, I was able to furthermore research user needs. I found that we're attracting CEO's, Stakeholders, and PM's (from both large and smaller companies). Design became the main focus, and now our process is fused with Agile, Lean and Design Thinking. We're trying to design this primarily for our users in SF and Silicon Valley.

Step 2 - A deeper look into the problem from Formal Research, Inspectlet, Google Analytics


Less than 10% of our users are hitting the Analyze Page from the Company Page.
Less than 10% Visitors are converting from the login wall on the Company Page.
Visitors who convert into users aren't finding the Analyze Page.
Users who reach Analyze Page are mostly bouncing.
Users told us they don't feel comfortable providing us with their data.

These were some of the biggest issues we've found:
1. When the users are looking at recommendations where do we take them next? There isn’t an indication of a next step. We aren’t walking them through here.
2. How do we make it so users don't click on “See Recommendations” right away? While this may be their ideal use case.
4. How does a user navigate back and forth from Recommendations and the Analyze Page?
5. What are some additional details of their stack we can give to the users?
6. How do we provide cutting edge, personalized stack conditions?

Step 3 - Sitemapping setting up goals

I created a sitemap to establish stakeholder and user goals. Along with user flowcharts to map out the complexity of the interaction design. Referring back to research, I was able to pinpoint some goals to measure.

Are we increasing the rate from the Analyze Page to the Recommendations Page?
Are more users adding products on the Analyze Page?
How often are people clicking to find out more about these recommendations?
How many people are clicking on "See Recommendations" when they first hit the Analyze Page?
How many people are clicking on the “I’d use this” button on hover?




Step 4 - Prioritizing Problems

I met with the CEO and put all of our problems on sticky notes to measure the priorities of these problems. This method helps me find the balance between the stakeholder and user needs.

This part of the process enables us to define the biggest problems, and also helps with my time management for these problems. After this part of the process I'm able to deliver reasonable deadlines.

I knew the problem we were solving very well at this point, and had come up with some initial sketches on how the user flow would be redesigned. Knowing the boundaries and cost of development time in a startup is very useful as we are very lean on resources.


Step 5 - Building Trust and How to Convert (Progressive Disclosure Map)

The biggest challenge presented to us was, how do we convert our users? I decided this was the best solution to solving this problem at the time because, we need our users to trust us, and give us data. We also need them to come from Point A to D to reach the recommendations page. This is where I came up with Teaser Recommendations. Where we could show these people snippets of products that are being recommended to them. It's very challenging to overwhelm our current Company Page, since there's lots of information there.The Progressive Disclosure Map is also very useful in cases where the user has to navigate through lots of nested pages.

Challenges:

How do we Progressively disclose information to our Company Page Admin users?
How do we enable them to trust us in giving information?
How do we convert them to give us data?

Step 6 - Whiteboarding, Flows, Sketches,

Then I started sketching different solutions, and only came up with a nice layout from this. The solution from these sketches is "engagement." A keyword I had to place a high priority in this product while sketching illustrations. I wanted to sketch a layout, that could consistently speak to our user, as they are adding products, viewing recommendations, and starting the process from scratch.


Solution: Prototype 1

We ditched the login wall, and created what I call the "Hero" Card. The hero card was designed to eliminate our login wall, and to stand out visually, and communicate to our visitors.


Solution: Prototype 2

Analyze My Stack CTA is placed at the very top of the users stack list. This way they'll see this CTA every time they hit their company page.

Solution: Prototype 3

When the User clicks on the Analyze my Stack CTA, they're introduced to this here.
The left panel is used as an Onboarding SVG animation.

Solution: Prototype 4

The left panel is also used for engagement to walk our users through easier.

Solution: Prototype 5

Engagement is used here to tell the user how they're doing while adding products.

Stay tuned for more!

Written by
James Donovan
View all my posts →

Discover more stories

No items found.