project summary

Growing a premium mobile experience for GreenPortfolio's users.

UX Design
Product mockup
Client
GreenPortfolio
Project type
UX Design
Project year
2021
the mission

Redesign the GreenPortfolio site to better support the growing audience of mobile users.

the outcome

A thoroughly tested site designed with mobile users in mind. Optimized for readability, ease of access to information, and setup for future growth.

the impact

Improved user experience, optimized information architecture and improved layout based on insights gathered during user testing.

services
  • User Experience Design
  • Information Architecture
  • Adobe Illustrator
  • Adobe Xd
press
See full case study >
GreenPortfolio mobile site mockup
Low fidelity mockup sketches
High fidelity mobile site mockup screens
GreenPortfolio mobile site screen grabs
No items found.

“Mel was able to translate our requests into an optimized user experience. She utilized a mobile-first approach and provided a high-fidelity prototype with recommended updates based on research and user testing.”

Elizabeth Landau, Co-Founder of GreenPortfolio
case study
GreenPortfolio logo
Background

GreenPortfolio is providing users with a platform to review financial products with a focus on climate-friendly products that meet the following criteria:

  • generally available to anyone in the United States
  • have a low dollar entry requirement
  • invest the vast majority of its funds in renewable energy production or development.
The Challenge

They identified the majority of users accessing the site from their mobile devices and recognized that the site had not been optimized for that type of interaction. In order to encourage users to not only visit the site, but regularly return to the site, and share it socially, they reached out to get assistance with the effort.

The Solution

To address their concerns I would approach this project with a mobile-first approach and provide them with a high-fidelity prototype with recommended updates based on research and user testing.

Market Research

Market research was conducted and provided by the NYU Stern Consulting Project.

Source: NYU Stern Consulting Project presentation deck

Here are a few key take-aways from their research:

  • Willing to Switch - Users have interest in finding green financial products but have various pain points associated with doing so.
  • Awareness - Users do not have enough insight into what is involved as far as what is available and what the costs of switching might be
  • Getting the word out - There are clear paths for increasing awareness through advertising, education, and expanding the product.
  • Where to start - There is a need to discover the expectations and needs of GreenPortfolio users to provide them with a product that will delight.

While the goal was clear, GreenPortfolio wasn't sure where change needed to happen. They had data, but what was needed was user feedback.

Research Questions

The importance of this effort came to light as GreenPortfolio, in an active stage of growth, prepared to represent their user base to possible investors. They needed to show that the enthusiasm users felt for green investing was being captured by the site.

Research sought to discover insights and trends related to investment information resources and tools.

​​​​​​​“Among all the activities that the respondents think would reduce carbon footprint, Renewable Energy Investment was seen as the most impactful.”

Source: NYU Stern Consulting Project for GreenPortfolio

Direct & Indirect Competitors

My competitive analysis identified the leading competitors. First, direct competitor, nerdwallet, and indirect competitor, the balance. I focused on mobile sites that offered financial product and service reviews.

Competitive analysis of Nerdwallet and The Balance

User Testing

I started with user testing conducted on the current GreenPortfolio site, and had users access the mobile version to gather insights on any pain points they were currently experiencing, as well as gather insight into their initial instincts with interacting with the site.

I used these insights to corroborate the details provided by the NYU Stern Consulting Project and created a list of action items for the first prototype.

Remote moderated user testing conducted on the existing GreenPortfolio site.

Affinity Map

To further synthesize the insights and observations from the user testing, I created an affinity map by taking the documented observations from the user testing and categorizing them to identify needs.

I was able to identify several areas of focus that would guide me moving forward, they focused on credibility, information about the broader impact, general education about green energy, and finding in-depth information about available financial products and services quickly and easily.

Affinity map of user insights collected during user testing.

Through user testing and synthesizing insights, we identified a clear need to address the information architecture of the site and pay special attention to the language.

User Persona

Green Portfolio had already established user personas that we wanted to keep in mind as we designed and developed solutions.​​​​​​​


Source: NYU Stern Consulting Project for GreenPortfolio (Jessica Ayala, Svetlana Alekseenko, Rebecca Davis, Enxhi Kaiku, Kimber Tsai)

Test Objectives

As I kicked off user testing on the current GreenPortfolio site, I wanted to ensure that I would gather insights that could be converted into effective changes. I set out with a few key objectives in mind:

  • Observe participants navigating the site
  • Observe participants finding the methodology information
  • Observe participants gaining insight into the impact of using products that invest in renewable energy
  • Observe participants finding general information about renewable energy on the site
  • Observe participants finding additional details about specific companies
  • Identify slips and mistakes experienced by participants

Usability Heuristics

At this point I also wanted to address concerns about the usability heuristics and completed an evaluation. I identified that future updates to the site should focus on three key areas:

  • Consistency & Standards
  • Aesthetic & Minimalist Design
  • Help and Documentation

Mid-Fidelity Prototype

I started with mid-fidelity wireframes based on the existing layout of the site to ensure that core functionality would be retained and that design recommendations would not expand beyond the capability of the page builder being used. I then began making updates based on user testing insights and including all elements for the next round of user testing. I referenced the list of identified pages to design, and focused on elements necessary for testing of the prototype.

I took my mid-fidelity wireframes and wired them for testing. The decisions was made to test with this version of the prototype to allow interaction early on, before design decisions were made and would allow for quick edits.

Mid-fidelity wireframes based on GreenPortfolio site.

Usability Testing

I conducted unmoderated remote user testing using Useberry. The testing allowed me to collect observations related to the usability of the GreenPortfolio prototype. Each session was recorded so I was able to review the results and compile them into categories using an affinity map. Those categories were then turned into insights and recommendations.

Brand Identity

Part of this project included incorporating the new GreenPortfolio logo. I was supplied with the logo, fonts, and primary and accent colors which I would incorporate into the full UI Kit.

Source: Katie Lewis for GreenPortfolio

Priority Revisions

For my final prototype, I implemented the following changes that were identified during testing:

I updated the menu to include a drop-down for all products to provide easy access.​​​​​​​

I addressed concerns around clarity of titles and descriptions for products on the home screen.

I updated the hierarchy on the getting started page to clearly break up the information.

I updated the About page to include founder details to increase credibility.

As a result of the updates users were able to instinctively find information, which resulted in improved enthusiasm around the product as a whole.

Other projects

Let's work together!

Provide the details of your project, request some time to chat, or just say hello.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.