Omnihorse

Omnihorse 3.0 Platform

web app

Omnihorse

Project Overview

Challenge

The goal of omnihorse.io is to create a cutting-edge web 3.0 platform where users can mint and stake their own digital horses. The platform offers various features, including VIP access to exclusive events, and the ability to purchase and collect different horses with unique traits and characteristics.

The NFTs representing the horses are fully transferable. Users can also showcase their horses and stables on the platform’s leaderboard. In the future, omnihorse.io plans to introduce an RPG game that will allow players to race their horses, compete against other players, and explore a virtual world filled with exciting challenges and opportunities.

Role
  • UX/UI Designer
  • User Research
  • Animation
Tools
  • Figma
  • Adobe Photoshop
  • After Effects
Solution
  • Design an intuitive and user-friendly interface that makes it easy for users to mint, stake, and breed their digital horses.
  • Ensure that the platform is accessible and easy to navigate for all types of users.
  • Create a design system that reflects the brand’s identity and values.
  • Conduct user testing and research to identify pain points and areas for improvement.
  • Continuously optimize and refine the user experience for platform competitiveness.

The Redesign

Below is a comparison of the old and redesigned website. The key changes include a minimalist design with consistent visuals and an improved information architecture.

Before
Old Web Design
After
New Web Design

The Design Process

Design Process

Research

Competitive Analysis

The purpose of conducting a competitive analysis for these companies is to gain a better understanding of their strengths, weaknesses, and key features in order to identify opportunities for improvement and innovation within our own product or service. By analyzing the competition, we can learn from their successes and challenges, and use that knowledge to make informed decisions about our own strategy and positioning in the market. Ultimately, this analysis will help us to create a better product or service that meets the needs and expectations of our target audience, and stands out in a crowded and competitive landscape.

Company Silks Zedrun Pegaxy
Advantages
  • user friendly & intuitive interface
  • real-time market data
  • supports multiple cryptocurrencies
  • offers portfolio tracking
  • unique & innovative concept
  • large collection of horses
  • engaging gaming experience
  • various ways to earnt rewards
  • user-friendly platform
  • passive income through staking
  • strong community
  • Disadvantages
  • limited support
  • small user base
  • limited target audience
  • high transaction fees
  • requires a certain level of knowledge
  • new platform
  • limited user base
  • Key Features
  • digital asset exchange platform
  • multi currency support
  • secure wallet storage
  • digital horse racing game
  • blockchain technology integration
  • in-game marketplace
  • play-to-earn PVP style horse racing game
  • each horse has elemental variables
  • Strategy

    Information Architecture
    Previous IA

    The old Omnihorse website was not user-friendly nor visually appealing, with only three pages that did not offer much content or information. Not only was the layout awkward, it lacked mobile responsiveness, making it challenging for users to browse on their mobile devices. Overall, the old website did not provide a positive user experience and was in need of a complete redesign.

    Omnihorse Previous Information Architecture
    New IA

    The new information architecture for Omnihorse Platform 3.0 aims to create a better web experience for users. It makes finding content easier with a clear hierarchy of information and accommodates the addition of more content. By focusing on user needs and improving the site’s organization and structure, visitors can have a more intuitive and enjoyable browsing experience.

    Omnihorse New Information Architecture

    Design

    Wireframe
    Low-Fi

    After conducting a competitive analysis and updating the information architecture for Omnihorse.io, the next step in the design process was creating lo-fidelity wireframes. With the identified content structure in mind, the goal was to create a user-friendly experience that met both business and user goals. The lo-fidelity wireframes provided a basic layout of the website.

    Omnihorse Wireframe Lo-Fi
    High-Fi

    After refining the layout and structure of Omnihorse.io through the lo-fidelity wireframes, the next step was to focus on the visuals in the hi-fidelity wireframes. By incorporating the visual identity and brand elements, the final designs for the webpages were created. These designs showcase a cohesive and consistent visual language that enhances the user experience and supports the site’s business goals.

    Omnihorse Wireframe High-Fi

    Pedigree Search Feature

    The Process

    When I joining the team, I noticed that the family tree feature followed a traditional cross format. While it served its purpose, I felt that its visual appeal was lacking. Female and male members were represented by pink and blue boxes, with the center section highlighting the current horse. To match the upcoming Omnihorse Platform 3.0’s style and vision, I had to transform this design into an attractive and user-friendly family tree.

    Omnihorse Pedigree Old Chart

    Displayed on the left is my conceptual sketch for the new family tree style, featuring a tree in a wheel format that rotates to showcase information in the center. The inspiration for this design was drawn from the popular movie called Jumanji. The wheel begins with the first generation horse at the center and can be rotated to display other generations by simply clicking on them.

    Conceptual Sketch
    Omnihorse Pedigree Chart Conceptual Sketch
    Final Design
    Omnihorse Pedigree Chart Final Design

    Horse NFT's

    In addition to revamping the website and adding a pedigree feature, I created the horse NFTs using Photoshop. My work involved designing the emblems, background frames, as well as cropping the horse pictures. Finally, I combined all these elements in After Effects to produce an animated GIF.

    Emblems
    Omnihorse NFT Emblems
    Frames
    Omnihorse NFT Frames
    NFTs
    Omnihorse NFT's
    Animated NFT
    Omnihorse Animated NFT Example

    Final Thoughts

    Collaborating with the OmniHorse team has been a valuable experience for me. Working with the founder and design team of a startup business presented some challenges, such as coordinating across different time zones and ensuring effective communication.

    Despite these challenges, I appreciated the regular design meetings we had, where we discussed the project progress and made decisions collaboratively. These meetings were an opportunity to stay focused on the project goals, while also allowing for creative exploration and idea sharing.

    Throughout the project, I was able to strengthen my skills in website redesign and NFT design, and I am proud of the final outcome. I believe that the new designs will enhance the user experience and add value to the OmniHorse brand.

    Working with this team has been an enjoyable experience, and I am grateful for the opportunity to have collaborated with them. I look forward to taking on more projects that challenge me to grow as a designer and collaborate with other talented individuals.