Developed for the city of Night City from the video game Cyberpunk 2077, this tourism website provides a content rich, user-centric experience.
Through user research, persona development, brand identity design, and user testing, this project aims to deliver a user-centric and content rich website that strengthens the connection between a city and it's potential tourists.
The current website for Night City lacks responsiveness and user-friendliness, hindering tourists from easily finding local events to attend, locations to explore, and potential activities to enjoy. This in unison with a lackluster visual identity makes it difficult for user's to connect with the Night City brand.
The goal is to create an engaging website that enhances the user experience by facilitating the discovery of activities, events, and locations, while also developing a stronger visual identity for the Night City brand.
To better understand the identity of Night City, a design persona was developed to help characterize the city at large. This included an overview of the city's environment and history, brand traits, a personality map, brand voice, visual lexicon, and engagement methods. The design persona helped in identifying the city as a West Coast metropolis with a distinctly vibrant identity and character.
To continue my research I conducted a competitive analysis between similar popular tourism city's in the West Coast region. The three direct competitor's I chose to compare were Los Angeles, San Francisco, and San Diego. My research revealed that all location's share a colorful brand identity as well as websites with specific tabs for things to do, events, and how to plan ahead. These insight's revealed what a user may anticipate from a typical tourism website.
From my research I was able to identify two majors groups of users who would benefit from the website. Person 1 represents our group of users who are young adults looking to enjoy the more exciting, nocturnal aspect's of the city. Person 2 represents the middle-aged demographic looking to escape from their mundane everyday life to enjoy the diverse offerings of Night City
Using the two major group of users identified from my research, I developed two user personas to not only help characterize the users, but adequately capture the needs and pain points of them as well.
To begin the ideation process, I wanted to get a feel of what the potential user flow could be. This lead me to generate a site map to visually layout the information architecture. I used my findings from my research and competitive analysis as basis for the user flow.
To test out early renders of potential brand identities and UI elements I developed three unique style tiles. The style tiles were inspired by my findings in both the design persona and competitive analysis.
-01.jpg)
-02.jpg)
-03.jpg)
The initial wireframes were developed within the context of the IA diagram and user needs. Having components that address user interest such as things to do and events are positioned on the homepage to engage them directly. The wireframes are fully responsive, designed for both desktop and mobile screens on Bootstrap's grid.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
I started my initial coding process by writing out the barebones HTML for each page. Once finishing the barebones content I added Bootstrap classes to each element to match it to the grid laid out in the wireframes. I held out on coding any CSS or JS until a mockup was made that clearly defined any styles or UI elements.
The newly updated brand identity combined aspects found in each of the existing style tiles while incorporating new elements based on feedback. The new brand offers a colorful, vibrant, and exciting identity that is representative of the city it's portraying. A neon palette gives the brand a distinct look while the use of gradients showcases it's diverse offerings.
The mockups were built in Adobe XD on the fully responsive framework of the wireframes and help to visualize UI elements and the new brand identity in context. The mockups showcase how the hierarchy of text and new brand palette act in unison within in the context of the website. The finished mockups also provided me a final model to begin coding the CSS and JS around for the website.
Using the first coded prototype of the website, this usability study was conducted in-person with two users. Both users were provided with a scenario and questionnaire to follow during the test. Through this study I was able discover how my site felt navigation-wise and how content was perceived. Both of the users tested found the site visually appealing and easy to navigate, and were interested in seeing more about Night City and what there is to discover. The site successfully had both user’s wanting to explore Night City after they tested it.
Based on the user feedback I found out I needed to fix the descriptions on individual activity and event pages. By adding more context to these descriptions I can provide an audience with more insight and these pages are effectively more likely to garner their interest. Both user’s also indicated they wanted to see more of the city itself through the website, which resulted in me adding more content to the location’s on the map section.
The final adjustments made to the website were informed by the insights gained from the user study. Emphasizing clear hierarchy, visual cues, and descriptive content allowed users to easily understand the site's navigation, enabling them to stay focused while seamlessly browsing. The final version of website runs through a WordPress template, allowing content to be effortlessly updated though custom fields.
Throughout the design process, I realized the importance of considering navigability and how incorporating exciting content can lead to unique user interaction and connection to a brand. By embracing various user needs in unison with the development of a visual identity, I learned how to enhance the user experience while simultaneously improving upon the existing impression of a brand.
