Depeche Nodes: Getting to Know the Value of New Blockchain. VITE.

James Kaguyu
Nov 1 · 19 min read

VITE is an international public blockchain on a mission to provide a fast, secure, and expandable platform for Decentralized Applications (dApps). It is seeking to increase its market position in the US.


But what is the current state of Blockchain?

“Blockchain can only be compared to where the internet was in the 90s. This means blockchains at the moment are slow and full of complicated processes that make mass adoption difficult.”

-“Real-World Applications of Blockchain” Dan Weinberger, Co-founder, and CEO of Morpheus Network


Learners want to understand Blockchain; Developers want to build on it.

As awareness of Blockchain’s usefulness grows, so is its growing user base and emerging technologies competing for mass adoption. However, VITE.org is not easily legible for new users and does not provide digestible information for project deployment.

  • Developers need to quickly find information on building applications and where to seek additional support when they need it.
  • New Users need to easily navigate the site to learn and understand how VITE’s technology works and the benefits of its use cases

Enthusiasts and early adopters need a way to quickly understand VITE’s technology, their products, and get resources on how they can develop on their platform.


VITE.org. A product and practical information resource that communicates how their blockchain works, the products & services they provide, and how you can build on their platform.

So, Why, VITE?

“Though the blockchain technology is built on principles that advocate for freedom and autonomy, supportive regulation can accelerate mass adoption and build trust with the masses.” -

L. Fitzpatrick 08/21/2019 | FORBES

Converting for Success

  • Services Enterprise and Government for contract proposals on public and private infrastructure while growing their companies or supporting their communities, thus earn public trust from traditional Blockchain’s nefarious past and present.
  • Informs and encourages new users to learn about the benefits of their products and services; Download the VITE Wallet for payments, wallet exchanges, introduction to dApps, and additionally learn about their new blockchain technology.

Key Screens

Home Page

The Homepage is the Users’ first engagement with VITE, an overview of VITE’s mission and values that were missing in the original site

(Left) Existing Homepage: The Value Proposition of the site was too ambiguous on who it was targeting. Video and technical terminology were awkward to discern to the new user. (Right)Homepage redesigned: This is where the user will get an overview of what VITE does and the Products and services they provide: Public finance | International Payments | dApps Application platform. All Hi-level Design courtesy of Asha Sreekumar

Products Page

The user can find more information about VITE’s products& services in the Products Page, furthering details of how the user can benefit. We wanted to highlight the impact the products bring to the human experience in addition to how the products are used.

(Left) Existing Product Page: The Language of Content and images in the existing product page were again hardly legible to new users. (Right) Products Page Redesigned: Products & Features in more legible content

Products & Features

  • Wallet for holding, sending and receiving digital funds
  • Featuring a Payment API to send & receive transactions
  • Incentivize new users to try the product out with free digital currency
  • Decentralized exchange for trading and listing
  • Encourages developers to join the community and participate in Vite’s consensus program or become an exchange facilitator to generate profits from trade exchanges
  • Natural findable links to Vite community forums, Telegram, and Discord.

Added Pages

Technology Page

The Technology Page highlights what Vite provides; its differentiators from other blockchain platforms feature a glance on the technology behind their products and services.

(Left)Technology Page. Informed users can scan VITE’s explanation of its technology, find the glossary of terms, and find the link to their White Paper for a deep dive of detailed specifics of their technology. (Right) Use Cases Page. It was essential to showcase VITE’s real-world examples of how and where their technology is being used, such as token distribution programs, Smart contracts, and payment structures.

Use cases Page

Use Case Page Highlights:

  • Encourage Start-ups and devs to submit Use cases and seek incubation
  • Academic researchers to study potential and existing use cases to strike partnerships
  • Appeal to governments and Enterprise to educate them about new Blockchain tech through workshops and policy proposals

About Page

The About Page highlights VITE’s core values and why they are pursuing their mission, which was sorely lacking in the existing site.

(Left) About Page: The page also gives investors and the global team’s mini-profiles with social media contact links in Beijing Management l Silicon Valley |New York | Africa. (Right) Community Page: Features mini-profiles of the global community leaders and managers & CTA at the end of the page to encourage the user to try them out and join the community

Community Page

The dedicated community page is for the Users in Vite’s ecosystem who facilitate and moderate Vite’s range of user groups online. Community managers play an essential role in fostering the community. They are the conduit to answer all FAQ for new users and provide resources and support when they can to developers and informed users alike.


For Enterprise Page

VITE USA aims to make an impact on the community by partnering up with Municipal, State, and federal government bodies and solve for use cases in public infrastructure.

We appeal to government agencies by creating a dedicated page that follows their best practice that allows .gov representatives to vet VITE’s capabilities and familiarity with government compliance adjacent to the opportunity provided.

(Left) For Enterprise & Government: Dedicated page that allows .gov representatives to vet VITE per their requirements. (Right) For Developers: Dedicated one-pager on VITE’s Gives a rundown of the code that VITE has developed, a comparative chart of what other emerging technologies are offering and calls to action to learn more about how they can participate in VITE’s development. All Hi-level Design courtesy of Asha Sreekumar

For Developers Page

The Developers page invites developers interested in Blockchain to try out VITE’s technology with links front and center to resources and communities that champion VITE’s cause. We wanted to focus on the impact alongside the specifics of the technology.


The Road Here

Process: Our Roadmap | Scope

We Learned Some Stuff

What is Blockchain Technology?

The term blockchain is a combination of two words, “Block” and “Chain.” Therefore, it merely refers to a chain of blocks — but in a digital context. “Block” refers to a set of digital information while “chain” is the public register that bears the information. This distributed ledger is a time-stamped series of a permanent record of data that is managed by a cluster of computers not owned by any single entity and is entirely open to the public. Any data recorded in the Blockchain is challenging to modify or edit.

Blockchains also secure themselves by being distributed. Instead of using a central entity to manage a chain, blockchains choose a peer to peer network, and everyone is allowed to join.

When someone joins this network, they get a full copy of the blockchain. The node can use this to verify that everything is still in order.

After creating a new block, it is sent to everyone on the network. Each node then verifies the block to ensure that it hasn’t been compromised or tampered. If everything checks out, each node adds this block to its blockchain. All of the nodes in this network create consensus. They agree about which blocks are valid and which aren’t. Other nodes in the system will reject blocks that have been compromised. To successfully hack a blockchain, you’ll need to tamper with all of the blocks on the chain, redo the proof of work for each block and take control of over 50% of the peer to peer network. Only then will your tampered block become accepted by everyone else. So this is almost impossible to do.

Blockchains are also continually evolving; one of the most recent developments is the creation of smart-contracts. These contracts are simple programs that are stored on the blockchain and can be used to exchange coins under certain conditions automatically. The creation of blockchain technology piqued a lot of people’s interest; soon others realized this technology could be used for other things like storing medical records, creating a digital notary, or even collecting taxes.

Depeche Nodes: VITE’s Technology

What is DAG?

Directed Acyclic Graph Diagram

A Blockchain without the Blocks and the Chain

DAG (Directed Acyclic Graph) technology, which is an alternative to the blockchain that goes about reaching consensus in a very different way than its competitor.

DAG is a blocklist distributed ledger that is scalable and lightweight. There are a few projects out there that currently use DAG, Byteball, IOTA, Hedera Hashgraph, and NANO. While their names are their first distinguishing property, they also vary on how they reach consensus.

Individual DAG transactions are linked to one another directly instead of being grouped and processed in blocks like Blockchain. This, in theory, makes DAG systems far more agile and scalable than the average blockchain.

Now that we have education about Blockchain out of the way, we know that its development and explaining it away can be a complicated process, so let’s get to our approach into the problem.

Research

“Early adopters focus on technology. Mainstream is not there yet, but we could be ahead of that. It’s good to educate users. Define the problem in a way that most people can understand.” — Stroud, J. Investor (2019, June 11) Client Interview

Our research was critical, especially for sites showcasing new sophisticated technology. Forgoing the User Experience can result in a website that people will not come back to if frustrations at any touchpoint are ignored.

Process: Our Roadmap | Research

We checked out VITE’s ‘Floorplan.’

VITE.org Site Map Diagram For a Closer Look

It was essential to define what information on the site is going to be shared and how it’s going to be organized. The information hierarchy informed our decisions on what sections needed to be in the primary navigation and whether additional related paths will be required to make appropriate parts of the site accessible.

  • Vite’s current website currently features the most content on their products, supernodes, and Wiki.
  • “Earn VITE Tokens Now!” appears on every page without an option to close it.
  • WIKI links lead to different parts of the WIKI, such as introduction or tutorial — this becomes an issue as the introduction page is missing in the WIKI navigation and cannot be navigated to again once clicked out of the section.
  • Link to Bittrex produces an error.

Not Just About the Technology

Summary of Results Usability & IA Review. Raw Data | Slides for more insight

A Usability Review with a Heuristic analysis helped us analyze the user interface to highlight any significant difficulties with the web site and help identify areas where projected investment in usability can make the most impact. We devised some task descriptions that are consistent with our understanding of the users and the objectives of the web site.

  • Content is unfamiliar to a new user — Need a more straightforward and concise language
  • No feedback on some links when hovered or clicked
  • Navigational feedback needs improvement (e.g., showing where you are in the site)

Who’s ahead & Who Isn’t?

Traffic Data
  • VITE.org had a nearly a 50% bounce rate with an evident lack of online marketing within direct referrals, organic searches, paid searches, display ads, socials, and emails.
  • Ethereum Remains the biggest giant
  • WAVES yielded the lowest bounce rate ( Approx 25% Daily, Monthly, Annually) & Out-performs visit duration (5–6 Mins @4–5 pages visited).

Who Else is Doing it?

Direct and Indirect Competitors

We had to understand VITE’s position in the marketplace and identify their direct and indirect competitor’s place in the same juxtaposition. We compared VITE to its competitors on many criteria, including background, products, market positioning, SWOT (Strengths, Weaknesses, Opportunities, Threats for Brand strategy), UI (User Interface) elements, and feature comparison, which informed our decisions for feature prioritization.

Comparative Features. Raw Data
  • Direct competitors in the wallet space include IOTA & NANO
  • Information is easily digestible on the competitor Homepages, has an excellent content hierarchy, and focus on human impact first, and technology comes secondary.
  • The leading competitor platform is developing a token platform, DEX, and dApp ecosystem. Opportunity in several markets.

Who inspires us?

  • Feature use cases, testimonials, and social proof more front and center
  • Quick links to Telegram and Vite’s other forums
  • A use case for Syracoin Project and other projects related to Public Sector
  • Guide wayfinding information catered per target user
  • A page dedicated to government & Enterprise for real-world use cases (Partner with us page) — www.vite.org/gov
Feature Prioritization of Comparative Features for inspiration

Customer Insights at Variable Experience Levels

We were able to directly see how visitors engage with the websites, what they clicked, where they stopped, where they cover, and more through looking at heatmaps. We identified areas of interest, disinterest, and confusion by reviewing heat mapping analytics. Those inferences gave us indicators of what we can tweak in the new design to best cater to the needs of our visitors.

  • Very little engagement with campaigns and news on the home page.
  • Many were interested in the People, Wallet, and Tutorial pages from the home page.
  • 20% of visitors immediately hit the “X” on the “Earn Vite Tokens Now!” pop-up
  • The Wallet — particularly the web wallet, had the most interaction of the products listed on the home and product page. ViteX was second.

Interviews

“As long as the VITE team is building and progressing, then I’ll keep my investment in them aside to help with my family.” Interview Participant

It was essential to get insights from our interviews to learn more about how and why different parties are involved and invested in VITE. This exercise also presented an opportunity to dive into questions about the future of VITE and recommendations.

Highlighted Insights:

  • A majority (70%) of VITE users are primarily wallet users.
  • The majority of existing users believe in VITE and want to champion their cause.
  • Users tend to leave the site and gravitate to Google search and other forums to find answers.

Usability Tests

Raw Data

Our usability tests determined design inconsistencies and usability problem areas under controlled test conditions with representative users within the user interface and content areas by establishing baseline user performance and user-satisfaction levels of the user interface for future usability evaluations.

Some sources of error included:

  • Navigation errors — Unable to locate functions, excessive keystrokes to complete a task, failure to follow proposed screen flow.
  • Presentation errors — failure to locate and appropriately act upon desired information in screens, selection errors due to labeling ambiguities.
  • Control usage problems — improper toolbar or entry field usage.

Insights

  • Home page understandable to a technical user but not the most common user
  • Lack of easy guidelines or tutorials on how to build on VITE’s platform.
  • New and potential users are not sure who VITE is targeting.
  • Some image elements confused users into clicking, assuming it was a hyperlink or a button.

Analysis

Process: Our Roadmap | Analysis

Finding Common Patterns

We used the details within these groups to inform us of typical patterns of behaviours, traits, and specific needs which were further compiled into our primary target users. Based on this, we can also gather and use particular verbiage on our website’s messaging.


A Focus on Traits and Behaviours

*The Informed technical user’s behaviors and long term goals were similar to that of their technical counterparts and few relevant differentiators. We later funneled the number of our primary Target Users into Three and focused the Informed User on solving for Government and Enterprise in-line with VITE’s long term vision of serving public infrastructure and swaying public opinion away from Blockchain’s nefarious past.

Our target audience initially comprised of four primary users wherein we split the Informed category into “Informed” and “Informed Technical.”

  • Informed Users are Non-technical Individuals who understand the benefits of blockchain and are curious to learn more than the average non-technical user.
  • Informed Technical users are curious around the technology and how they can learn to build on it.

A Mile* in their Shoes(*Scaled to 1:1 Sq ft)

  • For the most part, users are not able to achieve their goals quickly in an easy to follow manner through the website
  • And Average users are more challenged by the website than technical users.
  • Insights visually demonstrated for a closer look through the above-linked maps.

Remapping for Optimal Task Orientation


Remapping for impact

We were then able to create user journeys, which highlighted the best-case scenario of thoughts and emotions within each touchpoint the user navigates through in the site’s proposed revision.

The User Flow takes the user through the task orientation of the interface to help them achieve their goals. In simpler terms, the steps or physical objectives to be taken to reach the desired outcome.

User Journeys illustrate the emotional and thought process while taking these steps with the product or service in conjunction with the task scenarios, as formulated in said Flow. We visually demonstrated those steps for a closer look through the above-linked User Journeys.


The Road So Far

  1. Preliminary research: Intro to what Blockchain technology is, how it works & how other platforms differ from VITE |
  2. Devised a hypothesis on bridging the gap between the ‘What & Whys’ to the ‘Hows’ of Blockchain |
  3. Analyzed VITE’s company website to help identify where improvements can be most impactful |
  4. Examined VITE’s marketplace positioning w/ competitors, marked key differentiators & vital features for adoption according to our user’s needs.|
  5. Insights from User research to help inform our Target user Profiles and behaviours. |
  6. Affinity diagram illustrated our target audience’s experiences through our Journey Maps as they interacted with VITE’s existing site. |
  7. Our hypothesis further reinforced from the previous exercises on formulating a User Task Flow per users’ needs. |
  8. User Journeys outlined the best-case scenarios through thoughts and emotions at each touchpoint when a user navigates through the site’s new flow.

The synthesized information from the previous processes informed our decisions for our next steps as we headed into the next design phase of the project.


Design

Process: Our Roadmap | Design

But These Sketches tho…

We began the design phase iterating our ideas into pen and paper as the first steps of the Design Process. Our research allowed us space for our initial thoughts to build so we could envision what we were creating. Those insights aided us to convey those ideas, demonstrate functionality, visualize user task flow, and illustrate how our users would interact with the design.

Design Ideas through pen and paper

…Are Blocking our Ideas!

Wireframe Blocking

Getting Team VITE Involved

Homepage
Product Page
Technology Page
Use Cases
Community Page
About Page
News Page
Help & FAQ Page
For Enterprise & Government Page
For Developers Page

Setting up the Flo

Figma Lo-Fi Interactive Prototype

Asha Did what Now?!

25 (26?) iterations before final Design

Animated Feedback

Prototype for Interaction Design | Interactive Prototype Hi-Fidelity
CTA Rested and Active states

The only thing that Remains Constant

Homepage V26
  • Outline text can be hard to read.
  • Need more white space around images.
  • Reduce image sizes.
  • Many of the polygons, lines, and curves can be difficult to be responsive to changing screen sizes.
  • Need to group line items.
  • Video image mimicking the logo shape looks nice but needs to be a background image — even as a static image, doing it as a CSS element to insert any image will take too much time to crop.

Accounting for Taste


Final Design


Looking Ahead

  • Create a dedicated site for Developers for deep dive into the technology
  • Videos/educational page to aid the learning curve of technology
  • More tutorials, quick start guides, and resources for developers to get started building dApps.
  • Community event postings, virtual Q&A or live sessions for devs
  • Take a full inventory of content; adjust voice and tone for more straightforward concise language for consistency across VITE’s network

Learnings: Looking Back but still Pushing Forward

  • Creating individual logical flows that were inline with each of our primary targets’ goals would have made the most sense in communicating how the users would interact with the site.

Aligning the design team and stakeholders on brand personality early on may have also aided in a smoother process, especially on how the placement of relevant content was going to be mapped out.

  • Our visual designer had to facilitate a bonus branding exercise session to establish brand personality, including voice, tonality, messaging, the what, and where the content would be placed in the information hierarchy in juxtaposition to user tasks before the user flow’s final approval.

I teamed up with a design partner, Asha Sreekumar, who took point on design lead & Strategy and the main point of contact on this project.


My Role: Lead Research Strategy |Presented Research Insights|User Research & Analysis (Interviews | Usability testing | Heat maps) |Affinity Diagram |Usability & Information Architecture | Competitive/Comparative Data |Website Traffic Analysis | Journey maps | Initial User Flows | Blocking| Prototyping (Initial Wireframes) | Interaction Design.

Shout out to Asha & Team VITE.

James Kaguyu

Written by

Filipino-Canadian in San Francisco. Product/Interaction Design. Muay Thai/Boxing practitioner. Anime enthusiast. In that order.

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