UX Designer


Vivint Solar.



SITE ARCHITECTURE & COMPONENT DESIGN



Overview - Site Architecture



I was assigned to do a full inventory of our website’s information architecture. The Lucidchart I put together contained all main pages, nav components, footer links, breadcrumb links, side lateral links and a callout to our hundreds of article and local city pages. I left out backlinks and inline hyperlinks out of the chart for simplicity sake.



Brief - We needed an inventory done of our .com site, cataloging it pages checking is links and backlinks. A full site architecture layout was needed for our strategic roadmap to be put in place.


Problem - We had an old site map created years before this ask but it was done on our old Headless CMS (Content Management System)’s code base. We’d need to map which pages were on the old and which ones we had already migrated over to the new.


Goal - Complete this project in one of our sprint periods in Lucidchart.



Outcome - Successfully cataloged hundreds of pages and laid out the chart inventorying every user flow.



Site Architecture



Overview - Variable Components



Brief - Design components that we could use on our webpages. Improve on our current ones and design additional ones according to our needs. Do inventory on what we currently already have and what we’ll need in the future.


Problem - Our headless CMS would only allowed a certain number of components within our plan. These newly designed components needed to fill all our use cases and edge cases.


Goal - Design components with variable flexibility in mind. They needed to fill all our use cases and edge cases. Do UX research and create mood boards determining through competitor analysis what designs would be most appropriate for our brand and functionality we hoped to achieve.


Outcome - Successfully designed over 2 dozen components that were designed to be fluid and responsive. I designed them to be as customizable as possible with the ability to change up margin, color and orientation within the JSON editor but still following our design system guidelines.



Component Library



Overview - Video Carousel



Brief - Vivint Solar's marketing team had a huge push to film and post numerous testimonial, help center, learn center, spotlight & core value videos. Where our Youtube channel used to house only a few dozen videos would eventually turn into hundreds. With this we needed a new component that could house as many videos as we'd like to spotlight, but also be elegant and compacted allowing it to be as modular as possible.


Problem - Our current customer review page held only static image block testimonials. Within each block there was a CTA (Call to Action) which opened a modal showing the embedded corresponding youtube video. These blocks were very cumbersome and led to horrible design when stacked on mobile device widths.


Goal - Design a new component that could accomplish housing all the testimonials we’d like to show within one section. Have the videos play within the component without having to use a popup modal. Allow a highlighted AAA WCAG accessibility transcript to show within or below the video frame depending on screen width limitations. Also provide hyperlink options to our Youtube channel.


Outcome - I designed a component that cold not only fulfill all those requirements but also have some interaction design that looked sleek as well.



Video Carousel Component



Overview - Card & Article Components



Brief - Update our card components to make them as fluid as possible.


Problem - There were some discovered issues with cards stacking on responsive devices. On mobile the user would end up scrolling 3 to 4 swipes down if there were more than 4 cards presented. When we implemented "Related Article" cards that number would shoot up into the dozens.


Goal - Design a carousel and slider option allowing as many cards as needed to be housed in a single row.


Outcome - We developed a way to interchange the layout from carousel to slider in the JSON with some simple Javascript depending on the appropriate requirements afforded by the layout. It was a very elegant and simple solution to what could have been a massive user experience headache.



Card Components



© 2021 All Rights Reserved to Michael Condie.