SyncFab 3.0- Designing for Blockchain

Sharon Wang
Feb 23, 2018 · 7 min read

Role: Designer & UX Researcher
Team: 2 designers, 2 backend engineers

Visit SyncFab’s Blockchain Platform here.


SyncFab is a platform that connects designers to manufacturers, acting as a supply chain management tool to procure, track and organize local parts production.

Along with my CDO, CTO, and an intern, my job was to design a landing page and sign-up flow that would maximize the number of sign-ups for the MFG token sale- SyncFab’s own AltCoin. The sign-ups would ultimately lead to more investments in our company so that we could fund for the development of our blockchain site.


Users don’t know what SyncFab is- why should they want to invest in its cryptocurrency?

Cryptocurrency has gotten big recently, and a lot of companies out there are also trying to get people to invest in their own cryptocurrency. What sets us apart from these companies? SyncFab has been around since 2013, as the first online design-to-manufacture interactive supply chain ecosystem- it is established and already well-known in the manufacturing industry.


Design a landing page for that keeps the branding of the original platform and will garner attention for the launch of SyncFab’s blockchain site.

Exploring the Problem

User Research

We conducted user interviews by physically visiting manufacturers that we partnered with in San Leandro. We also conducted interviews with Cryptocurrency Investors and Hardware Innovators who were our regular customers.

Key Insights:

Market Research

Competitive Analysis:
Through, I was able to find a lot of other companies participating in AltCoin sales.

  1. Sense Decentralized messaging application that allows users to chat and transact freely. Pros: The token website shows users how well the token sale is currently doing. Cons: You have to do a bit of searching and reading to find out what Sense actually is.
  2. Babb Allows anyone worldwide to open a UK banking account as long as they have a smartphone. Pros: Really memorable landing page that makes use of animations and contrast.

Key Insights:

  1. People are quick to call out ICOs that they think are scams- ones that look unprofessional, have little information on their team, and don’t already have an existing platform.
  2. People want to see a brief and concise description of the company and its purpose, but they also want a detailed plan to be readily accessible.


Exploring How Might We’s


Present research findings, answer questions

Generate How Might We questions

Voting on a HMW to pursue

After generalizing our How Might We’s into affinity maps, we decided to focus on the “How Might We” question of

How Might We establish a sense of trust between our platform and investors?


Landing Page

We came up with a list for our feature space, and their hierarchical importance.

1) Header: We want the header to catch the user's attention. Something that draws a sense of urgency but is still professional. 2) Call-to-Action: This should be primary in the information hierarchy. Signing up should be the most easily accessible. 3) What is SyncFab? Quick description of company in header. Short and concise- people don't like to read. 4) Find out more: If people do like to read and want to find out more... Company docs- Whitepaper, One-pager, Presentation. What sets us apart from others? How long have we been around?5) Testimonials and gaining user's trust: Ratings, existing platform, press coverage. What well-known companies have testified for us? 6) Why should each stakeholder invest? Who are the stakeholders and what's in it for them?7) How the token itself will work once integrated into platform. 8) About the Team. What have we as a team been doing to get our name out there? Why should people trust us? Do we know what we're doing?9)  About our Blockchain Solution. Why integrating blockchain into our platform will help our stakeholders.10)  Plans and Goals- ALL other blockchain companies seem to have this on their landing pages as well. It shows that we have a set goal in mind and a timeline for reaching those goals. 11) Overall throughout landing page- always have a CTA visible for signing up. Also include links to company docs that are easily accessible for curious users. 

Sign Up Page

Once a user clicks into the Sign Up page, they will need to input their information-

  1. Email address
  2. Whether they are a Buyer or Manufacturer
  3. Their Ethereum sending and receiving wallet addresses


Landing Page

I noticed during my market research that most landing pages had at least a large section dedicated solely to explaining how their token would work, so I incorporated this into my first iteration. I wanted to make sure that users were able to access the token sale at any given point on the landing page, so I made sure that CTA buttons were readily available in important sections.

Sign-Up Page

We tried to tailor the Sign-Up Cards to the needs of Hardware Manufacturers, most of whom are less familiar with technology. My final Sign Up Card iteration included easily accessible information over each input.

User Testing

My CDO mainly stuck to our wireframe and coded the beta website. You can view it here:

Critique Feedback and Insights

  • Early testing showed that users did not feel any sense of urgency to purchase tokens, and weren’t interested in reading so much text.
  • How might we encourage the users to actually sign up for the pre-sale?
  1. One idea we had was implementing a countdown clock that would show how much time there was left to participate in token sales- eliciting a sense of urgency for users.
  2. Users would rather watch a quick video to learn about a product as opposed to reading a long description.

Countdown Clock Explorations

Since the Countdown Clock would be the first thing that users see, I did different visual explorations for it. Although my explorations were not used for the final website, I enjoyed exploring different implementations of Countdown Clocks that would stand out.

High-Fidelity Iteration 1

High Fidelity Iteration 2

Using Hotjar, we determined which parts of the landing page were gaining the most traction. We discovered that users were the most interested in reading our whitepaper. We decided to include the whitepaper, one-pager, and presentation inside the header to make it easier to find. We also conducted A/B testing- Version A of the website kept its original branding with the CTA button in the original blue and Version B showing more contrast with the button in orange. We obtained more signups with Version B.

Future Implementations

  1. The current landing page is pretty lengthy- most users won’t scroll all the way to the bottom, so that information might be missed.
  2. How might we bring some important info found at the bottom of the page to the top of the page or shorten the page in general?


For this project, I worked with a much more experienced designer, but also a less-experienced one. It was interesting to see their different perspectives on how to approach solution spaces.

It was also my first time incorporating a developer into our design process- we had a lot more restraints visually because we wanted to make building the product a lot easier for our developer. Some challenges I faced were that since I had never designed for blockchain before, I had to look into a lot of different blockchain websites, and pull ideas from the more successful ones. Overall, I learned a lot about the blockchain space and it definitely sparked my interest in cryptocurrency and its current hype!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade