Case Study: Responsive Web Design and Branding
UI/UX Design — Tourism Campaign for Africa’s most populous city (Lagos)
Brief
- Build an engaging and impactful brand campaign that promotes tourism on the country/area and target audience selected.
- Create a strong visual brand identity and a responsive website creating engaging, impactful and well designed experience for the users and optimised to meet business goals.
- Establish a consistent visual identity that carries through different marketing and promotional materials.
- Create a logo for the campaign that captures the direction, mood, tone of target audience.
Tools Used: Sketch, Photoshop, Illustrator, Principle, InVision
Target Device: Desktop and Mobile (iOS)
Individual Project: I did everything in this project from the research, to designs and testing.
Timeline: March 11th to March 28th
Process
UX Research
Lagos (Chosen Area)
The chosen area for my tourism campaign is Lagos in Nigeria (the geographical location is shown in image below). Lagos is pretty much the hub in Nigeria with a huge population density of 16+ million people which makes it one of the most populated cities in the world.
The problem: Millions of Nigerians have migrated to other parts of the world especially after 1990. Largest population of the Nigerian Diaspora can be found in the UK and USA to the extent London’s Peckham can be called “Little Lagos. As a result, there are about 15 million Nigerians living in the diaspora. The children of these emigrants born in the diaspora have lost touch with their culture and heritage.
The Solution: To attract and reconnect these young people back to their heritage in Lagos through music (festivals).
User Persona
To truly help target the campaign to a specific audience, it is important to define the target user which helps empathise and understand their unique individual behaviour and needs.
Both males and females are targeted between the ages of 18–30. They are keen to go home (Lagos, Nigeria) for first time and experience how life is there. They love to have fun and music plays a big part in this. Music is therefore used as a gateway to attract them.
UI Research
Design Inception
There are were 2 art directions (highlighted in different colours) that were considered (shown in the design inception sheet below).
Direction 1 is dark/night coloured theme with focus on music festivals and culture. The mood is all about having a good social vibe, festive, groovy. In terms of the visual language, shapes are geometric, straight and edgy to give it a primitive feel which relates to their heritage and culture.
Direction 2 is drawn towards a day time focused theme with food and activities surrounding the beaches in Lagos being the main sources of attraction.
Mood board
The two mood boards below represents the two art directions discussed previously. Mood board 1 feels more cultural, festive and groovy also with the patterns on the clothings and face painting.
Mood board 2 on the other hand is focused on day time activities such as quad biking, having a good time at the beach with drinks and spicy food.
The idea of the tourism campaign is to reconnect the target audience with their heritage, I feel direction 1 captures this the most in a unique, cultural way. Further more, the beaches and other attractions (in direction 2) could be better enjoyed in other countries.
Style Tile
The style tile helps translate the visual identity/direction of the website and brand through elements such as buttons, colours, imagery and typography.
Colours: To reflect the rich culture in Lagos, pan-african colours (Green, goldish orange, red and charcoal/smokey black) are selected which are colours of black nationalism. The dominant colours would be “charcoal black” and goldish orange as from further research, this colours represent Lagos the most (i.e this are colours of the predominant mode of transport [buses]). It is important to combine this colours properly so they do not clash.
Iconography: Icons within sub headers would be filled, also with a triangle shape (behind the icons) with a contrasting yet complimentary colour to make them pop. Icons used in the headers would just be filled and would not require the extra pop.
Buttons: The buttons used are with edges. The 2 rectangle shapes for each button were stacked on top of each other and a bit slanted to give that “non-perfect” primitive feel to it.
Typography: Various fonts (especially for the header) were explored as shown in the image below. Quite a lot of the African fonts had patterns which i interpret as being a bit cheesy for headers that would be used regularly on every page across the site. Anthropos is the font chosen for the header as it has a primitive feel to it, due to the inconsistency of the font.
For body text, Edmonsans is used which compliments the header well with niceties such as small caps, non-lining figures. In addition to this, Edmonsans is also a very legible across multiple devices thus suitable for sub-headers and body text.
Lagos Research
To further bring the Lagos vibe to the website and give it the right visual identity, I researched further into the city and its history. I discovered these four monuments below which represents only Lagos. I would use these as inspiration for elements that would form the visual identity of the website.
The Logo
For the logo, I started by doing some initial sketches shown below. In sketch 1, I started by exploring with patterns (seen in African clothing and artefacts) within the word “Lagos” but i felt it was a bit too cheesy. Sketch 2experimented with “Lagos” within a puzzle to reflect them reconnecting with their heritage. Sketch 3 used the common element (cap) the chiefs had in the ‘welcome to Lagos’ statue mentioned in the “Lagos Research” section above. I went with sketch 5 which had the African mask masquerade as it is a symbol that resonates with the target audience.
My concern here was I felt the logo was a bit too generic and did not fully represent Lagos. To solve the problem and make the logo resonate with the target audience whilst still reflecting the destination (Lagos), I merged the stripes (Iconic on Lagos buses) with the African mask and the primitive header font as shown below. I was very satisfied with the results as i feel it solved the prior branding identity concern.
The refreshing thing about the logo is that in tight spaces such as an app icon on the phone or an instagram profile, just the African Mask can be used as a symbol logo for the target audience to identify the brand.
The logo also works well on different background which makes it versatile as shown below.
Affinity Diagram
Affinity diagram was used to brainstorm all the possible sections within the website. The challenge here was refining the exhaustive potential sections on the website based on what appeals to the target audience.
Low Fidelity Wireframe
Low fidelity wireframe (for both desktop and mobile) was created to showcase how the content would be laid on the website and is broken down to 4 main sections.
Mid Fidelity Wireframes + Design Decisions
The designs were taken from paper into Sketch to create mid fidelity wireframes below. The design actions and decisions of certain features and sub sections are explained in the figure below.
High fidelity (Desktop Version)
The low fidelity wireframe is then converted to the high fidelity wireframe shown below. The home page section below has the monuments that represent Lagos (mentioned in the Lagos research section) which helps the visual identity to life.
Tab interaction in “Music Fest” page
A tab design was used so the user can efficiently transition from one music genre to another and get information about that genre. The design is made as intuitive as possible for the user, for example, an active music genre tab has a bold box around it with bigger font size than an inactive one.
Artist Info Hover
An another subtle yet intuitive design inclusion was quick way for the user to get a glimpse of artist without having to switch pages by hovering above the artist.
Responsive Design (Mobile Version)
The biggest challenge whilst designing for mobile was considering usability on the smaller screens with less real estate. After user testing, this was prevalent in the merchandise section where the user had to select the colours of the item. The “colours” section went through a few iterations as highlighted below.
The four sections from the high fidelity desktop version is converted to mobile as shown below.
Horizontal scroll in “Music Fest” page
Because of the smaller real estate on mobile, all the artist can not be display on one page, instead, a horizontal scroll is used.
Video Demo of Desktop site
Style Guide
The style guide shows the broken down elements of the website explaining how and the best ways to use them.
Branding
In choosing the branded items/products, it is important to consider where the target audience hangs around, what they care about and the context in which the branded items would be used.
Instagram
Below is how the brand’s instgram profile could look with the symbol logo (African mask) used as the profile picture.
Merchandise
I felt a simple, clean, modern and fresh hat and top with the the brand logo is what the target audience is likely to wear. It can be worn under the scorching sun in Lagos or during summer in the UK.
Tickets and festival wrist band
To be even more contextual, I created a wristband mockup and tickets which the target audience would have at the music festivals.
Final Website Prototype
Desktop: https://projects.invisionapp.com/share/7WRDEOM9SDF#/screens/354813000_Landing_Page_Section
Mobile: https://projects.invisionapp.com/share/Y7RDL6TM9PH#/screens/356245680_Mobile_-Landing_Page_Section-
Conclusion/Final Thoughts
- It would have been great to create the content for other pages in the site such as the “tickets” page if i had more time.
- A user further stated how I could have include some information about what could be done during the day as well (apart from the festival at night which i focused on).
- Overall, I am very pleased with this tourism campaign and thoroughly enjoyed creating and designing it. I felt i really captured visual identity of Lagos which was consistent across the website, logo and other branding materials. I think the visual identity also resonates with the target audience which is absolutely key.
Thanks for reading ! :)