Banner.png
 

Client:

Pinion

Role:

Project Manager, Client Manager

Project Duration:

3 Weeks

Tools:

Slack, Trello, Figma, Miro, Zoom, G Suite, Google Forms, Keynote, Office 365

 

Project Summary

To apply UX and UI principles to Pinion’s beta MVP platform before taking the product to funding campaigns. Our team worked on Pinion’s user interface, while stakeholders worked on the customer-facing portal for upcoming campaign funding meetings.

 

Team Members:

Aleia Hayag, Victoria Rangel

 
 

Who is Pinion?

D Scott Pierce, the main visionary behind Pinion, heard time and time again people’s frustrations when it came to getting engaged with local and national level legislation. In addition to finding legislation and legislators, Scott’s vision would allow user’s to score that topic and share it afterwards on other platforms.

 
 
 
I want to offer users a centralized place to learn about their legislators or legislation
— Pinion's Founder, D Scott Pierce
 
*None of these concepts had been released.

*None of these concepts had been released.

 

Where can we help?

 

Our Starting Point

  • Pinion is currently building a unique space for users to learn, vote and share legislation topics. 

  • On the backend, customers in business and government roles can log in separately and view those Pinions among other things.

Project Goal

The project goal is to create easy access to impactful legislation, direct information to candidates, and lifting voices with a shareable scoring process is.

 
Frame 9.png
 
 

Market Research

Our team and client found great value in spending time finding and comparing similar concepts and brands already floating around the market. 

Spending a great amount of time analyzing websites and products from competitive and comparative brands to get an understanding of the current informational resources.

 
Market Icon.png
 
 

User Interviews

Our goal was to explore the current issues surrounding how people interact with and understand political information and legislation.

 
Frame 11.png
I want to be informed before getting involved.
— Anonymous Interviewee
 
 
 

Key Insights

We looked for people who regularly used smartphones or desktops, and who had an interest in learning more about politics or legislation.

  • I care about topics that align with my personal beliefs.

  • I don’t feel comfortable engaging in public conversations regarding politics.

  • I find that doing my own research is important to ensure that I understand and trust the information that I’m digesting.

  • I have a difficult time finding relevant and accurate information online.

Our Persona

We compiled all the data from these users and came up with our Persona, Mimi. As we are focused on designing around our users’ needs and goals, so this product is frictionless, we use Personas to see who those users are, and what they need.  Mimi served as that main user.

 
 
User_Persona_Mimi (1).png
 
 

Problem Statements

  • A community member who feels disconnected from the political sphere needs a way to find unbiased, verified information on legislation but finds it difficult because there is an overwhelming amount of sources with unknown levels of reliability and bias. 

  • A community member who feels the political space is confrontational needs a way to voice their concerns on national topics but does not want to be publicly identified because they worry about judgement from people outside of their close network. 

 
Frame 14.png
 
Frame 12.png
 

Continued…

  • A community member who feels passionately about important and personally relevant causes, needs a way to sift through all topics, because the information that is available can be overwhelming and difficult to find

  • An active voter who feels removed from important local legislation needs a way to procure information regarding local government, but does not because their trusted news sources do not cover in-depth on local topics.

 

The Design Process

 

Design Studios

Our team chunked up an 30 minute period into 5 minute intervals where all we had was a pen, paper, and lots of fresh ideas.

Rough Ideating

  • Easy, visible information

  • Simplified header

  • Organized components

  • Considering Gestalt Principles

  • Sorting, Filtering, Search

Image+from+iOS.jpg
 

Solution Screens

Screens.png

Key Insights

 

Usability Testing

We ran two rounds of testing and were looking to see how people would navigate the prototype and see areas where our users may have met some friction.

 
 
Usability Tags.png

Update Filter Visuals

  • During usability tests we found that while tags were 2 different colors it wasn’t clear which ones were the selected ones and which ones were not.

  • To clear up that initial confusion, we added plus and minus signs, to add or remove tags.

 

Add a Comment Section

  • The “Score the Legislation” page now had added support and importance scoring for simplicity, along with the option to be anonymous.

  • When users came to this page they found they wanted to also comment to explain their reasoning for what they chose, SO we added a comment section.

  • In addition, the client wanted phrasing to say “Topic” rather than “Legislation” to align with their vision.

Usability Comments.png
 
Usability Login.png

Enhanced Privacy

  • We also found that when users got to the sign up process, they didn’t feel that their information was secure.

  • A lot of users mentioned that, in a place built for sharing opinions, they didn’t want to face the potential risk of having their personal exposed.

  • Users were confused as to why there was no second step for the password confirm and also wanted a more clear indication of what was required of them when making a password.

 
 

Clarified Location Info

  • On our landing page we have a location selector that is used to help better curate the content for our users.

  • We first attempted to change the example information in the box into a zip code but this still confused users and many wanted to know if they could input things other than a zip.

  • This led us to change the title of the input box to clearly represent the final information, and we also added a confirmation cue so that users weren’t second guessing their input.

Usability Location.png
 
 

Pinion Style Guide

Pinion’s stakeholders had not reached the point of granular important visual concepts of what Pinion’s website would look like.

The client had minimal expectations with font, color or components. However, the client did want to incorporate the Pinion gear, especially in the ‘scoring’ process.

 
Style Guide P.png

Our Prototype

 
smartmockups_kfmy6fv5.jpg
 
 
 

Next Steps

  • Apply our process to build out Pinion sharing.

  • Repeat our process with the customer facing portal.

  • Create an interactive guide to show how the Pinion works. (Video or animation)

  • Research into the best way to represent the Pinion scoring process.

  • Explore Mobile Responsive Web for Pinion

 
mobile mockup.png

(These screens were created to show the stakeholders of Pinion, but were not designed based off user needs.)

 

Exploring For Mobile

  • Given more time, our team would have loved to explore responsive web for mobile. Pinion’s foundation is getting legislation into people’s hand to learn and score as easy as possible.

  • The users we interviewed preferred to digest important legislation on their computers, but we saw importance in creating an app for their platform.

Banner.png