LUSON MEDIA

At Luson Media, I brought my energy and expertise to the creation and maintenance of hundreds of Financial Service Professional websites. I worked with a team of other designers from different fields to craft comprehensive branding systems, and websites that would work seamlessly with pre-existed design frameworks. In addition, I created digital ads and other advertising materials for a range of clients to help them show up the best that they can online. I brought my enthusiasm every day (why yes, that is me participating in an annual hot dog eating contest), and prided myself on getting even heavy work loads done well, and done fast. 

Website Work: 5280rg & Educational Association

Regarding my website design work, I worked primarily within the oceanwp theme, and elementor and elementor pro to build websites. Within those two systems, further customization with .css and javascript were regular and varied. I pride myself on an ability to make the impossible possible with uniquely coded solutions, and always enjoy a puzzle. Me and the rest of the web team worked within a multisite structure hosted by AWS, though some FSPs had unique websites that required special exceptions. 

Meraki | New and Old

After being provided a style guide, written material, and images for the new Meraki site I had to craft a new vision that would align with shifting values, while incorporating a more modern design. This was a fun, collaborative process that incorporated a custom-coded service wheel with description pop-ups, content-centered design with shifting, fluid elements to encapsulate the reactive nature of the company. 

🌐
service wheel.html 
<div class="pie-wrapper">
  <div class="pie"></div>
    <!-- Labels -->
<div class="pie-labels">
  <a class="pie-label label1"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExMTkiLCJ0b2dnbGUiOmZhbHNlfQ==">Legal <br>Solutions</a>
  <a class="pie-label label2" href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExMjMiLCJ0b2dnbGUiOmZhbHNlfQ==">
  People <br>Solutions</a>
  <a class="pie-label label3" href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExMzAiLCJ0b2dnbGUiOmZhbHNlfQ==">
  Meraki <br>Concierge</a>
  <a class="pie-label label4"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExMzMiLCJ0b2dnbGUiOmZhbHNlfQ==">Finance & <br>Accounting<br>Solutions</a>
  <a class="pie-label label5"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjEzODIiLCJ0b2dnbGUiOmZhbHNlfQ=="
>Information <br>Technology <br>Solutions</a>
  <a class="pie-label label6"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExMzkiLCJ0b2dnbGUiOmZhbHNlfQ==">Compliance <br>Solutions</a>
  <a class="pie-label label7"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExNDIiLCJ0b2dnbGUiOmZhbHNlfQ==">Tactical <br>Coaching</a>
  <a class="pie-label label8"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExNDUiLCJ0b2dnbGUiOmZhbHNlfQ==">Marketing & <br>Public <br>Relations</a>
  <a class="pie-label label9"  href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExNDgiLCJ0b2dnbGUiOmZhbHNlfQ==">Sales <br>Acceleration</a>
  <a class="pie-label label10" href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExNTEiLCJ0b2dnbGUiOmZhbHNlfQ==">Advisor <br>Launch</a>
  <a class="pie-label label11" href="#elementor-action:action=popup:open&settings=eyJpZCI6IjExNTQiLCJ0b2dnbGUiOmZhbHNlfQ==">Product <br>Providers</a>
</div>
</div>

<style>
:root {
  --size: 350px;               
  --thickness: 200px;          
  --hole-size: calc(var(--size) - var(--thickness));
  --label-radius: 145px;       
  --label-shift: -55%;         
}

.pie-wrapper {
  width: var(--size);
  margin: 0 auto;
  position: relative;
}


.pie {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(var(--hole-size)/2), black calc(var(--hole-size)/2));
  mask: radial-gradient(farthest-side, transparent calc(var(--hole-size)/2), black calc(var(--hole-size)/2));
background: conic-gradient(
  from 70.4deg,
    #1578b9 0deg 32.7deg,
    #146a99 32.7deg 65.4deg,
    #1578b9 65.4deg 98.1deg,
    #146a99 98.1deg 130.8deg,
    #1578b9 130.8deg 163.5deg,
    #146a99 163.5deg 196.2deg,
    #1578b9 196.2deg 228.9deg,
    #44b853 228.9deg 261.6deg,
    #2a8736 261.6deg 294.3deg,
    #44b853 294.3deg 327deg,
    #2a8736 327deg 360deg
);

}



.pie-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pie-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  font-size: 10px;
  line-height: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: white;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}


.label1  { transform: rotate(0deg)    translateX(var(--label-radius)) rotate(-0deg) translateX(var(--label-shift)); }
.label2  { transform: rotate(32.7deg) translateX(var(--label-radius)) rotate(-32.7deg) translateX(var(--label-shift)); }
.label3  { transform: rotate(65.4deg) translateX(var(--label-radius)) rotate(-65.4deg) translateX(var(--label-shift)); }
.label4  { transform: rotate(98.1deg) translateX(var(--label-radius)) rotate(-98.1deg) translateX(var(--label-shift)); }
.label5  { transform: rotate(130.8deg) translateX(var(--label-radius)) rotate(-130.8deg) translateX(var(--label-shift)); }
.label6  { transform: rotate(163.5deg) translateX(var(--label-radius)) rotate(-163.5deg) translateX(var(--label-shift)); }
.label7  { transform: rotate(196.2deg) translateX(var(--label-radius)) rotate(-196.2deg) translateX(var(--label-shift)); }
.label8  { transform: rotate(228.9deg) translateX(var(--label-radius)) rotate(-228.9deg) translateX(var(--label-shift)); }
.label9  { transform: rotate(261.6deg) translateX(var(--label-radius)) rotate(-261.6deg) translateX(var(--label-shift)); }
.label10 { transform: rotate(294.3deg) translateX(var(--label-radius)) rotate(-294.3deg) translateX(var(--label-shift)); }
.label11 { transform: rotate(327deg)  translateX(var(--label-radius)) rotate(-327deg) translateX(var(--label-shift)); }

/* Optional hover effect */
.pie-label:hover {
  opacity: 1;
  color: #0F293A;
}
</style>
🎨
service wheel.css 
:root {
  --pie-size: 350px;    
  --label-radius: 135px;
}


.pie {
  position: absolute;
  width: var(--pie-size);
  height: var(--pie-size);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-labels {
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; 
}

.pie-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: white;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  padding: 0px 0px 0px 15px;
  margin: -10px 0px 0px 0px;
}

Genesis | New and Old

Like the Meraki project, I worked with a Graphic Designer within Luson to create a new branding guide for the Genesis company. Using this, I updated their outdated website into one that functioned better, while highlighting their full range of services and elevating the user experience with more comprehensive user flow. Per the client specifications, I was able to create a custom stock ticker that would scroll on the bottom of their site without the need to pay for any third-party extensions. 

📄
Ticker.js 
<div class="ticker-wrap">
  <div class="ticker"></div>
</div>

<script>
window.addEventListener('load', function () {

  var ticker = document.querySelector('.ticker');
  if (!ticker) return;

  ticker.innerHTML = '<div class="ticker-item">Loading market data…</div>';

  var coins = 'bitcoin,ethereum,solana,cardano,ripple,dogecoin';

  var url =
    'https://api.coingecko.com/api/v3/simple/price' +
    '?ids=' + coins +
    '&vs_currencies=usd' +
    '&include_24hr_change=true';

  fetch(url)
    .then(function (res) {
      if (!res.ok) throw new Error(res.status);
      return res.json();
    })
    .then(function (data) {
      ticker.innerHTML = '';

      Object.keys(data).forEach(function (key) {
        var price = data[key].usd;
        var change = data[key].usd_24h_change;
        var dir = change >= 0 ? 'up' : 'down';

        var item = document.createElement('div');
        item.className = 'ticker-item ' + dir;

        item.innerHTML =
          '<strong>' + key.toUpperCase() + '</strong>' +
          '<span class="price">$' + price.toLocaleString() + '</span>' +
          '<span class="change">(' +
          (change >= 0 ? '+' : '') + change.toFixed(2) + '%)</span>';

        ticker.appendChild(item);
      });

      ticker.innerHTML += ticker.innerHTML;
    })
    .catch(function (err) {
      console.error(err);
      ticker.innerHTML =
        '<div class="ticker-item">Market data unavailable</div>';
    });

});
</script>
🎨
Ticker.css 
/*ticker tape*/
/* Outer container */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* Moving track */
.ticker {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 35s linear infinite;
}

/* Each item */
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  font-size: 14px;
  font-weight: 500;
}

/* Name */
.ticker-item strong {
  color: #161819;
  font-weight: 600;
}

/* Value */
.ticker-item .price {
  color: #627793;
}

/* Up / Down */
.ticker-item.up .change {
  color: #17B022;
}

.ticker-item.down .change {
  color: #B01717;
}

/* Animation */
@keyframes ticker-scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Pause on hover */
.ticker-wrap:hover .ticker {
  animation-play-state: paused;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .ticker {
    animation-duration: 50s;
  }
}

Digital Ads

Stay tuned for more work examples!

Enquire now

Give us a call or fill in the form below and we will contact you. We endeavor to answer all inquiries within 24 hours on business days.