Character Website; Homepage Wireframes Vs. Prototype

GOAL: The user to submits a booking.

Going from top to bottom;

I prioritised an image as the homepage. As the mafia are a subtle presence, I felt their website should create an atmosphere first.

I knew I would be relying on text and image content so wanted to keep the layout clear and easily scannable. A bold image to welcome the user would hopefully represent the mafia's business with little words, and more of a tasteful visual message to the user.

They are a company with a lot of flexibility for the jobs they take on, however I wanted to encapsulate the options they offer as similar to "booking an experience". I went with the layout format of; image, quick description, information about the option, call to action. I find this works very well on websites, especially sites such as Airbnb. I am instantly attracted to the option that looks most "my style". By using images I communicate more information about the option to instantly with the user without requiring them to read. I approached the website buttons with equal importance. "book now" and "more information" buttons. This was to time save for regular informed users, and new users trying to shop the options for them to arrive at the goal faster.

The options are separated into two different categories. The shorter image represent the short term option, and the larger images represent longer term options.This encourages the user to think of long term, short term, temporary experiences, or something more permanent. It lets them know that a long term relationship is available with the company. At this point, I am still deciding whether subscriptions would be a way to capture long term clients.

Overall I wanted this wireframe to be simple, visual and have a lot of portals to booking to increase conversions for the client and streamline the booking process while giving opportunity for users to easily learn.

The prototype

During the design process the final prototype became a more condensed version of the wireframe. I felt the 6 options available were enough to represent what the company is offering.

The use of select images and carefully crafted wording worked successfully in the wireframe. There is good space to read and to recognise the call to action. I removed the "more information" button in favour of a "see more information" hyperlink as the user is already reading from the left and doesn't need to bounce left to right to grasp the buttons functions. This would also highlight and encourage more immediate bookings.

The logo placed at the top left to be the first item people read. A very literal meaning leads to a quick explanation of

what the website is for underneath. I felt the bullets image fulfilled my aim of creating an atmosphere on the website in a tasteful way. I matched the roundness and colour of the buttons which is something I didn't predict in the wireframe. I added a footer that supported the second goal of the client which was to recruit new members and encourages users to cycle through the website. This is also done with the options on the navigation bar on the right.

Cover image source