Quick Links

  1. The Brief
  2. User Interviews
  3. User Persona
  4. User Flow
  5. Wireframes
  6. Testing & Feedback
  7. The Prototype

The Brief

Attaverse is a social venture to commercialize a research project that has been underway the last six years. The company is now part of Blockchain@UBC and is involved in two on-going research projects with UBC.

The intent is to empower the creation of social impact solutions that bring agency, equality, and inclusiveness in a growable and dynamic way to changemakers, innovators, and their beneficiaries in the digital realm that will drive a new economy.


The goal was to create a website that addressed what Attaverse can do and how it empowers society as a whole. This was a tricky project to approach as the concept of Attaverse is quite broad and could be interpreted in a variety of ways.

To begin, we sat in on our clients’ meetings as well as interviewing the clientele that uses Attaverse in their work.

My Role

This project had me working in a team. For my role I headed up the User Research including: User Interviews, creating user flows, wireframing, mockups and prototype creation.


Our initial goal for our research was to explain Attaverse in a way that could be understood by a common user group. We quickly learned that this was no simple task as Attaverse’s features are rather broad. One discovery was that the empowerment, connectivity, and collaborative values that are Attaverse’s main staples, were often viewed with hesitation when the concept of Attaverse was explained to potential users.


We soon realized that trying to garner a new user group, while possible, would take too much time given that the project timeline. So, we went back to the drawing board. We decided that the best way to obtain our goal was to focus on the people who had already used or are continuing to use the Attaverse concept in their line of work. We believed that positive key insights drawn from users already using the product would give us an accurate starting point.

User Interviews

Interview questions were conducted in a way that helped us see how Attaverse brought value to accessing data. We asked how Attaverse affected a company for the better and delved into the effect that was caused. The users we spoke with were healthcare administrators, community advocates, and app developers who had utilized Attaverse to manage their data.

They make the data work for the individual. They can decide who or what to connect to and what data can be shared.

“The gist, for me, was an individual connecting out. You know, starting from the core self and then reaching outward to other “selves”.”

“I want to expand on society as a whole when it comes to accessing their personal data: the key is connection and collaboration through a trusted medium”

The similarities that we found through our interviews were that each owner believed firmly in connectivity and community. For the developer inquiries, we were challenged as there were no developers that had used the Attaverse platform. So, we reached out to a few local developers and pitched the idea of Attaverse to them. We explained that Attaverse was a way for Devs to interact, collaborate, and solve problems together.

“Sounds pretty cool, but I don’t feel too comfortable with sharing my code on a platform that I’m not aware of. They’d need to earn my trust first.”

One of the key insights between business owners who use Attaverse and developers is how much trust can be placed into Attaverse. For the owners they’ve already established said trust in Attaverse but want to extend it to their users. For developers, Attaverse is a foreign concept where trust still needs to be earned.

We took that notion from our interviews and added it to the other main insights we discovered:


The current user often voiced a need for connectivity and collaboration between people and data. The staple in which they build their business was based on a community that shared data between themselves and collaborated frequently. The trust insight was garnered from users who have not used Attaverse. Trust is key when it comes to using a new product so we wanted to create a target user who was involved with the community and also collaborated frequently with their peers.

User Persona

Keeping in line with our insights we created a user persona who’s profession was heavily involved with their community but also oversaw and exchanged data.

Using that knowledge we built out our target user. Meet Mark:

user persona

Client Requests and User Flow

At this point in the project the client had requested specifically that we create two specific sections for this website: “Changemakers” and “Developers.”

Changemakers, according to the client, are people who break away from the norm to pursue a belief or idea that benefits everyone. Developers are specifically coders and app developers who could utilize Attaverse in their work.

It was also established they wanted their users to reach out to them to learn more about Attaverse and how it can be integrated into their daily life. As the client didn’t have the specifics for this laid out, we had to keep this process concise with the end goal being the user reaching out to connect with the client.

Taking this new information in hand, we set out to create our user flow. We wanted to take “Mark” through the process of the “happy path” of arriving at the website’s homepage and navigating through it to the contact page.


To create the wireframes I sat down and began to sketch out some potential designs while keeping our insights from the client and the needs of our target user in mind. We went through several concepts and collaberated with the client to establish a final design to be prototyped.



Taking in feedback from the client we established several layouts that best displayed the content in a digestable manner for the end user. Using this feedback we transferred our wireframes from paper to digital.


Testing and Feedback.

We tested out our prototype on several users who fit our target persona’s goals and received the following feedback:

1) There was too much Lorem Ipsum dummy content. We addressed this by creating some content of our own to help guide users through the site.

2) There was confusion with the home icon, so we removed it and replaced with a link labelled “home”.

3) Some testers were unsure of what a “Changemaker” was so we added a small description beneath the button on the home page as well as added copy under the main heading for the Changemaker page.

Bringing everything together.

We updated our prototype from the feedback given and built up the mid-fidelity before transferring it over a high fidelity prototype.

Prototype mockups

High fidelity mockups

Prototype Demo:

The final prototype was launched once all the feedback was given. It was far from the finished copy that we had hoped for but we were optimistic in that we had created something for our client to springboard off of.

Desktop Version: Click here

Mobile Version: Click here


The end result of the project gave the client a method of how to share just how Attaverse works and can help society as a whole. The client was very happy with the final result and plans to utulize our work to better educate others on Attaverse.


This was a very challenging product as we were starting with a broad concept and a 3 week timeline.” I would have loved to spend more time fleshing out the design concept as well as integrating a more detailed UX processes such as journey maps and storyboards.

Next Project: UI Designs