Ux Design | Character Website Design

Ux Design | Character Website Design

MoodBoards & Research

Concept

Breakfast at Tiffany’s is one of the most iconic and popular movies of the 1960s. The film was released in 1958.

Writer Truman Capote was very specific as to Holly’s elegantly stylish tastes. “She was never without dark glasses, she was always well-groomed, there was a consequential good taste in the plainness of her clothes, the blues and greys and lack of lustre that made her, herself, shine so.”

The whole concept of the website is to bring out all the luxury and deluxe notes Holly was giving, as she was starring in the movie. Holly is a very attractive, elegant, extravagant, fancy, and very sophisticated lady who knows what she wants and how to get it.

After our conversation I had with my client Holly, we discussed her mission and I tried to understand her needs. The main need is to be accessible all around the world, through her website. Also, to make the user realize what kind of lounge Holly’s is. She told me that she wants to gain new customers, locals and tourists and of course keep the existing ones.

The website must have an easy way to book and allow the user to make inquiries easily with quick methods, even for non-tech users. The subscription form is very important to be in touch with users. They should stay updated with current and new events and offer existing and potential clients. And of course, the social media links and Instagram posts for advertising purposes.

The purpose of the website is to show the existing or potential clients what kind of this is. It’s a luxurious, classy, glamorous and even professional venue with amazing food, alternative options and signature cocktails. The design is to bring this out with the outstanding images of the venue, the dark green background, and the classic fonts.

 

I tried to give emphasis to the colours and images. Also the fonts I chose played the most important role, so the user will not get distracted by them. The fonts I used in all Headers are Bondoni 72 and for Menu and Paragraphs is Proxima Nova.

Analysis of my Client's Competitors

Competitors: Cafe en Seine _  37Dawson Str  _  Sams

They are all Primary Competitors, which means they have the same or similar target group and products.

They are located in Dublin specifically in Dawson street.

Cafe en Seine

Its mission is to stay at the top of Dublin’s lounge bar.

When you open their website, it looks like the site is laid out really well. It looks very clear and easy to use. Large background image, logo on top, and centred in the header between the menu. At the top of the menu, on the left, is social media. On the top right with bright background colour is the “Book a Table” button.

When you first see the website loading, it looks a bit dark but after you scroll down you can see the whole atmosphere of the venue. It’s getting brighter, with a white background and some graphic elements, images, and text related to the venue. The font and typeface used are good but they could choose a better one. Maybe just for the headers. The overall aesthetic is a little bit confusing. Between classic, modern, vintage and retro.

The links are working well but if you scroll down you can’t see any of the menus until you reach the footer or you have to scroll up again. The navigation structure is a little bit confusing. The “Book a Table” button is the biggest and it’s the only one they want to give emphasis on.

37 Dawson Str

As you scroll down on this venue’s website the user understands immediately what’s this company’s mission is. It gives a lot of emphasis to reviews as it has two separate sections of them on the Home Page, with two large buttons to read more or write a review.

The design layout is overall very clean and nice. You understand exactly what it’s all about. The main website is located in the centre with some background images covering the whole length. The main menu with the social media menu is both on the top centre and the logo on their left.

As you scroll down the only static button is the “Book Now” in the right-centre. It’s mostly a one-page website but still, it’s not easy to get to the main menu until you scroll up.

Overall, it is a nice greyscale website with large bright images in between.

Sam’s

The first thing the eye catches when you open the website is the extra-large logo in a bright background image. On top of that, you can see the contact details in white with a black background laid in a row. It gets you a little bit of time to find the main menu, which is located on the very top, on a white background. At the top right is the social media menu.

As you scroll down the menu is static which is very handy for this kind of website. The fonts and their sizes look really good but the selection of images is not the best. The text layout in “About Us” is centred and as you scroll down, the rest are aligned to the left.

They give emphasis to the “Book Now” button, the Subscription form and the Map.

Holly's Site Map

Target Group

The target group is in the age group 25-60, all genders, middle and upper class, professionals, and not. These are the specific groups we focus on because these are the types who are attracted by the area. They are willing to spend their money on good dining and awesome service no matter the price.

Personas

Ideation & Wireframes

From week 6, I was researching and developing my ideas and wireframes. Below is my entire process and the last one is the final wireframe.

In my first ideation, I started with a Home Page full of images displaying and linked in all the other pages. Logo on the top left and menu on the top right in the same row. The contact form on all the pages and no subscription. No footer, just the contact form.

In my second one, on Home Page, I put the logo in the centre of the background image and the main menu in the top centre. The rest of the pages were changed with the logo on the top left and the menu in the same row on the right. 

I removed the images/links from the Home page and I replaced them with text and images and the buttons accordingly. I also removed the contact form from all the pages to a single page and I replaced it with the subscription form. On the contact page, I included the map. I also added a footer with a smaller logo, address, email, and the social media menu.

In my third one, I included the Instagram posts on every page below the subscription form and I created an additional page for the location with the map.

In my last one, after practising with my prototypes, I removed from the Home page the large logo as in the rest pages. Now there is consistency on all pages.

Prototypes under development

I started designing my first prototype in Adobe Photoshop.

I continued learning and developing my ideas in Adobe XD and I found it very useful and easier to see all my progress on my prototype. Please note that I never worked with Adobe XD and it was a challenge for me to learn new software and acquire a new skill.

Second Prototype
https://xd.adobe.com/view/1516aa21-41cf-4fcc-43e6-ae0ac4864077-6327/?fullscreen&hints=off

Third Prototype
https://xd.adobe.com/view/7cb060cf-8870-4e2c-6e82-719a03b91c88-0a81/?fullscreen&hints=off

Prototype for User Testing

Prototype

User Testing

I conducted an interview with 3 people remotely. I sent them an email with a pdf attachment including all the information on the prototype and how the interview has to be done.

ScreenCastifyPrototype and email in the pdf below are all working links.

After 3-4 days I received the tests.

Here’s how the pdf looked:

Firstly, I wanted to thank you for your participation in this prototype testing. I appreciate the effort and your time to complete it.

I am Mary, a web designer and I am working on a website for Holly’s Lounge. As part of this process, I invite real users to see if I am getting things right.

There are a few things to keep in mind that will help the tests run smoother.

  1. First, please be aware that I am not testing you, I’m testing our designs. There are no right or wrong answers and if there are problems, it’s not your fault, it’s a problem with my designs. The more problems I find, the better I can fix them.
  2. Second, please be as candid as possible. If you don’t like something or think it’s just plain silly, please say so! You won’t hurt my feelings
  3. Third, please think aloud as you navigate the site (and please navigate a bit slower than you usually would). Tell me what you’re trying to do, what you’re looking for, what you expect to happen when you click a link etc. And if you get stuck, please tell me that too. It helps me understand what is going through your mind and allows me to take good notes.
  4. Fourth, in order to keep the test as realistic as possible, I won’t be able to help you or answer any of your questions. But please ask them anyway, as it’s important that we hear your thoughts and comments.
  5. Finally, this isn’t a real website. It’s a mockup, so some of the links and buttons may not work.

IMPORTANT: Please use a Chrome extension such as ScreenCastify to record the testing and evaluation of my design and usability strategy. It will be more realistic if you have the camera on while you navigate the prototype. 

A few words for the Prototype:

It’s a fictional website based on a character. I chose Holly Golightly (Audrey Hepburn) from “Breakfast at Tiffany’s”.

Holly, as my client, contacted me to design her website for her Lounge Bar. It’s based in the most iconic location in Dublin, on Grafton Street.

**Here is my Prototype

Do you have any questions before you begin? Please reply to my email.

User Testing

Quick Introductory Questions:

  1. Age Range (18-25, 26-30, 30-35, 35-40, 40-45, 45-50, 50+)
  2. Gender (female, male, n/a)
  3. Have you ever visited a lounge bar in Dublin?
  4. If yes, which one?

Test Structure:

  • Does this prototype do what it’s supposed to do?
  • Do you think the website design matches its purpose?
  • What’s the first thing that comes to mind when you first open it?
  • Do the information architect and navigation make sense?
  • Can you find what you are looking for?
  • How would you describe the lounge bar in your own words?
  • Can you think of any other lounge bar that is familiar with this one?
  • Who do you know that would like this lounge bar? Tell me a little bit about his/her personality.
  • Would you use another device for this website? What about an app?

Closing Questions:

  1. Which page would you say was the hardest to use? Why?
  2. And the easiest? Why?
  3. Which page(s) did you like the most? Why?
  4. Which page(s) did you hate/dislike? Why?
  5. Any other thoughts?

Quick Introductory Questions:

  1. Age Range (18-25, 26-30, 30-35, 35-40, 40-45, 45-50, 50+)
    31
  2. Gender (female, male, n/a)
    Male
  3. Have you ever visited a lounge bar in Dublin?
    Yes
  4. If yes, which one?
    I don’t remember which ones as most of my friends took me 

Test Structure:

  • Does this prototype do what it’s supposed to do?
    Yes!
  • Do you think the website design matches its purpose?
    Yes!
  • What’s the first thing that comes to mind when you first open it?
    It looks very professional. Very straightforward.
  • Does the information architect and navigation make sense?
    They are really well designed.
  • Can you find what you are looking for?
    I can understand exactly where to go next.
  • How would you describe the lounge bar in your own words?
    Maybe a little more expensive than I usually go but overall it looks really nice.
  • Can you think of any other lounge bar that is familiar with this one?
    Most of them are in Dawson’s street.
  • Who do you know that would like this lounge bar? Tell me a little bit about his/her personality.
    Many of my friends for sure. Professionals and classy people will definitely go there.
  • Would you use another device for this website? What about an app?
    No. The website is perfect for this kind of bar.

Closing Questions:

  1. Which page would you say was the hardest to use? Why?
    None!
  2. And the easiest? Why?
    All of them. It’s a very straightforward website.
  3. Which page(s) did you like the most? Why?
    I really like the map. I understand exactly where the place is.
  4. Which page(s) did you hate/dislike? Why?
    None!
  5. Any other thoughts?
    All the information is really well designed.

David’s observations as he was navigating the website.

– The design looks very professional.
“It looks straightforward and similar to most lounge websites.
– Friends of mine would like to go.
– It wouldn’t be my first choice but if friends recommended it I will definitely go.

– All the information is really well designed.
– I like that you kept the map here as it is so it has St. Stephen’s Green and I understand exactly where the bar is.
– Good design, straightforward, easy to use.
– It looks like a nice place.
– Maybe a bit more expensive than I usually go to but it looks really nice. Maybe on special occasions.

User map navigation:

Home -> Book Now ->About Us ->Lounge ->Location ->Contact Us ->Home
 

Quick Introductory Questions:

  1. Age Range (18-25, 26-30, 30-35, 35-40, 40-45, 45-50, 50+)
    30-35
  2. Gender (female, male, n/a)
    Female
  3. Have you ever visited a lounge bar in Dublin?
    I have visited. I also looked them up online.
  4. If yes, which one?
    Grafton Lounge, Sarah or similar. 

Test Structure:

  • Does this prototype do what it’s supposed to do?
    Yeah! The one thing I would say, I missed a menu, a price-list.
  • Do you think the website design matches its purpose?
    Absolutely! It’s very similar to other websites for similar locations that I looked up before.
  • What’s the first thing that comes to mind when you first open it?
    I think this place is very classy. It looks like a special place to go.
  • Does the information architect and navigation make sense?
    It’s very smart. It’s very similar to other websites I used so I’m very familiar and know how to work it.
  • Can you find what you are looking for?
    Except for the menu.
  • How would you describe the lounge bar in your own words?
    Lounge bars are very classic and expensive.
  • Can you think of any other lounge bar that is familiar with this one?
    There are number of bars in Dawson street that remind me of this. Looks like Ivy in terms of its tone.
  • Who do you know that would like this lounge bar? Tell me a little bit about his/her personality.
    It’s quite wealthy, 30 something who’s working in the city, working in finance or any good jobs. Also for groups of women in special events. It looks like a special place.
  • Would you use another device for this website? What about an app?
    I would definitely use it on my iPhone. This is what I use most. I would not be interested in an app for a venue like this.

Closing Questions:

  1. Which page would you say was the hardest to use? Why?
    I wouldn’t think of any as hard to use. They were all really straightforward.
  2. And the easiest? Why?
    The location was very simple. Very clear. I like it that it was just a google map. I don’t need any text describing where it is.
  3. Which page(s) did you like the most? Why?
    The home page is lovely. It gives you the exact sense of what it looks like.
  4. Which page(s) did you hate/dislike? Why?
    I didn’t get any more information on the Lounge page. Maybe reputations. I would like to see some more menus or price-lists.
  5. Any other thoughts?
    Overall I really like it. The website was good. It gave me a taste of what an experience in the venue would be like. If it was my venue, I would like it to be my website.

Rebeca’s observations as she was navigating the website.

– I like the decor and colors. It’s cozy.
– The website matches the colors of the interior.
– Oh, it’s serving food.
– I would like to see the menu.
– Pictures and images are really nice.
–  The images are very lovely.

– I like that you put Instagram.
– About Us maybe a food menu, drinks menu, so I know how much.
– When I’m looking of it I’m wondering how much is a cocktail 
– I can see the gallery, I’m getting hungry (smiling)
– In the lounge, maybe here instead of seeing more interior, it would be nice to see what cocktails would be like, or maybe someone making a cocktail. See the kitchen, how are chefs
– For me, the aesthetic is one thing but I’m more interested in the food and drinks
– Definitely looks like a cool place but I want to see some of the goods
– The map is very clear. I can identify exactly where it is.
– Sometimes I like this Contact us when they have a timeframe of when they will reply back. Something like “Please bear with us and we will definitely reply back to you in 24 hours”. It feels more personal and quite interesting
– That’s really cool.
– There is no phone number. I like it when there is a phone number for a place.
– I really like it.
– I would definitely try it out.
-I miss a menu or a price-list.

User map navigation:

Home -> Subscribe ->About Us ->Lounge ->Location ->Contact Us

(translated in English from Greek)

Quick Introductory Questions:

  1. Age Range (18-25, 26-30, 30-35, 35-40, 40-45, 45-50, 50+)
    26-30
  2. Gender (female, male, n/a)
    Female
  3. Have you ever visited a lounge bar in Dublin?
    Yes!
  4. If yes, which one?
    Cafe en seine and many more in Dawson street and Harcourt 

Test Structure:

  • Does this prototype do what it’s supposed to do?
    Yes! It does what it’s supposed to do.
  • Do you think the website design matches its purpose?
    The design matches its purpose. It’s a nice design but there are a lot of images. I would like the logo to be bigger.
  • What’s the first thing that comes to mind when you first open it?
    Too many images.
  • Does the information architect and navigation make sense?
    I would prefer the dropdown menu. (burger)
  • Can you find what you are looking for?
    Yes, except for the menu.
  • How would you describe the lounge bar in your own words?
    It looks like a really nice lounge bar with style. It’s a bit vintage as well. It reminds me of the bars in Harcourt or Dawson’s street. It’s definitely a place I would like to go to.
  • Can you think of any other lounge bar that is familiar with this one?
    Sophie’s, Cafe en seine
  • Who do you know that would like this lounge bar? Tell me a little bit about his/her personality.
    Definitely women like me and my friends! Strong, independent and stylish 🙂
  • Would you use another device for this website? What about an app?
    To be honest I wouldn’t use an app for this venue. A google search is what I normally use. Open table is one app I am using to book in.

Closing Questions:

  1. Which page would you say was the hardest to use? Why?
    Didn’t find any hard to use.
  2. And the easiest? Why?
    In general the site is very easy to use.
  3. Which page(s) did you like the most? Why?
    About Us is the one I like the most. It has more structure. The gallery is really nice. I really like this page. Lounge as well.
  4. Which page(s) did you hate/dislike? Why?
    For Location and Contact Us you should probably add more context.
  5. Any other thoughts?
    Overall I like it. It’s beautiful and the style is very nice.

Eleni’s observations as she was navigating the website.

– Firstly I like it
– There are a lot of photos. Too much noise. They are nice but it would be better if they were fewer
– It’s clear where to Book now
– I can see the form
– OK!
– I can see social media in the footer
– In the lounge tab, there is a choice to book now
– It’s very good that there is a map in the location. We are very familiar with google maps and we use it very often, even every day.
– I can’t see the menu. I believe you have to add the menu, to be more complete and check what’s offers you
– Or some events, or a newsletter. However, you have a subscription which is the same

– What I usually look at most websites is the burger menu with a list. I don’t know if it’s useful for this one.

 User map navigation:

Home -> Book Now ->About Us ->Lounge ->Location ->Contact Us -> Home -> Book Now ->About Us ->Gallery -> Lounge ->Home

Final Prototype

Showcase how prototypes work across different devices

Based on my User Testings and all the research around my client’s mission and needs, I came up with the final prototype.

All the headers and paragraphs have the same typeface accordingly. All the buttons are the same shape, typeface, and capitalized. I removed the radius from all the boxes so now there is consistency in all the photos, images, and elements. I also included the phone number in the footer.

https://marvelapp.com/116db8he