Loading...

UX Design

Mediatech
Home / UX Design / Mediatech

Audio-Visual Services

Mediatech is a leading expert in educational technology design and installation including intelligent classrooms, digital conversion, video teleconferencing, and digital signage systems.

Role

UX / UI Designer
UX Researcher
Prototype Design
Responsive Website Design

Tools

Figma
Adobe Photoshop
Maze
Figjam
Adobe Dreamweaver

Client

MediaTech
March 2021- May 2021
12 weeks

CHALLENGE: Why was a redesign needed?

The primary challenge here was to redesign a site that satisfies the desires and needs of my client. We worked together to define clear goals for this project so that I could deliver a final product that met all expectations. My client did not have a clear vision for their desired website and brand redesign — our goal was to define the visual design features, brainstorm brand elements, and create a new style guide incorporating a variety of font combinations, iconography, and color palettes. MediaTech's website was on the website builder WordPress previously and had a few issues such as:

- Lack of ability to customize the website
- Information was displayed in a way that poorly conveyed the use of the product
- The visuals were inconsistent, making the design cluttered and difficult to find what was needed
- The website was not mobile ready
- The website did not convey this was a technology base company

Project Goals

How might we create a brand identity that aligns with Mediatech's values?

Objective 1

Create a brand identity that conjures feelings of simplicity

Objective 2

Ensure that it stands out from other technology websites as a more elevated option

Objective 3

All branding has a consistent and identifiable color palette that incorporates elements of the existing logo (for continued recognizability).

COMPETITOR ANALYSIS

01. LMG TECHNOLOGY

LMG covers all technical aspects of in-person and virtual shows. From load-in to load-out, we’re here to support you and do whatever it takes to get the job done right – because we believe that unforgettable shows are the product of strong relationships.

STRENGTHS

• Great quality products
• Social media presence
• Mobile ready
• Blog feature

weaknesses

• Slow loading time
• Outdated design
• Cluttered Website
• Does not represent a technology company

02. diversified

Diversified is a full-service systems and media technology integration company, originally addressing the technical needs of the broadcast, audio-visual, IT, and RF market segments.

STRENGTHS

• Offers alot of different services
• Very detailed about products
• Social media presence
• Shows insights

weaknesses

• Too many links
• Hard to navigate on mobile
• Broken links
• Animation feature seems buggy on mobile

03. Media Centric

MediaCentric™ is a full-service wholesale subcontract audiovisual and videoconferencing professional installation and commissioning contractor.

STRENGTHS

• Different color theme
• Clean organized layout
• Social media presence
• Lots of visuals

weaknesses

• Too many links in mobile
• Does not resize well on mobile
• Low quality photos
• Services pages seems basic

Content Audit

I started off the project by mapping out the current information architecture of the website and worked with the team to change the layout of information in a way that is more intuitive and user-friendly. This was done in order to ensure that once the user visits the site, they can find the information they need quickly and in an easy-to-understand manner.

Research

I conducted interviews and ran usability tests of the current site with 6 of MediaTech's Clients. Here’s what they had to say:
Client 1
"I feel overwhelmed and lost when I see this much information on a website”
Client 2
"The business website should be easy to navigate and visually appealing. This website has neither"
Client 3
"When I see a website like this, I close the window"
Client 4
"This website doesn't load properly on my phone"
Client 5
"This page looks boring for a technology company. It doesn't represent the company"
Client 6
"The website looked too old fashion"

Style Guide

As per my Research. I wanted the website to be modern, clean, and simple to use. I used the company logo color scheme to keep all marketing and branding consistent, which was a prior problem area for this client.

STRUCTURE

After the analysis of the current website state, it became apparent that the website would benefit from restructuring. We wanted the user to find what category fits their needs quickly. Below is the new structure of the redesigned website.

The ReDesign

Shown below is a side-by-side comparison of the old and redesigned version of the website. Some of the key changes include improved information architecture as well as a minimalistic design with consistent visuals.

website

Mobile Version

RESULT ANALYSIS

ISSUES

Simplify the site map
More photos, minimal text

FEEDBACK

Most users, use the mobile version
Add fade in/out feature

Live Site

Click me