I began working at SuperBrightLEDs.com in November of 2016 as a member of the web content department. My position was initially tasked with front end code maintenance, and product data updates to category landing pages and individual product data pages.
As the company has evolved and grown so has my position.
Today I work with our lead graphic designer to oversee a small team responsible for all user experience, design, navigation, and SEO improvements to the overall shopping experience of the website. We work closely with, and at times alongside the product marketing team to ensure that the information presented to customers is easy to understand and technically accurate. Often times jointly working on projects involving paid advertising and written content revisions.
Every project presents a unique set of challenges, and requires creative problem solving to meet and solve those challenges.
However in my time at SuperBrightLEDs we've worked to generate a process that is a guiding framework that serves as a rough outline for most projects we embark on. With the five main steps being data analysis, navigation and functionality mapping, design discussion and revision, implementation, and testing.
In an effort to make impactful changes we always begin with a data driven analysis on the performance of various portions of our site to evaluate the key performance indicators of any given page, category, product line, or site feature.
The proactive approach to performance analysis allows us to be forward looking in our project planning. Indentifying where things are under performing and where we shouldn't be messing with success.
Once we've identified a problem spot on the website we take the time to map out the portion of the site as it currently exist in a flowchart.
Then using that flowchart we begin to remap that portion of the site and its functionality. This allows us to understand in a clear visual view the category structre and overlap, and where a functionality is missing. Such as a guided shopping tool, rebate widget, a better filtering experience, or something totally new we'll need to dream up.
Additionally at this stage we do a lot of competitor analysis to understand their website structures, features, functionality, and product nomenclature. This allows us to create shopping experiences inline with industry standards while adding what we feel are design and functionality improvements unique to our website and product lines.
Once we've mapped out and decided on our desired functionality and design structure for a given project we move onto creating the actual content which will go into the website.
Usually this is a series of conceptual designs, or wireframes (see right) created by our in-house graphic designer which are then presented to all relevant departments in order to facilitate discussion as to what is the best implementation of any given navigation structure, feature, or educational content for the website.
Through multiple meetings and discussions these designs and wireframes are continually refined more and more until we reach a point where we feel like the overall quality and functionality has reached a point that it is viable for development.
As I said, this portion of the process is carried out primarily by our in-house graphic designer, however over the last few years I have worked to become more involved with some of the early parts of this step such as wire framing and building functional prototypes in softwares like Adobe XD. With her becoming more involved in the data and development gathering steps as well.
This has lead us to a position, and environment that is more collaborative with projects being completed quicker because there are less roadblocks at any given stage where only one person can handle the task effectively.
Using a data driven and iterative design based approach we are able to increase our accuracy in making site revisions that have meaningful impact right out of the gate. However there are still times where we are internally conflicted as to what the best way forward is, or we just straight up get it wrong. For this reason we lean heavily on A/B testing through tools like Google Optimize, and analytic data review with things like Google Analytics.
A/B or multivariate testing provides an upside in that they act as great tiebreakers for things we couldn't settle on internally as to what was the best way forward. In cases where an A/B test is not clearly defined or easily implemented we use the analytic review method to check in on performance a given number of days after the changes were implemented. This allows us to see if changes are working or not, and tells us if we have to go back to the drawing board.
Below are some screenshots of category landing pages that were redesigned using the method outlined above.
While the category landing pages were the most signficant visual changes made they translate into being a portal for larger category structure, and user experience revisions within the site. Additionally this method of design development has been applied to changes on product data pages, informational pages, and the sites top level navigation bar.
Clicking on any category landing page image will take you to the live version on SuperBrightLEDs.com where you can explore the overall structure and site as a whole.
