Meet Miami

Discover Miami's Vibrant Art & Cultural Scene

Comment

Inspiration

Inspired by Miami's mixture of various cultures, retro feel and Miami Vice, we wanted to showcase Miami's vibrant art and culture scene alongside Miami Vice's retro color scheme to create an interactive app for users to discover places of cultural significance through art. Art is a form of storytelling, and we wanted to share each community's story. The human experience unites us all, as does our struggle to come to terms with both the past and present. It is our hope that users will gain a better understanding of Miami's vibrance as they discover the vibrant art and culture scene, and carry it with them as they move forward.

What it does

Meet Miami is an app that provides users with an interactive map to explore and discover Miami's vibrant art and cultural scene. Various points of interests are denoted with orange stars, a pop up appears when the user hovers over the star, showing a picture of the location, and the name. After selecting the location, users are directed to a page with a brief description about the landmark, including current art exhibitions happening in the week, and highlights of each place. Each click of the button will take the user to the respective website to learn more about each event or highlighted place.

How we built it

We used Figma to create a wireframe, and walk through of the user experience, from initial landing page, to the sequence of what made sense, testing various layouts to decide on color scheme, fonts, and feel. We decided on Repl, and initially set it up in a CSS/HTML environment, and then recreated Repl in a React environment, so there would be a smoother transition and linkage from page to page, while still using CSS/HTML.

Challenges we ran into

Initially, we assessed our tech stacks to determine the best project that would be feasible for a MVP (minimum viable product). With Miami's vibrant music, art, and cultural places of significance, we narrowed it down to a few neighborhoods of interest. We met with mentor Nathan, and he helped us solidify our idea and gave us ideas about map interfaces. Picking a map interface was interesting, as we did not want to spend too much time trying to create a map when there are many available.

One of our team member's computers wasn't working last night, noooo!!! And then it decided to work again today, it's okay, computers get moody. And we're a team, so we work together :)

During the UI/UX design process, we went through several iterations before settling on our final one. Information needed to be conveyed clearly and succinctly, and easily understood by the user. Content, organization, and the layout of the app needed to be user-friendly, intuitive, and have seamless transitions.

We were able to integrate Repl with Github, the only issue was that the page did not populate. We included the repl link, if anyone would like to test out the site.

Time zones was a bit hectic, working across four different time zones: EST, CST, PST, and IST. Having a plan helped us to stay focused and work together.

Accomplishments that we're proud of

We are proud of our final product, and are amazed at what we can accomplish working together in such a short time! We really liked the features and transitions in the app, specifically, creating a star (marker) that would lead to a pop up page, the feature of hovering over an image to display images and text, and taking the user to the next page. This made the experience more cohesive and smooth with seamless transitions and interactions.

What we learned

We learned about the UI/UX design process, bringing an idea from an initial wireframe with mockups to building it out and making it into a reality using Repl and GitHub. Miami is more than Will Smith's, Welcome to Miami, and the beach life. We have a better understanding of the historical and cultural landmarks that make Miami unique, and are inspired to go and visit! Fun fact, Miami is the only city in the US founded by a woman, Julia DeForest Tuttle! :)

What's next for Meet Miami

On the landing page, users would be able to click on "discover" in the language that they recognize, and the app would then be shown in the respective language. In addition to showing cultural artwork, it would allow for exploration into various neighborhoods, historical landmarks, and would support upcoming talent. Meet Miami would also add in restaurants and the music scene for users to sample Miami's many flavors and artistic beats. Viva Miami!!

Built With

Share this project:

Updates