Blending historical significance with modern functionality to create an engaging user experience.
CONCEPT: A website for a multi-use building in Detroit.
CLIENT: The Metropolitan
ROLE: UX/UI, Website Design
TOOLS: Figma
Problem
The challenge was to create a website for the Metropolitan building, but there was an insufficient amount of information and resources regarding the shops and restaurants located within the venue. The objective was to develop a thorough website for the Metropolitan despite these constraints. This required finding innovative methods to gather and display relevant content, ensuring users have a smooth and engaging experience that effectively highlights all the offerings.
Discovery
For this project, I needed to conduct research to understand what the Metropolitan building is and how I can make it stand out amongst its competitors.
This Section Includes:
Goal
Create a captivating website that showcases historical significance and provides an engaging and accessible experience for all users.
Plan
The action plan includes conducting research and collecting information about the shops and restaurants at the Metropolitan. This will be followed by designing wireframes, crafting a visually appealing layout, testing prototypes, and refining the website based on user feedback to ensure a smooth experience that effectively showcases all offerings.
The Metropolitan Building
Built in 1926, the building has recently been restored to its original neo-gothic grandeur inside and out. The building houses a 110-room Element Hotel by Westin, The Monarch Club, Lone Goat restaurant, and Somerset pop-up retail shop.
Competitive Landscape
I reviewed multi-use buildings suggested by the client for inspiration, and I also explored a hotel located in a historic space that I discovered independently.
Synthesize Findings
Ensuring a seamless integration of historical elements with modern aesthetics to craft a welcoming and accessible design. This was crucial to the client as it aligns with their vision of honoring the building's heritage while offering a contemporary experience to visitors.
A clean and easy to navigate interface will allow users to effortlessly find the information they need, enhancing their overall experience with the site.
The use of high-quality, visually appealing imagery enhances the aesthetic appeal of the website and can help capture the essence of the Metropolitan.
Design & Iterate
I created wireframes and a prototype to visualize and evaluate the layout and functionality of the design, aiming to ensure an end product that is user-friendly and efficient.
This Section Includes:
Hi-Fidelity Wireframes
I used Hi-Fidelity wireframes to visually represent how the design would look and function. These detailed wireframes helped me and stakeholders make informed decisions about the layout, interactions, and overall aesthetic, resulting in a user-centric design.
Prototype
I brought the high fidelity wireframes to life by creating an engaging prototype that showcased the seamless user experience and dynamic interactions of the design. The prototype not only captured the aesthetics but also allowed for user testing and iteration, ensuring that the final product met both the client's vision and the end users' needs.
