Case Study: Tinto at Five
Tintoatfive.com aims to promotote the different Latin American cultures that can be found in London through the services they offer to the residents.
Tinto at Five is a bespoke and dynamic website I developed for my master's degree in Web Design and Content Planning. I covered different phases to complete it successfully, from concept to implementation and monitoring. Every phase of the project was presented in class, where feedback was provided and changes were made based on the suggestions.
Concept
When I talk about my country to people who are not Latin Americans, I notice that most of them don't know what I am referring to when I mention Latin America, or where Colombia is or they think that ColOmbia and ColUmbia mean the same. This occurs because the Latin American community in London has not gained as much recognition as they should. Therefore, I decided to creat a website where users can learn about Latin America and find places or events where they could experience the different Latin American cultures.
The aim of my website is to introduce the Latin American community to people who would like to experience it in London. The information displayed on my website will focus on friendly facts about Latin America, and every page or business mentioned will be an opportunity to teach about this community to users.
Research
This part of the project included different steps, such as analysing cognate and non-cognate websites, a SWOT analysis, revenue generation, and identifying competitors.
This research helped me to find things I could implement to my website and things I should avoid. For example:
- Having a multilingual website helps to reach more users, therefore, I will consider adding Spanish and Portuguese to my website at some point.
- Articles such as Top ten..., Things you should know about..., and Upcoming events..., draw a lot of attention to users.
- Colour contrasts, line height, accessibility, quality of images and content, are important point to keep users coming to the website.
- Clean backgrounds make the images to stand out and the information to be easier to read.
Planning
For this phase I was able to identify my target audience, technical underpinnings and the visual aspect of my website.
Commodity
I created 2 user personas and I designed user journeys based on typical scenarios that my potential users could go through to acces to my website.
I did quantitative research, a six question survey that was answered by 13 people between the ages of 27 to 50. Also, I conducted an interview to a pensioner as part of my qualitative research. The results of this research allowed me to understand more about my potential users, concluding the following points:
- 92% of the interviewed people like supporting businesses, but in the last few weeks, over 60% have not used any service provided by a Latin American business.
- As customers, two of the businesses that drew their attention the most are restaurants and grocery shops. However, something that persuades them to learn a new culture is the curiosity of knowing more about their lifestyle (35%) than to try new dishes (27%).
- When asked if they were familiar with the Latin American community in London, 62% said yes and just 8% said no, and fortunately for my project over 92% said that they would be interested in knowing more about the Latin American community in London.
Based on these results I created two user personas:
James Aitken. He is 65-year-old and retired. He was a journalist, meaning that he likes researching, reading, and is open to new experiences. He loves spending quality time with his loved ones and going to social gatherings as he is a very social person. His goals include trying new gastronomies, improving his foreign-language skills, he speaks Spanish and French, and enjoying his retirement with his family and friends.
Some frustrations of Aitken are not finding enough people to practice his Spanish skills. This means that having a website that tells him where to explore the Latin American community in London can be useful for him as these are places where can find people to speak Spanish with.
Also, he struggles to find new places to take his loved ones. Therefore, this website can help him too as he will be able to see these places’ images to make sure that his family would like it. Another frustration he has is not knowing where to explore a different culture within London, as he is used to travelling when he wants to explore a new environment.
Lilly Esposito. She is a 28-year-old and works in customer service, full-time. She knows that supporting local businesses is a way to build a strong economy and community. She was born in Italy and moved to London when she was a teenager, meaning that she has already explored different cultures, making her more open minded to new cultures. She is a very social person. Her hobbies include reading blogs and watching videos of people showing their lifestyle in different countries as she feels that these videos help her understand different traditions/cultures.
Her goals are to open her own catering service, so she would love trying new dishes and ingredients. Also, to learn a new language and explore new environments. However, her frustrations include the lack of knowledge of other cultures and not knowing how to get involved in other communities. She does not have enough time to meet new people or search places where she could socialise.
Also, I consider a list of different touchpoints that users might encounter before visiting the website:
- Social media – customer acquisition.
- Word of mouth – people trust family/friends for referrals.
- SEO – easy to find for curious Google searchers.
- Blog content – quality content will draw user’s attention.
- Press releases – to reach different users.
While visiting the website:
- Navigating – finding place they would like to go.
- Blog posts – reading interesting/motivational stories.
- Vlogs – watching entertaining videos.
- Photography – looking at beautiful images.
- Social media – following content on social media.
- Newsletter – Subscribing to the newsletter.
After visiting the website:
- Marketing emails – new content notification, they will come back if they like what they read.
- Community management – positive interaction with users on the different platforms.
- Opportunities – let users know about opportunities to be part of the content, through personal stories or business information.
Additionally, I created a user journey map and sketched the different steps that users could take as a visual example of the journey of a potential user.
After having a clear idea of what my target audience was going to be, I worked on the information architecture of the website. I wanted it to be user-friendly, easy to navigate.
Firmness
This is the phase where I decided all the technical underpinnings of the project. Tinto at Five is an informational website, and at the beginning it is expected to have a low traffic. Therefore, I decided to use Clook as the hosting platform because of the price, the familiarity I already had with this platform and the 24/7 customer support.
Also, for the front-end technology I chose HTML5, CSS, and a bit of Vanilla JavaScript. As a Version Control System, I was doing daily backups, and used an external hard drive plus savind all documents in One Drive. And for the Content Management System, I used WordPress as it is an open source, with a good user interface and a helpful user community.
Delight
For this stage, I had to consider the visual design of Tinto at Five, considering look-and-feel with respect to my target audience and the niche I am in.
This is the moodboard I designed for my website. I wanted to show the feeling I wanted users to have when visiting the website: calm but persuading people to explore. Some images are showing places from Latin American too, as I wanted to show the hints of colours that I could be using for the website.
Also, I worked on a quick layout example, so I could have a visual example of how I wanted the information to be displayed and a static mock-up so I was able to show some of th eideas I had for the design.
Implementation and Completion
After working on the prototype mentioned above, I was able to set a number of companies, a total of 15 companies, that I had to interview to make the website interesting enough for my users. Therefore, I created a Gantt chart so I could set deadlines for each element.
All content was created by me: photographs, interviews and blog posts. Except some images from the homepage as I wasn't able to find photographs that could draw as much attention as I needed for the homepage, and due to the lack of time I decided to download free royalty images until I can replace them.
Once my website was ready to launch, I asked for feedback from some users. This feedback was very useful as it made me realise simple things that could be changed to improve the experience of the users. For example, adding the location of the place to the excerpt of the businesses improved the seraching of the users, or using bigger images on the homepage persuaded the user to check a cateory from the website.
Building it
I built Tinto at Five with HTML, CSS and WordPress as my content management system, using a total of six plugins, including MonsterInsights, Advanced Custom Fields and Yoast SEO.
I designed Tinto at Five with a mobile first approach design, therefore, its design is ready for different devices adn accessible for many people. Also, I was planning to use Mapbox for the maps shown on the website, but I decided not to, keeping in mind my target audience, as most of them are used to Google map.
Future plan
I feel happy with the website and I would like to keep working on it, by adding Spanish translation to it so it can reach more users. I would like to keep writing content, adding new posts to the blog and finding more great local businesses. Also, I would like to replace the four images from the homepage to photographies taken by me, so I can make this website as unique as possible.