Project:

Plugable Website Launch

 

Location & Date:

Plugable - Redmond, WA

Winter 2018 - Winter 2021

Role:

UX Researcher

Interaction Designer

Visual Designer

For almost a decade, Plugable’s website was hosted on Wordpress and had many reoccurring problems. From slow load times to the pages not even displaying. Not only did Wordpress provide many limited back end capabilities, but also limited design options as well. We had over hundreds of blog posts, 120+ product pages, and many more useful information. How were our users supposed to get this information when many couldn’t even navigate our website?

2018 was when the conversation began to transfer our website over to another platform, Shogun and Shopify was our choices to host our website needs. As the new Graphic Designer with no web or UX/UI experience, this project sparked my love for interaction and visual design.

 
Artboard – 6@2x.png
Artboard – 13@2x.png

Create Compelling Visuals

I was given the opportunity to create compelling and effective web visuals for our new website. I collaborated with the web developers to understand the constraints of the new platforms. Design decisions were focused on helping users navigate our website to find product or support information they need.

Research

I began by researching our competitors. Asking questions such as, “How are they displaying information? Product information? How are they guiding users to reach support and what does that look like? How are they displaying their home page and how is that successful?” I also reviewed our website to see what needs to be displayed and understand the limitations of Shogun and Shopify.

 
Artboard – 11.png
Artboard – 12@2x.png
 

A/B Testing

After gathering insightful information, I began creating wireframes. Side note: this is when I started a UX/UI course with General Assembly to better understand the project and to build UX/UI skills. While taking this course, I adapted the knowledge I gained to the projects I was working on. I quickly realized how important user tests were and applied it to my works by conducting A/B tests, which helped me drive design decisions.

3, 2, 1 Launch…

Once we all agreed on basic wireframes, I began to design out fully fleshed out mockups. When the developers implemented my designs, we used feedback loops for any edits I thought was needed. We also used this time to conduct tests before launch.

 
21 - All@2x.png

As a result of the website project, we were forced to create changes in our branding such as colors, type, imagery, etc. I gained knowledge not only in UX/UI but also web accessibility (Plugable website scored 100 in), basic HTML/CSS, and responsive design. I also found efficient ways to create mockups with preset brand assets in AdobeXD and translating our designs to our web developers. We’re continuously learning even after the website has launched. We always try our best to create more efficient and effective solutions for our customers.

Previous
Previous

WFH Survey Landing Page

Next
Next

Bump App