UX/UI, PRODUCT DESIGN, BRANDING

VIVINT.SOLAR

Logo featuring the text 'THE LEAGUE' next to the Nike swoosh and the word 'TEAM'.

The Challenge

The sales organization needed a way to track and monitor in real-time their progress and stats.  They needed to hit certain goals and numbers in order to rise through the ranks and become dominant players in the field.

The sales side is set up like a football team.  It was so well done that Vivint Solar became the first organization outside of typical sports to become a part of Team Nike.

The app needed to not only reach the standards and needs of Vivint Solar but now also Nike.



CLIENT

Vivint Solar

ROLE

Lead Product Designer

TECHNOLOGY

Sketch, Figma, Invision, Lucid Charts

PROCESS AT A GLANCE

Discovery

Discover and research to define user scenarios and workflows

Wireframe

Use Cases, Work flow(s), Site Map, Wireframing, Major Interactions

Prototype

Visual design, Style Guide, Screen Mockup’s, Interaction

Validate

Get quick and often feedback from stakeholders and team members

Test

Meet and test actual users and observe user interactions and record results

SUMMARIZE

Validate and learn from users’ behaviors. Analyze user feedback and results from testing. Iterate as needed

The Solution.

To find the right solution, we needed to go back to the drawing whiteboard and start listing out what were the needs/ wants of both the business and the sales reps.  This is not an easy task when you are dealing with over 3,000 sales reps.  Everyone has an opinion and is eager to voice that opinion if given the opportunity.

Eventually, we have identified enough areas and journey mapped countless scenarios, we felt comfortable enough to start wireframing out some ideas (The great thing about wireframing, is it allows you to get out just enough of a pattern or shape to form the idea and create a story).

After wireframing and prototyping a few key areas, we were able to present the ideas to the sales team, and the executive team to get the buy-off needed to start in on the hi-fidelity mocks and get things ready for final rounds of testing/ iterations and finally developer hand-offs.

During this process, we knew that having too many hands in the pot would not give us the insight or feedback we needed to propel this project.  So we created a CAB of a few select reps that we knew would be insightful and offer the meaningful feedback we would need.

Three images depict various hand-drawn and written content on different surfaces. The first image shows a sketch of a webpage layout labeled 'League TV' with sections for 'League Tracker,' 'The Neighborhood,' and scores or stats. The second image shows a hand-drawn table with headings like 'Starter,' 'The Bigs,' 'Custom,' and notes regarding a leaderboard, scores, and personal achievements. The third image is a whiteboard with bullet points for various topics such as 'Personal Sports,' 'Combine,' and lists of categories related to leagues and rankings.
Flowchart with categories like "The League," "Media Center," "The Trade," "Store," "Neighborhood," "Recruiting," "Tool Box," and "More." Subcategories include audio, video, map, location, alerts, scheduled, proposals, and notifications. Organizational structure for media management and navigation.
Two men wearing baseball caps having a friendly conversation outdoors, one smiling and looking towards the other.
Since having access to the League live app, I now know exactly where I am at with my sales every day. I know how many more I need, I know if I am behind, hell, I even know what my buddy is doing and I can set personal goals to beat him! This app has made me more productive, focused, and on fire!
— Jeffery Morgan | Sales Rep

During the initial phases, we went through numerous versions of the design. Knowing that we needed to have a lot of information shown, but also keep it clean and edgy enough was vital.

Smartphone displaying a personal scorecard app screen with statistics: 6 AC, 2 permits, 1 scheduled, 1 install, 6 close. Breakdown for the day shows actual AC 6 against pace 468 and goal 500.
Smartphone screen displaying a sports app interface with text "Jason Bradley All-Star San Diego South," a league score of 0.47, league level stats, and other metrics.

These images reflect where we started from and where we ended up.  A lot of this was from constant “show-n-tell” with the CAB that we established.  We also had the buy in of the business and all the stake holders.

Mobile app score card showing a weekly graph and metrics. Lines represent ACs, sales, scheduled, and installs. Quarter pace stats: 468 AC, 156 sales, 78 scheduled, 78 installs. Tabs for AC, sales, scheduled, installs. Footer shows rhythm information.
Original Design
Iterated Design
Mobile app screen displaying a user named Jason Bradley with an 'All-Star' status in San Diego South. It shows a score of 0.47 for the league. Additional statistics include league level 18, office 7, region 23, division 48, and company 76. Contract types and financial metrics are represented with colored circles labeled as Loan, PPA, Lease, and Cash, all marked at zero.
Final Design
Man in a hoodie and cap looking at a smartphone at night with city lights in the background.
Having access to League Live has changed the game for me. I am more motivated now that I can see my stats in real-time. It allows me to keep tabs on my team, what we’re doing as a group and where we stand in the company. Killing it with this!
— David Morgan | Sales Rep

Mobile – Media Center.