View More

Vland - a user-friendly Virtual community platform

Vland stands for virtual land. A virtual space SaaS platform lets users freely create their land and experience various interactions with the virtual space and with people.

Project Type
Contract work
Team
Together with 2 founders and 1 ux designer
Primary Role
UX/UI designer
01
Background
Product value
  • Mixing gaming experience with online meeting. Using game design strategy to boost efficiency and creativity in inline events.
  • Value the connection between people, make it easier to happen in Vland than physical space.
  • Value equality, let everybody along with every organization be able to build their own virtual space.
  • Value decentralization, we create the SaaS tool instead of a platform to steal users` data.
Product value
There are lots of players in the market of online cooperation SaaS. We pulled a list of those in the SaaS market and researched them. We analyzed their business model and website design.
They all have their different focus, but non of them are direct competitors to us.
Moodboard
We made research on how to bring a 3d experience on a 2d website and made a moodboad from our research. We need a basic interactive map to make the website an integrated experience for our users to experience the entire journey of attending virtual events, exploring, and creating.
02
Prototyping
Product High-fi prototype
I mocked up a few different perspectives of the homepage virtual space and its layout to test the different color palettes. Eventually, I decided to go with a tilted axonometric view, which is a resemble view to represent the user interface of the product interface and gives more vividness.
03
Testing
AB testing
To decide which theme we would go with and some other suggestions users will have, we conducted a pool of 181 users and 78% of the users prefer the dark theme.  Another 2 tests are to see whether it`s better to have our video introduction entrance from the left corner of the page or on the navigation bar and whether to have the video on the scroll up a page of the site or on a pop-up window. I and my coworkers conducted the test, and we documented it.
The results are below.
04
Branding & UI
For the color palette, I mainly use the color from our logo. I also designed the logo.
05
Final UI & Mobile end
Final UI
Mobile end
Design Challenge
‍The horizontal layout doesn`t work on the mobile end.
‍
Solutions‍
  • Let the users swipe left and right to choose different blocks
  • Embed the blocks into a web flow and let users scroll down
  • We employed web flow rhythm to let each block automatically stay in view center
Launch
I handed over the high-fidelity prototype to the engineer and had several development meetings to develop the site. I made some changes in the development phase as the original design is not time-efficient for the development, or it's not doable technique-wise. By working together, we finished the site development within 1 week.LaunchAfter a few days' development cycle, our beta version launched on Nov 25, 2021.
Visit the site for a full experience now