LiquidLightproject.com Website Redesign

Role

Timeline

Deliverable

Tools

Product Designer

10 weeks

Responsive Website

Figma
Photoshop

finalcomp.png
again.gif

Overview

Liquid Light Design is an up and coming website/xr design agency ran by Kyle Piworkowski. As the founder, he felt that his website needed improvements in order to attract a higher caliber of clients. I was tasked with re-designing the website and improving the user experience for current and new visitors. 

Objectives & Goals

Screenshot (938).png
  • Improve the user experience of the site.

  • Modernize the visual design.

  • Increase traffic and conversions.

  • Build trust with potential clients.

Identifying User Pain Points

Before sitting down to design anything I wanted to get a clearer understanding of Kyle's pain points. After having a quick chat, I recorded the following:

  • Users couldn't tell what industry he was in or what services were provided.

  • Due to excessive information being presented, navigation of the site was difficult. 

  • Overall design is not cohesive. 

Identifying User Needs

With a clearer understanding of his concerns and what wasn't working, I then confirmed the following user needs: (Users include both the client and site visitors)​

  • Simple navigation.

  • Visually pleasing design.

  • View breadth of work.​

Core Users

Lina.png

Small Business Owner

kyle.png

Founder

Pablo.png

XR Enthusiast

Ideation

The first step I took was analyzing every page, then tallying every pain point and problem with the site. 

Homepage

HomepageMac.gif
iMacFrame.png

Pain Points:​

  • Ad hoc layout

  • Uneven spacing

  • Information overload

  • Illegible text due to small size

Portfolio Page

PortfolioMac.gif
iMacFrame.png

Pain Points:​

  • Ad hoc layout

  • Illegible text due to small size

About Page

AboutMac.gif
iMacFrame.png

Pain Points:​

  • Wasted space

  • Illegible text due to small size

Careers Page

careersmac.png

Pain Points:​

  • Wasted space

  • Illegible text due to small size

Competitor Analysis

I decided to research some of the best web design agencies in the business and take inspiration from their design language. 

CAMac.png

Wireframing

Next I created some wireframes in Figma using inspiration for the different companies I researched. The aim was to keep the new design simple yet modern.

Home Page

Homepage.png

Portfolio Page

Portfolio.png

About Page

About.png

Careers Page

Careers.png

XR Gallery Page

XR.png

Blog

Blog.png

UI Elements

Buttons

UI Elements.png

Color Palette

Typography

Final Design

The client built and is having their site hosted using a DIY website builder called Duda. There were some slight constraints that didn't allow me to completely implement the  designs from the high fidelity mockups. 

Homepage

FinalHomepage.gif
Frame2.png

Portfolio Page

FinalPortfolio.gif
Frame2.png

Services

FinalServices.gif
Frame2.png

Homepage

FinalHomepage.gif
Frame2.png