Runtriz
summary.
Runtriz, recently acquired by Radius Networks, develops and provides mobile-based software products for hotels and casinos, including Caesars Palace, Virgin Hotels, and Best Western. Under Runtriz’s mobile solutions, each guest engagement platform is meticulously tailored to the brand’s specific needs.
As senior UI/UX designer and front-end developer, I am responsible for the brand direction and overall visual design of our platform. I work through the entire pipeline, from research and conception to low and high-fidelity mockups to implementation.
tldr: what I do.
[ 01. Crafting the Platform ]
The Runtriz Hotel Platform is composed of a guest-facing app and three separate apps for staff, request, and content management. Trusted by hundreds of hotels and hospitality groups both nationally and internationally, the application is available as a web app or white-labeled native app. The platform gives hotel guests the power of a concierge at their fingertips, allowing them to discover brand destinations, book rooms, and access in-room features using their mobile devices.
During the early stages of our product, I contributed to the development of various new features that we have iterated upon and still use today.
Branding
Because we work with clients with an already established brand, I carefully incorporate their style guide into the designs. I used to create bite-sized brand sheets to give the clients a basic idea of what elements and components would look like, but we have since created the Brand Styler, a design tool we created to generate proof-of-concept prototypes or personalized demos for web apps quickly. It’s used as the starting point for new brands, and it allows for quick and efficient iterations of content and design.
With our Brand Styler, our client services team and the clients themselves can use this tool.
Layouts and Components
Our platform has been built out over years of iterations, and we have an assortment of reusable layouts and components at our disposal, all data-driven and tested. Unless the client’s needs call for a more custom solution, I start by selecting the proper layouts in our CMS and then proceed to work on their CSS.
If a new layout is in order, then I go back and begin wireframing and prototyping. New layouts are first created and tested in the Brand Styler itself, before being ported to our actual hotel platform. This allows for quicker and more efficient rounds of iteration.
Native App
Like how we use the Brand Styler for our web applications, when we get prospective clients who want a native experience, I start by configuring our default Native Platform using the client’s branding to show a quick proof-of-concept. If the client needs a more specific solution, I then move onto create them a customized high-fidelity prototype.
[ 02. Research & Testing ]
With every new feature, I start with a whiteboard session with fellow designers where we conduct our research to identify our users’ needs. After a thorough needs analysis where we understand a client’s goals, challenges, and strengths, we carefully select available features from our suite that fits their needs.
As we built out the platform and deployed the services, I used FullStory to review user sessions and pinpointed areas in the app that users found difficult to navigate through or any areas where they performed actions we hadn’t anticipated.
With the help of our lead devs, I also performed A/B testing on select features and components where more insight would help us make better assumptions.
[ 03. Design Systems ]
To maintain cohesiveness and consistency between all the moving parts of our platform (staff app, content management system, request management system, guest platform, native app), I created a flexible design system that uses a modular approach, allowing for complex layouts from completely different types of content.
[ 04. High Fidelity Prototypes ]
Before I start building out the screens for native apps in React Native, I create a high-fidelity Figma prototype for the client, mapping out the full flow. This allows the clients to get a sense of their new app and often informs them of the experiences they might overlook, like how scrolling or transitions feel.
[ 05. Dev ]
After component, screen, or profile designs have gone through review and multiple iterations, I start by building out new components in Storybook.js. With these components, I then build the screens and wire up anything I can, in ember.js or React Native depending on which platform we’re developing for, and work with our lead dev who handles the backend and integrations.
Once I’m done, I create a CI demo and go through a review process with the clients. After iterations and a polishing phase, the PR gets reviewed and deployed.
Styling is done using Tailwindcss.
[ 06. Marketing ]
Before we grew our team, I also handled marketing collateral, creating sales or investor decks and designing trade show booths and marketing lookbooks for interested clients.
Live Properties
We currently have hundreds of live properties, including Best Westerns, Caesars Entertainment properties, and other hotel chains and boutiques worldwide.
Design Examples
These are ongoing designs and require a password or a secret combo (👀) to view.