Maecenas
UI dESKTOP Design
CONCEPT
Maecenas is a blockchain-based art investment platform that allows investors to bid for art pieces listed on the platform. Investors may choose the amount they wish to invest and their desired price. Once the bidding process is over, the highest bids are given preference and the artwork is allocated to the successful investors based on the chosen amounts and price. The value matching the investment amount is transferred from the investor account to the art owner account and the transaction is complete.
The objective was to revamp the old website into one with a better UI to help convey the brand and its positioning better.
PROJECT BRIEF
Requirement(s): 7 x Unique Desktop Mockup (Homepage, What is Maecenas, About Us, Contact, FAQ, Blog, Single Article)
Tool(s) used: Figma, Adobe Illustrator
Duration for Design: 4 weeks (inclusive of client review)
Creative Direction: Clean, modern, approachable, luxurious, art-meets-digital
Colours used: Black, white, gold, bordeaux
Loading
Upon entering the website, a loading screen greets the user. A tiny circle on a black background will form into the M and expand again to reveal the entire webpage. While in the M shape, users are able to get a little sneak peak into the webpage. This is done so that first time users are immediately immersed into an experience and an interest is sparked.
Homepage
To set Maecenas apart from its competitors, the homepage features a unique horizontal scroll. Each section tells a story and leads the user on to the next point, eventually leading to a contact form to get in touch.
For registered users, upon entry to the homepage, they are able to easily locate the login button on left and move along to the investment platform. For users who are new to Maecenas, they are able to scroll along the page to read more about Maecenas.
Unlike a regular vertical scrolling page, there is a lack of indication on all browser’s scroll bar as to how long the page is horizontally. Therefore this screen has a custom indication that indicates to users the percentage of the page they are at (mockup located at “What are asset tokens?”).
Featuring a sticky navigation bar on the left, users will always be able to move along to other pages at ease. Important links are displayed on the bar whereas other pages are nested in the menu button.
In order to bring attention to special events by Maecenas that are occurring, the homepage also features a sticky special event tab at the top right of the page. Upon first landing the homepage, after the loading screen, this special event will slide out to showcase the special event. This will only happen once until users clear their cache. Users will then be able to click anywhere to exit and access this special event again with the sticky tab.
Menu
Special Event
What is Maecenas?
As one of the more important pages of Maecenas, this page gives the user a deeper understanding of the investment platform. The What is Maecenas page is therefore heavy on content, lengthly and requires an effort to retain viewership.
In order to counter drop out rates, this page relies heavily on animations as well as out of grid designs. Imagery and illustrations are used reduce the amount of content, and also as a break from the mundane of texts.
Other Pages
Although smaller in scale and importance, these other pages features a similar clean, classy, and art-meets-digital look and feel.
