MetroMesh Media

✤ UX Research ✤ UI Designer

Offering dynamic out-of-house outdoor advertising solutions.

challenge

MetroMesh Media is entering into a crucial stage of their timeline, where their onlie presence and client interfaces will play a major part in receiving more funding and interest from investors. I was hired to them ensure their site is user-friendly, responsive, and accurately represents them as a company. They wanted MetroMesh Media to communicate to its' clients that they're modern and innovative, offering exceptional out-of-house advertising sevcs.

solution

(1) Design a consistent brand identity that is representative of the company they aspire to growing-- modern and innovative

(2) Develop an inventory booking system that allows new and current clients to reserve a space in the LED display screens.

(3) Create a dashboard that allows clients to intuitively manage their advertisements and view key metrics.

(4) Ensure the site is user friendly as well as responsive for mobile devices.

How might we use technology to connect people and ideas with innovative solutions in media services?

01discover

research objectives
  • Find why companies have chosen to work with competitors like Firefly.
  • Learn how industry leaders in the space have succeeded.
  • Discover what the unique niche of MetroMesh Media in outdoor out-of-house (OOH) advertising.
  • Better understand the context of the companies that choose to participate in outdoor OOH advertising.

Overview of the competitor's analysis

S.W.O.T insights based off competitor's heuristic analysis.

02define

key insights

Offering clients a free trial will help differentiate us.

Unique Niche: dynamic advertising x food delivery.

Importance of building user trust as a start up.

Inventory booking system user flow.

03ideation

Below are few of the key screens for the inventory booking flow. Initially I planned to have the order summary along side the booking process. However, I found this made the page far too cluttered and would ultimately give the user a cognitive overload. As you see for the final designs, the summary is changed to be on the confirmation page.

By making this design decision, I was able to incorporate more white space. When designng forms or similar user flows, having white space can be crucial. If there is too much content on the page the user is much more likely to get overwhelmed and close out of the site before ever finishing the flow. When there is more white space, it appears to the user as less of a commitment, making them more likely to complete it.

Low fidelity wireframes of some key screens

04 design & iterate

We ran into a bit of a bump in the road near the end of development. The availability of our updated product was not going to be ready in time.

However, we didn't want to postpone the entire booking system. It was important to be able to show key components of our company to potential investors. That's when we chose to pivot.

The inventory booking system was going to be temporarily changed into a "join our waitlist" flow while we wait for our inventory to be available.

The solution let us still finish development with only some minor tweaks. Additionally, we still have the original inventory booking flow ready to be implemented when needed.

Key screens for changing the bookings system to a waitlist.

One of the biggest lessons I've learned throughout my time with MetroMesh is how crucial design systems are for pixel perfect designs as well as collaboration between designer, developers, and other co collaborators.

Since the creation of the design system, time spent in production has decreased by almost 50%. The system has helped us meet our deadlines on time and guided me throughout the design process, ensuring consistency along the way.

Few pages of my design system for MetroMesh

05 final designs

06reflection

design decisions

(1) I chose to use a lighter hue of their brand color as the site's accent color. I decided this because there was not enough contrast between the brand color and the black background. By incorporating the lighter shade, it has helped with the information architecture of the site as well as the overall appeal.

(2) Being a startup based in New York City, I wanted to incorporate a lot of urban photos with high contrast. The photos help the site communicate what the modern and innovative aesthetic that we were going for.

(3) Due to the tight deadline, the site redesign was greatly limited and involved minor changes. The majority of the teams time was spent towards developing the new features of the site in time for our launch date.

success

Throughout my time with MetroMesh Media, I have been able to successfully achieve fast turn arounds and manage multiple projects simultaneously.

growth opportunity

I learned a lot about how to effectively collaborate cross-functionally with the software engineer team. It was crucial for me to ensure my designs were consistent and achievable for the development phase to go smoothly.

other work