Non-profit now

I interviewed the main stakeholders (Marketing team) about their target market and current user base analytics. Using a variety of research methods such as ecosystem mapping, an impact effort grid and developing a project plan the team I was able to share data about:

• Competitors
• Target pain-points
• Target users
• Uncover demographic data
• MVP features & functions

• When defending UX decisions and delivering proofs I would refer to these personas taken from samples of real users provided by the marketing team at the beginning of the project.
• Using a mixed-method approach to developing the personas by involving stakeholders, collecting real customer data from the marketing team and user research testing on site.
• The personas focused on information about context, problems, and motivations.This information was presented to the product team prior to the first round of drafts as pdf's to the product team.
• Impact made on design included characteristics such as default larger type and no grey type, the consistent use of buttons and drop downs whenever necessary and rollover states that were very pronounced and smooth.
• Reflecting back on the personas during the mobile phase of development to build a screen that was expected and consistent with the desktop version however, tailored to a youthful experience.

Benefits:

• The map forced conversation and an aligned mental model for the whole team. This shared vision is a critical goal of journey mapping, because, without it, agreement on how to improve customer experience would never take place.
• Second, this map was able to define the foundation's opportunities to engage with current and future fundholders, thus potentially increasing donations for the non-profit.

Using a mix of human-centered design methods:

• Design principles to align themes and cluster them in a post-it note exercise in order to find common variables.
• Prototype report card worksheet on certain high profile pages to track and validate assumptions and iterations.
• Prototype mapping identified important improvements to be added by incorporating the user journey map and identified any shifts that needed to take place.
• Brainstorming session with the marketing department uncovered some valuable key points to be addressed before prototyping.
• Paper and pencil crude prototypes / drawings and low-fidelity wireframes helped to solidify ideas before presenting to stakeholders as polished proofs.

Low fidelity wireframes were mostly internal organization and planning tools which would later become high fidelity wireframes for the home page and other MVP pages for the soft launch approval.

• Low fidelity (paper & pencil) wireframes were easier to produce
• Testing was not needed
• Only one iteration was used
• The main purpose of the sketches was to roadmap the design production process and arrange content into a new responsive grid layout.
• Knowledge about my users and their goals influenced my sketches by keeping the layouts clean, uncluttered and consistent.
• Although this stage was internal it allowed for quick iterations based on content direction changes.

As per client request Hi fidelity wireframes were delivered in the form of working prototypes in the webflow browser. This was a first for me since this its mostly a developer tool, but I was able to quickly create master layouts that adhered to clean code production.

• To roadmap the design production process
• Initial testing proved positive reception and results.
  
• 90% overall page approvals within one iteration site wide!

Prototype testing was performed on pre-screened candidates by the marketing department consisting of user groups who interact with the current site segmented by device, platform and use case. The tests were carried out on a staging site once pages were approved by participants at the foundation on a timely basis. Results were better than expected with users reporting:

• Ease of use
• Responsive UI feedback
• Micro copy interactions for added guidance
• Increased legibility and readability associated to larger and clearer typefaces
• Crisp and colorful graphics/imagery

Once I received approval on a master page layout and the visual display system I was able to flesh out pages into expected results as live prototypes for CMS editing.

• A corporate visual style was distilled from their print brand guidelines.
• I was inspired by IOS and material design guidelines, modifying a balance appealing to their target base on Desktop and tablet while modifying mobile for younger users.
  
• Web, tablet and mobile platforms
• I'm most proud of the speed to launch by prototyping in a developer tool and using a growth driven design model to supply CMS features on the back end after launch.
• Since most of the audience was in the 55+ category, I made more use of the real estate by making type and features larger with plenty of interactive feedback in the final designs.
• Designing for seniors was challenging because everything had to be visually tweaked for the audience. Turns out it was no different than beginning with a platform that was ADA compliant as my starting point.