top of page

SDM Metro 

Feature Addition and Visual Re-Design

The Challenge SDM

The Challenge 

My Role: UX Research, UX Design, UI Design, Usability Testing

Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom

SDM Metro supplies electrical products and services to companies for their data center and building infrastructures. Currently, they get their sales leads and referrals from factory generated leads, word of mouth and participation in Industry networking organizations. This means that a portion of prospective clients will use their website to research and contact SDM Metro. If the website does not provide contact information and contact methods quickly, they risk losing referrals due to making their first impression, a frustrating one. 

​

After reviewing their current website the client and I agreed that their was room for improvement in this area and that I should research how the existing website's design and content could be changed so that visitors could easily make contact requests and increase SDM Metro's sales leads. Since the client would not be providing me access to employees or clients for research purposes, I decided early on to take a Lean UX approach to this project. I would start by researching the existing website and competition so that I could start the design process and user testing as quickly as possible. 

​

Current Website

Research SDM

Research

Competitive / Comparitive Analysis

SDM Metro was able to supply me with a list of direct and indirect competitors. Based on the competitors websites, I performed an analysis of the products and services being offered to familiarize myself with the market space and confirm their status as direct or indirect competitors. This exercise gave me a chance to confirm the information I was provided as well as get a feel for the information being provided online and the visual design of their sites. 

​

​

  • Landing Page Call Out or Pop Up

  • Prominent Contact Button or Link

  • Contact Form

  • Social Networking Links

  • Landing Page Contact Info Request

The Sales or Marketing Contact/Lead​ section above confirmed that the current website would need significant changes to meet our goal and add functionality the competition was already providing. The analysis revealed that my client is missing most of the methods the competition is using to provide efficient methods of communication for existing and prospective customers.

​

​

​

​

​

​

​

​

​

Adding these features to the site would be important but making the digital experience as efficient as possible for prospective customers seeking information would be maximized by a visual redesign of the landing page that's primary focus would be encouraging visitors to provide contact information. 

​

           Missing Site Elements

  • Prominent contact button or link 

  • Contact form

  • Email button or link and

  • UX text urging visitors to contact SDM

Informaton Architecture SDM

Information Architecture

The needed changes identified during the research phase did not require changes to the site architecture. The content and feature changes would be added to existing pages, the main page and the contact page. 

Design SDM

Design

Sketchs & Designs

I started by sketching the landing or main page keeping in mind the primary goal of the project. Once I had the basic layout of the page including all of the elements, I started to create black and white wire frames but quickly switched to color since I was focused on the one page. 

​

After over twenty design iterations, I felt I had one that worked with the corporate colors and reflected the brand and market space. Now, I was ready to create the first prototype.

Protoytpe 1: Usability Testing and Survey

​

​​

  • Staff product knowledge is important

​​

  • Store known for excellent customer service

I sent out the first prototype created in Adobe XD to users with a detailed testing script. The goal of providing multiple contact methods with minimal clicks was accomplished quickly as you can see from the results below but, I also got back some excellent suggestions for navigation improvements and the users started to tell me what elements and features they thought should be changed.

1

2

3

4

?

5

?

Testing also provided some excellent suggestions for navigation improvements and the test users started to tell me what elements and features they thought should be changed.

Suggested Improvements from Testing

  1. The "Contact" button in the upper right corner could have more contrast for people with vision impairment

  2. I think "Let's Talk" button could just say "Contact Us"

  3. Consulting, Testing, Surveys, Maintenance icons should be less prominent than the top menu and more concise

  4. There should be a Search option on the landing page

  5. Maybe add email link on home page

Protoytpe 2: Usability Testing and Survey

I created a second prototype that included the suggested navigation changes and had test users follow my script and complete a survey. I also added an email/social networking drop-down link on the landing page.

1

2

3

Testing also provided some excellent suggestions for navigation improvements and the test users started to tell me what elements and features they thought should be changed.

Suggested Improvements from Testing

  1. Having two contact buttons on the home page seems repetitive

  2. Services icons are still too prominent and competing with the top menu 

  3. The email and social links are not needed in the lightning bolt drop-down and hard to find

Final Prototype SDM

Final Prototype

The final prototype included the suggested changes and some small design changes that brought more attention to the Contact button and primary message about the services offered.

Link to clickable prototype

Next Steps SDM

Next Steps

My recommendation to the client was to add Google Analytics or similar site monitoring to analyze the traffic for the existing SDM Metro website to establish a baseline for site usage. Afterwards, apply the website changes that I have designed and again review the site usage to determine if the changes have produced the desired effect. If this is not possible, information could be gathered by monitoring how many inquiries you are receiving via the new site contact form submissions. 

bottom of page