AltaMed: Civic Engagement Content Mapping
Role: Content Designer | Duration: 2 week Sprint
Project Overview
AltaMed was interested in redesigning its Civic Engagement webpage. Currently, this page focuses on how AltaMed participates in advocacy, policy-making, and civic engagement for the benefit of their client's health and well-being.
For this project I was tasked with taking a 2500 word document and creating a mock up redesigned Civic Engagment webpage for AltaMed. The client's goal for this redesign was to keep the same awareness around what AltaMed does for its clients while also offering resources that would allow for AltaMed users to become more educated about how and where they can make an impact on policy, voting, and advocacy regarding their health.
UX Techniques Used
-
Content Audit
-
Sketching
-
Wireframing
-
UI Design
-
UX Writing
-
Prototyping
Research
I began by doing a brief audit of the current Civic Engagement page. I was looking at the tone and style as well as the visual layout of the graphics and copy within the various modules.
I then read through the content document that AltaMed sent to me. This document contained the potential copy that Altamed wanted to be included as well as an idea of what graphics or module types they liked. I compared what they wanted to be added to the site to what was already there.
As this document was 2500 words I significantly edited down the content to be more a webpage appropriate length and kept relevant information that would allow users to have a more streamlined educational experience .
Wireframes
Once my initial edits were complete, I began to map out how I wanted the info to be presented on the page. AltaMed is developed through set modules, so its coding capabilities are limited. I kept that in mind as I brainstormed creative solutions to get the information across in a compact, attractive, and accessible way.
High-Fidelity Mockup
After having a rough understanding of what I wanted the page layout to be, I began creating the high-fidelity mockup based on my sketch, and the edited content document.
The client requested this new hero image for the page. I included it with the regular navigational buttons
This introductory copy was originally around 600 words. When editing it I noticed that there were 3 key themes present.
Presenting the introduction in this way allows for users to get a quick view of what AltaMed Civic Engagement is and how it can be useful to them.
The main request from the content document was that myvotemyhealth.com be prominently featured on the page. I decided that putting it right under the page intro would be the best place for it. I added a short tagline to catch users attention and a small description of what the site is about so that users will know where they are being taken and what to reasonably expect when they get there.
This section was a very small edit. AltaMed wanted to add 3 more Current Priorites, which can be seen in the top row. For this section, I just replicated what is already present on the Civic Engagement page with new icons that are relevant to the new priority titles and included some Lorem ipsum filler text at the request of the client.
There were many links and resources that the client wanted to be featured. Knowing that the scroll time of this page was already going to be quite long I decided that an accordion style module would be best to display this information.
This portion of the page was the wordiest. Altamed wanted detailed information about the 3 main methods by which they engage civically. Each method contained about 600 words of copy which I edited down heavily.
Once I did that I decided that the best way to put this information on the page without making it too long was to create a pop-out. When one method is clicked the corresponding info will slide out and overlay the page.
Health and political reports were needed on this page. This download menu I created allowed for the PDFs to be easily viewed and downloaded if need be.
If more reports were added I let the client know that the best method for that would be to make it an accordion menu instead that was organized by the subject of the report.
Here users can contact AltaMed for more information on their civic engagement efforts. A contact method was requested by the client. I decided a simple form would be enough. I also implemented the former hero image with an AltaMed blue overlay to give it a bit of style and to break up the solid blocks of color.
How AltaMed Engages: Popouts
See it in Action
Reflections
I presented this mockup to the stakeholders and they were very pleased. They had very minimal feedback and suggestions. Their main feedback was for the "Our Current Priorities" section in which they wanted some of the icons to be changed.
Once that was complete, I was given the go-ahead to pass this design off to the development team to be produced in Q2.