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

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.
The Impact of the Value Proposition
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.
We re-designed and re-branded VITE.org as it is especially critical for this site with new sophisticated technology to help individuals and early adopters easily gain an understanding of how it works and implement DApps on VITE’s Blockchain.

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
- VITE.org Provides resources to developers on learning to build on their platform; Generate profit by participating in VITE’s consensus and token exchange operator programs
- 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 Value of the Proposition
The Homepage is the Users’ first engagement with VITE, an overview of VITE’s mission and values that were missing in the original site

Products Page
Details & Features
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.

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
Let’s get Technical!
The Technology Page highlights what Vite provides; its differentiators from other blockchain platforms feature a glance on the technology behind their products and services.

Use cases Page
Actions Speak Louder.
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
Who Is VITE?
The About Page highlights VITE’s core values and why they are pursuing their mission, which was sorely lacking in the existing site.

Community Page
Who Supports VITE?
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
Secure. Practical. Complete.
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.

For Developers Page
Dedicated One-pager
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

We Learned Some Stuff
First, what is Blockchain, and how does it work? How is it implemented in real-world use cases? What makes VITE different from other Blockchains, and what does it do to benefit the mass public? These were some questions my design partner and I needed to answer for ourselves for our preliminary research in Mid-May, 2019, before sitting down for our first client brief, so we dove into the What and Hows of Blockchain.
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?

A Blockchain without the Blocks and the Chain
How is VITE’s technology different from traditional Blockchain? Blockchain technology had disrupted the status quo since 2008 when Bitcoin released the original white paper. Since that time, there have been many iterations of Blockchain technology, and that domain has been attempting to design a one size fits all solution for Blockchain’s shortcomings.
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.

We checked out VITE’s ‘Floorplan.’
We recreated the sitemap post-Project Kick-off as a point of reference when thinking through and iterating during the design process. We were able to review the current organization of the site and determine the variable scope and flexibility involved in the project timeline and identify any critical issues with the site where task navigation and findability fell short.

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
Designing the site to help users achieve the tasks listed in the analysis is essential. If users cannot achieve their goals, it does not matter how well the User Interface is Visually Designed.

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?
We analyzed website traffic to compile measurable criteria on our competitors, such as site traffic, keyword strategy, bounce rates, drop-off rates, etc. Through this analysis, we compared the performance of our competitors’ to our own and learned how we could adapt our strategies to better compete with theirs.

- 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?

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.

- 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?
Comparative features to educate, showcase capabilities & social proof

- 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

Customer Insights at Variable Experience Levels
Heatmaps
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

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

Finding Common Patterns
We compiled and distilled all the feedback from Research into groups that speak to demographic details, interests, motivations, pain points, likes, dislikes, needs, and goals.
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 distilled data of our research allowed us to build behavioral profiles according to our users’ interests, goals, motivations, pain points, and needs. It is useful in ensuring that every main user segment is considered while designing out a website, and used to justify why an element or piece of content is added, removed, or edited.

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)
Our journey maps are visualizations compiled from our affinity diagram of the timeline of actions, thoughts, and emotions a person currently goes through to accomplish a goal. The User Journey was essential in illustrating a customer’s frustrations and how we can better structure the website to match their objectives and needs.
- 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
It was essential to get the clients involved early in the design and iteration phase. Wherein we mapped out the final user flow according to the tasks of our target Users in-line with their (conversion) goals.
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
Recap

- Preliminary research: Intro to what Blockchain technology is, how it works & how other platforms differ from VITE |
- Devised a hypothesis on bridging the gap between the ‘What & Whys’ to the ‘Hows’ of Blockchain |
- Analyzed VITE’s company website to help identify where improvements can be most impactful |
- Examined VITE’s marketplace positioning w/ competitors, marked key differentiators & vital features for adoption according to our user’s needs.|
- Insights from User research to help inform our Target user Profiles and behaviours. |
- Affinity diagram illustrated our target audience’s experiences through our Journey Maps as they interacted with VITE’s existing site. |
- Our hypothesis further reinforced from the previous exercises on formulating a User Task Flow per users’ needs. |
- 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

But These Sketches tho…
Ideate. Iterate. Collaborate. My Jam
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.

…Are Blocking our Ideas!
Blocking is the placement of content or elements concerning the space they will inhabit. After preliminary sketches, we began initial blocking of our wireframes to figure out the structure in’ blocking’ out large chunks of space for different categories of content before getting into the finer details of look or feel; quite simply, to visualize the space required for each class of said content.

Getting Team VITE Involved
Wireframes are the part of the design phase, where we collaborated with the VITE team in creating the initial wireframes (with annotations) to sharpen the informational hierarchy of the proposed site. We did this exercise so we could plan out the arrangement of the content, overall flow, and ensure that each page has a purpose in achieving the goals that were set out during our initial client meeting.










Setting up the Flo
We prototyped the initial wireframes to illustrate how the user would navigate through each screen. The prototype gave Team VITE insight into the functionality of the design, so the developers could provide feedback for any changes needed to make make it work before being handed off to Visual Design and Branding.
Asha Did what Now?!

Animated Feedback
We prototyped the Hi-fidelity Wireframes and did some interactive design of the primary navigation using the Protopie tool. It is essential to give the user feedback on the current state of the system’s status, what the result of their actions would be as well as telling them what they should do next while interacting with the site.


The only thing that Remains Constant
Incorporating Feedback

- 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
Proposed Palette & Typography

Final Design
Hi-Fidelity Mockup & Prototyping
Looking Ahead
- User Acceptance Testing to make adjustments for implementation
- 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
Getting the clients aligned on what the user task orientation would look like and creating a user flow with specific points of entry according to each of our primary users’ goals on one map was considerably challenging and increased the project timeline by a few weeks.
- 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.






