Myra's Website
Myra
UX/UI
Web Design
Innovating the check-in experience
Myra's Website
Visit
Myra
Design and build a website to attract high-end Hotels to revolutionize their check-in experience.
Myra challenged us to build a website that would set their new Kiosk on a whole new level. The goal was to attract high-end customers and hotels to internationalise their brand. The result was a unique experience, made in collaboration with the industrial design team to produce renders and animations to enhance the product's design.
Focus on the Kiosk
Contrary to their previous website, which focused on the check-in service, Myra's CEO wanted to shift direction on how they approach the market. The market has lots of solutions, and they throughly explain what the service is. No one was justifying why their solution was better. This is wasn't the right approach for Myra. They wanted to show off their beautiful kiosk, and clearly show how it the product itself would make the overall service better. The structure of the website would need to show that, specifying sections on each of the key elements that would make this product stand out: Design, Usability, Build Quality, Customisability, and Software Integrations. We built a structure around that.
Quadruple navigation levels
The first time I realised I had a tough job in hands was when I found that not only did we need a third level of navigation, in some cases, we actually needed a "hidden" forth. We can't obviously stack 4 navigation bars at the top, so a couple of alternatives were necessary.
Level 1
Level one of the navigation was a regular good old nav bar at the top of the page. We made clear distinctions between the names of the pages, specially make it clear that regular tasks to upkeep the system were under maintenance, while less visited pages on day to day usage with were under settings.
Level 2
The secondary nav bar came on below and sectioned with distinguishing names, clarifying what each page was for.
Level 3
This is less used across the admin, but in some cases we need a third level to navigate. And example of this was when we needed to clearly distinguish cryptocurrencies like we did on the funding page.
Level 4
Also on the funding page, given the need to make it as clear as possible to avoid mistake while operators fund their hot wallets, we wanted to add a somewhat "hidden" feature, that's not necessary to maintain the system, but it's definitely a "nice to have". This allowed users to dive in more deeply into something related to the page.
Putting all together
Rare were the cases in which we needed to use all 4 levels, but it did happen once or twice. The Funding page was an example of that, allowing users to enter the "hidden" section to see the funding history.
Putting some ink into it
The first version of the homepage, and the whole website really, would be a presentation of the kiosk. All other pages would be secondary, and the homepage would in fact be the product page. At the time the project started, Myra only had one product on their line-up, with a small size variation. Later we would found out that the structure would have to change to encompass new products that were going to be launched. In any case, the final design of the homepage remained the same, and the overall structure of it, would only slightly change over the course of the project.
Putting some ink into it
The first version of the homepage, and the whole website really, would be a presentation of the kiosk. All other pages would be secondary, and the homepage would in fact be the product page. At the time the project started, Myra only had one product on their line-up, with a small size variation. Later we would found out that the structure would have to change to encompass new products that were going to be launched. In any case, the final design of the homepage remained the same, and the overall structure of it, would only slightly change over the course of the project.
Putting some ink into it
The first version of the homepage, and the whole website really, would be a presentation of the kiosk. All other pages would be secondary, and the homepage would in fact be the product page. At the time the project started, Myra only had one product on their line-up, with a small size variation. Later we would found out that the structure would have to change to encompass new products that were going to be launched. In any case, the final design of the homepage remained the same, and the overall structure of it, would only slightly change over the course of the project.
A new way to override settings
A completely new override system that allow users to gradually change their settings as needed, by defining exceptions to the default values set up when installing the system. The new approach is both more complete and more modular, keeping values like commissions much more manageable, specially in larger operations.
The wizards of the Admin
Intuitive step-by-step wizards allow operators to easily enable or edit important settings without the lingering fear of very expensive mistakes.
Modular KYC
We approached Anti Money-Laundering / Know Your Customer requirements by allowing operators to be in full control, while keeping it simple and easy to understand and manage. The modular system enables the creation of fully customisable rules based on multiple dimensions: transaction amounts, volumes, velocity, and consecutive days.
Putting some ink into it
The first version of the homepage, and the whole website really, would be a presentation of the kiosk. All other pages would be secondary, and the homepage would in fact be the product page. At the time the project started, Myra only had one product on their line-up, with a small size variation. Later we would found out that the structure would have to change to encompass new products that were going to be launched. In any case, the final design of the homepage remained the same, and the overall structure of it, would only slightly change over the course of the project.
Building an experience
Because the website would so heavily focus on the product, we wanted to make build an experience around that. We worked closely with the studio who designed the machine to come up with a set of renders and an animation that would be key to make the experience of the website memorable.
Even though we focused a lot of creative energy on building an impressive landing page, the rest of the website was still going to be needed. Following a brand refresh we did the months before starting this project, we used a bright yellow as a base to the remaining parts of website, which included a products page, an about page as well as a contacts and a blog.
Mobile tricks
Being an interaction heavy website, with lots of elements moving around, building that same experience into a phone certainly wasn't an easy task. We did several custom animations for mobile, and adapted sections to work differently so that the information would still be readable through a mobile device, without sacrificing how users would experience the website.
Even though the website was successfully adapted to mobile, to fully experience the website, Desktop is definetely the way to go. Below is a screen recording of the full homepage scroll, but feel free to test it yourself on the live version.
“
Project summary
Myra is now off to conquer the self-check-in world. It offers a solution that's both beautiful and functional, presenting an efficient and friendly user interface, and inviting users to try their machines just because they fit so nicely in the hotels. Building this website was a challenge, with lots of problems to solve, and lots of creative freedom flying around. It all proved to be worth it and mark the start of a long lasting relationship with more projects to come.
This was also a great way to try out collaborative work. Working with Andreia Ribeiro was definitely a very enriching experience, and as a freelancer, I don't get that chance often enough.
