Xtrau

Inspiration and intro

First of all, hello, everyone :D!

The inspiration comes from the best features of high-quality and successful companies' websites. From the nature of gaming, from the colors of higher-end experiences, from the spaced, modern UIs. And, of course, from the relentless desire for greatness.

Web software should be more fun, robust, personal, stable, private, and secure; we apply this statement across all of Xtrau's websites. It adapts to the user more than the user adapts to it.

This current public release version is the result of proudly three years of research and hard work! I'm currently working up to this day on new functions, like integrating machine learning, making code improvements, scaling the website, unifying the UIs, using new Velo APIs, and much more, and as Xtrau is a SaaS type, it's an easy cake to maintain and update it universally. It works great both on desktop and mobile.

We envision Xtrau as the ultimate web platform for buying a bespoke gaming PC in Mexico.

In the meantime, ladies and gentlemen, let me introduce to you the very first version of that statement, which was completed just a couple and half weeks ago:

What it does

Xtrau is a platform for buying custom gaming computers in an entirely new way. Today, it has the PC model "Modelo" LTX. It is presented on a beautiful page where customers can see each advantage and detail, from hardware, outstanding services, Xtrau's X / OS 1, and much more. Customers can customize most of the page's photos, videos, and icons to their preferred PC color!

Then, it takes customers to one of Mexico's best, if not the best, webpage to order a custom gaming PC. It's simple, uncluttered, seamless, elegant, beautiful, and easy to understand for buying an excellent custom gaming PC. Customers use this page to create a new custom order; when that happens, the code creates a new Xtrau ID that will eventually unlock many features and pages, like the flagship X / OS 1, that will allow customers to track the progress of their computers in real-time, contact directly the staff that's building and attending, customize the computer's wallpaper with Wallpaper Engine entirely, customize the computer's software, and many more functions. It also unlocks the accounts and the pedidos (orders) pages. Xtrau also has the X-Admin dashboard-page, for the staff to have a great and clear experience to build the computer orders that clients have done and mangage them entirely without the need to get to the very databases.

And yeah, Xtrau is no longer a concept or idea! It's serving every day's real users and customers, with the public release version launched recently! :D

You have to try it out entirely! Go to xtrau.com.mx/hackathon to learn how to place a trial order, fully access Xtrau's functions, and test them for free!

How I built it

The Xtrau website and apps were all built on the Wix Editor, working entirely on the Velo capabilities and their corresponding APIs. If Velo wouldn't exist, most of Xtrau's features wouldn't as well!

Some APIs that are currently being used by the public release version (V.1.0.15) are:

wix-location

There are many usages of Wix location, to name a few examples; it's used to navigate from app to app, for example when a custom order is placed, it builds its URL and redirects the customer to that URL, resulting in automatically going to the all-new order's main dashboard (located in X / OS 1) to continue with the order. It's also used for redirecting to the Xtrau ID's login page when the user is logged out and attempts to access an order by copying and pasting its link.

wix-storage

Wix storage powers pages that customize for each customer based on their recent actions and events. For example, if a customer has made an order, the function Smart Navigation X will store in the device just a bit of data locally, so the homepage will show directly the customer a big header that says "Your Model awaits you." and the action button will change to go now to the ordered model's dashboard.

wix-data

Wix data is the most used API in the apps all across Xtrau. It's mainly used to store, access, and update the custom computers' orders securely, power the primary functions of X / OS 1, power the staff's apps like X-ADMIN, store and access the website's data, customize web pages based on the default-provided data and photos, and many more.

wix-animations

Wix animations is mainly used by X-ADMIN (a dashboard, collaborator-only page) for animating visual indicators like 'loading' and 'syncing,' creating a more pleasant and easy-on-the-eye experience for Xtrau's staff while using the page to build computers.

wix-window

Wix windows functions are commonly used in pages that require showing lightboxes containing essential data, such as prices and financing plans, and returning those values to the main page that triggered the lightbox. For example, while ordering a new computer, the customer can click the price button to open a lightbox containing full details about the selected payment plan and their options. If the customer selects a different plan, it will automatically pass back the data to the main order page. This one will react by changing the necessary code and elements on the page to work accordingly to the selected plan by the customer.

wix-members

Wix members is the crucial API that allows Xtrau to have the Xtrau ID accounts function to register members so only they can create new orders and access only their information while maintaining solid security on the entrance to PII data.

wix-crm

Wix CRM is currently being used for notifying customers about important events via email, like new order placements, important Xtrau ID account notifications, important product updates, and many more. It's also useful for Xtrau's staff to get critical messages, like when the customers use the XDC function (Xtrau's Direct Contact function) to contact us immediately.

wix-members-backend

Wix members backend is used to provide functions like changing the email and password of the Xtrau ID account.

More Velo APIs will be used in new features, like wix-pay and wix-stores.

Challenges I ran into

Building Xtrau has been one of the toughest challenges of my life; it represented many challenges from the beginning. The current design and functions result from months of working hours and many tests.

But, no matter how difficult the road was, Wix provided a complete suit that allowed me to make my vision and even improve it much more, with unthinkable functions at the start.

It's the authentic result of total commitment and hard work, there are thousands and thousands of coding lines!

Accomplishments

The site has been acclaimed by professional gamers who've won international eSports competitions, including the Fortnite Champion Series and several others. Xtrau has also been reviewed by professional Twitch streamers who highly recommend its custom gaming computers and the buying experience on the web. Most of the features of Xtrau were even acclaimed by Wix's Velo product manager herself! We've been doing interviews about the general experience on the website for the customers, and an astonishing 100% said that it was good to great.

As a developer, I went even a bit emotional with messages that were sent between visitors to Xtrau, whom both agreed to share with me their chat:

They say in Spanish, and I quote: "Está bien chida", "Me metí a ver", "Me gustó el diseño..."., "...si se nota que hay trabajo detrás", meaning in English: "It's very cool", "I went to see it", "I liked the design", "it's notorious that there's work behind."

Xtrau is one of the best websites to order a computer with such functions, capabilities, and customization that other similar companies in Mexico don't offer.

I made, took, and edited all the website's photos, graphics, and videos. I hope you like them!

What I learned

Wix staff, thank you for providing these fantastic tools so people can do amazing things. I've learned JavaScript, and I've learned from 0 to know how to do these web apps; to drive from a vision to a reality.

The complete information suites of Wix and Velo allowed me to learn what I needed to get it done, and that's one of the main factors that helped me to learn everything required to get proudly certified as a Velo Developer; by this statement and I query:

"One of the most beautiful and well made projects I had the pleasure to review. "

Email from Wix Learn, September 5, 2022

During this hackathon, I implemented many new functions that I needed to learn how to code. I did interviews to get users' and customers' feedback, learned from them, and took action to solve the main patterns I discovered. I learned how to work with WixMultilingual, learned the necesary things Array functions with Velo APIs to launch the LTX computer model. I finished and ultimately released the flagship software X / OS 1 with Xtrau ID, built up the custom order's page and many many more things that I learnt a lot from :)

What's next for Xtrau

Xtrau will continue by vastly improving and scaling all the apps, capabilities, models, and experiences for everyone in the relentless pursuit of our mission.

Now, here's one example of each area that is getting worked out:

On the app's side, I'll be working on launching soon the all-new X / OS 2, taking all the customer's feedback into account for fixes and improvements, as well as packing it with a whole new set of features to make the customer's experience even greater; including AI-powered ones, such as the powerful Open AI's DALL-E 2 image generator, so people only write what their perfect computer's wallpaper would be. The AI generates it for them. They can see, edit, change, and approve it immediately in the Wallpaper Editor.

On the capabilities side, I'll keep improving and scaling Xtrau's CRM capabilities to the next level by connecting more of the apps to Wix's CRM system to obtain better and more accurate data, making possible advanced email marketing campaigns, for example, as well significantly improving and making easier the working experience for Xtrau's staff while using the X-ADMIN and others.

On the model's side, we plan to release in the Q2 of 2023 an all-new computer model called 3TX. It will be focused on keeping a gorgeously powerful gaming computer and the beautiful well-known buying experience with X / OS 1, all for an attractive price.

On the experiences side, I'm improving the whole set of UI experiences across Xtrau's webpage, including, without limiting, the standardization of navigation, colors, image sizes, fonts, the different types of buttons, and the unification of every app, to name a few.

The final objective is to set Xtrau's web software as a unified, smart ecosystem to order the best gaming computers.

Bonus: Real users' feedback and how they were fully applied

The general feedback interview on March 30 shows some main patterns that Xtrau has solved.

Pattern 1 solved: Give customers basic, non-intrusive tutorials, but inform them how to use the software and fully enjoy its advantages. The interview showed that many users missed the buttons that change the angle of the custom gaming computer they're buying.

I solved this mainly on the LTX new order page, placing more precise instructions and adding little tutorials, like the little box with text indicating that customers must hover over the computer's photo or video to change it.

Pattern 2 solved: Make fonts bigger when possible. The interview shows that 73% of the people wanted the fonts on the desktop to be more legible.

I solved this across all the pages. Deskop's font size of 14 pt to 16 pt is now considered only for the text in need of being small, and when possible, we increased by 2 pt the headers and texts that are important to be read.

Pattern 3 solved: Most users declared that they didn't know the flagship software well and that there was very little information about them. The mainly affected software was X / OS 1 and Xtrau ID.

I created an X / OS 1 page only to show big images of the software, its main capabilities, and mini-videos showing how it looks and works placed on the computers' pages. I'll also do one on Xtrau ID, as its capabilities keep growing.

Pattern 4 solved: Launching times to X / OS 1 were described as slow. This was a minor issue on the wix location usage that redirected to a constructed URL with uppercases, causing the system to set the redirect again but with lowercases and consume some seconds, and I solved it by automatically transforming the affected words in uppercase to lowercase in the code and then call the WixLocation() functions.

In general, we had very positive feedback, users like the look and feel; they even often describe the website as an "Apple-type-one."