If a hiring manager was to ask, Hey Fredrick Can you tell me why you chose a career in UX ? I’d say, it’s the Government Initiative project and here’s why.
Why is SWAY Important?
Congress has managed to disconnect us from our daily routines and financial comforts. COVID 19 shows us a vital lesson in what transparency means and why it matters in government. Assuming we’re able to hold our elected officials accountable for their openness while ensuring they work with integrity.
Sending feedback and communicating with our politicians encourages transparency and creates a two-way communication. Our team designed an advanced technology tool to share more information publicly to enhance the sometimes informal relationship.
Project
SWAY Mobile Application Design
Role: UX Researcher Fredrick Williams
Timing: 10 weeks, 4 Sprints
Tools: Figma
Category: E-commerce, Educational, Informative, Art Direction
Deliverables: Branding, UI Design, Visual Design, Prototyping
UX Design Process
I. Research / Discovery
Survey
Competitive Analysis
Heuristic evaluation
Testimonials
User + SME Interviews
Affinity Diagramming
Problem Statement
II. Define
Persona
III. Ideate
User Flows
Divergent Design (Paper Prototype)
Mid-fi Wireframes (Divergent Designs)
IV. Test / Prototype
Wireframes Mid-fi Wireframes (Convergent Designs)
My Contribution
As the UX researcher and Co-lead UI designer, I led the direction on user research:SME interviews, and usability tests and took responsibility for summarizing the data for two rounds of interviews, pain point discovery, and organized the UI kit. I designed a Med-fi prototype for the signup/onboarding . I also contributed in presenting findings to the team, as well as the navigation between key landing pages. I was also responsible for inspecting the Med-fi design before the final send-off.
I. Research And Discovery
so why a career in UX | the creative Brief
I’d say, it’s the Government Initiative project and here’s why. I’m comfortable with using divergent thinking to unearth actionable insights to improve the efficiencies of company platforms. Participants’ use intrigues me, and I often wonder how they plan to locate themselves in a product. Since learning people comes very naturally for me.
Everyone On The Design Team shared a Different Opinion!?
We asked each other our definition of a government website, and all responded with different answers. We shared a good laugh with the assurance of knowing we'd find the answer from the surveying of users.
40 participants | how they currently navigate their Government
For functionality, 40 participants, aged 18-55 plus, 65% primarily used government websites for paying bills, tickets, or fees, 68% for communicating with elected officials, 66% for general city information, and 61% to search their local representatives' voting history. And for usability; 59% found it hard to locate contact information, and if successful, (54%) were frustrated by the site's complex navigability. Therefore, opting for external engines like Google for a more simplified approach to searching.
Gathering Insights | Competitor Analysis + User Interviews
We researched the local governments of five large cities and found websites overwhelmed with text, without an effective way for citizens to communicate. For example, take the City of Portland’s website, with everything under one umbrella, we rated it a challenge to navigate. And although the City of Denver stood out for its transparency, the images feel somewhat unconnected.
heuristic evaluation | the competitors
Industry Themes | facts i couldn’t afford to ignore!
I interviewed three users on their experiences of using the local government website to learn more about their use, the way they engage, and their satisfaction rate on contacting / communicating with public officials. The team and I also wanted to know how involved they were in local government for the emotional context.
Still undecided on a design direction
I love how I'm always still somewhat stumped on a design direction to take at this point, yet still enthralled by the research to test and configure a problem statement. Solving for UX is such a labor of love.
Pictured: Affinity Diagram from the user interviews of SWAY Mobile App Design Project
Designing an advanced technology tool to share more information publicly to enhance the sometimes informal relationship.
Pictured: Conducting User Interviews (Round 1) - 27 seconds from the SWAY Mobile App Design Project
Designing an advanced technology tool to share more information publicly to enhance the sometimes informal relationship.
Problem Statement
The frustrated, morally obligated user needs a way to gain information on all recent issues and upcoming decisions in their community, and once they have the information, they need a way to influence their government agencies to ensure accountability and execution of their needs.
II. Define
Meet Robert Garcia
After a qualitative analysis, we defined one persona as the user of SWAY based on their weaknesses. Robert Garcia, our persona, was created to affirm the feelings, motivations, frustrations, and habits of our users. I get a kick out of putting a face on the data, particularly for the way it personifies and amplifies my feelings toward a user. I feel even more empathy and connect even closer to their needs. It ignites the customer-centric focus of my design approach. Hi, Rob!
III. Ideate
User Flow | With Divergent Thinking
So, our digital citizen thinks of a government website as locally and as a platform that provides city and legal information. They become frustrated from the site's lack of intuitive ability to navigate it and find a contact. So, I wanted to design a concept for users to speak to their elected officials, in a way that is both easy to navigate and digestible. The team and I discussed our thoughts around our divergent concepts and agreed to take the direction of educating, informing, and transparency in our design approach.
User Flow 1
User Flow 2
User flow 3
UI Interface Toolkit
Following the divergent testing, I synthesized my findings and was able to create a customer journey which I presented and discussed with the team. These exercises formed a great foundation to move into feature ideation and prioritization. I volunteered to be the organizer of the UI toolkit to keep our remote space tidy!
How It Works | divergently Thinking
I prioritized a local and federal search filter at the top of the home page, thereby placing it in more prime real estate for users to locate to find a representative. I Also use an accordion-style filter. To save space on the screen while the user is in use, or is searching for a representative to contact, and I created a dashboard of politicians for the user to hover over and select from to initiate contact with a representative. And lastly, a confirmation page to reassure the user that their message would be returned on time.
Pictured: Low-fi design from the SWAY Mobile App Design Project
Designing an advanced technology tool to share more information publicly to enhance the sometimes informal relationship.
it feels so good to be wrong
I tend to have private laughs with myself at the end of the first round of usability testing, because, when you think you've figured out the solution beforehand, you tabulate and see where users discover something that might work better. I instantly pivot and continue with research, because The Usability test has taught me to take pride in being completely wrong about your design decision because it's the only way to find a solution.
this design had no short of, you know mistakes, or user confusion!?
The users' didn't have trouble completing the flow but did become frustrated with not knowing where their message would end up. Confused about who they were initiating contact, and doubtful of the promise to respond by tomorrow since it's something that I couldn't guarantee.
III. Ideate (Round 2)
approach Over simplified | but still not great UX
This design didn't test as well. Because I placed too many steps in the onboarding process. So in a sense, I overcomplicated the process and the users felt that it required information isn't necessarily applicable to each user. For example, some people have mobile numbers and not home numbers and then some people have one permanent address and not two.
Revisting the site map | Leverage Perceived Affordances
I went back to the site map in an attempt to assess the average time a user would spend in each section of the site. And considering there was already a lot of information to digest, as well as decision making. I utilized the user feedback, frustrations from user testing, and review of the sitemap to omit the unnecessary required steps. I didn't want to run the risk of users, becoming overwhelmed and not finishing either their goal or abandoning the entire task in general.
Pictured: Site map from the SWAY Mobile App Design Project
Designing an advanced technology tool to share more information publicly to enhance the sometimes informal relationship.
IV. test / prototype
Sway the vote | mid-fi
I added a smoother filtering option at the start of the user flow. With this design, the Government officials are filtered by bill number, political party, committee role, etc. Users' can also visit the profile of a public officer to find their contact and availability. The design feels more connected and is in a specific order after a specific user action, so they'll stay engaged, and the goal stays top-of-mind. And lastly, the confirmation of receipt helps the user feel better assured the process is complete.
Filter by Name, Role, or
Committee | Personalization
The enhanced filtering by name, role, and committee allows the user to feel reassured that they are contacting the right official. And now the user can click on an individual's profile to be redirected to their landing page for more information on their voting history, contact, and office hours.
Choose your official and redirect to thier landing page
I placed information important to users on the elected officials, landing page so that the user can become even more familiar with their work. I thought this would be a great way to help a user feel more connected to their government and increase transparency.
Additional Screens
If given more time, below would have been the team’s next steps:
Content testing to determine whether the written content is appropriate & suitable for the audience in question, and whether or not they are able to understand & comprehend it.
Lesson Learned
I found this all to be rather interesting because I allowed myself to move beyond the regimented design structure and loosen up some and think more creatively. How did I benefit? Up until now, I thought there to be one standard way to approach a project, divergent thinking approaches it broader and more creative. For the first time, I didn't box myself into a corner as a team member, I just wished I had known differently prior.
To paraphrase the key points from a conversation with my Flatiron UX Instructor, Neil. There won't be a ton of opportunity in your UX career to think and work divergently. Use this time to go beyond linear designing and ignore the constraints. A new invaluable design lesson that I can continue to learn with practice. Are you ready to SWAY?