Case Study: How Designlab Students Partnered With GreenPortfolio on an Effective UX/UI Redesign

GreenPortfolio was in need of a redesigned website that had improved user experience and incorporated new brand visual elements. So naturally, they turned to o…

Team Designlab
Team Designlab
|
Nov 1, 2021
|
14
Min Read
Share

A key part of the learning journey to becoming a UX designer is practical work on real-world projects. This is why at Designlab, we've been experimenting with ways to connect students with companies, organizations, and individuals in need of UX design services.

Partnerships and Career Services at Designlab

Since launching our partnerships experiments, our Talent Partnerships and Career Services Lead, Nicole Locklair, has paired 53 students and counting with real-world projects—with over 150 students also introduced to partner companies. These partners have included Pinterest, Code and Theory, Rainfactory, and startups in every sector. 

Partnerships companies get access to candidates with a diversity of work and life experience beyond, or in addition to, a traditional 4 year degree. For the students involved, the partnerships give them the opportunity to add real client projects to their portfolios, work in teams, and practice interview skills. 

“Interviewing, networking, interacting with clients, and managing a project timeline and deliverables are all part of landing a job, so even if some of these Partnership opportunities are short-term projects, you're building those skills to enhance your ability to land a full time role,” Nicole says. 

This area of our UX Academy offering is always evolving, and we continue to reach out to new partner companies and introduce them to our UX Academy graduates. Let’s take a deeper look at one of the recent partnerships we ran, and what the key learnings and takeaways were!

Partnering with GreenPortfolio on a UX/UI Redesign 

Through our partnership with the Columbia Lab-to-Market Launch Accelerator, we successfully paired two students with GreenPortfolio for a logo redesign and a complete website UX and UI design refresh.

“The reaction from GreenPortfolio to this design work has been really positive, and they've returned to us a few times to request additional work with our grads,” says Nicole.

GreenPortfolio was in need of a website redesign that improved the user experience and incorporated new brand visual elements. They wanted to design with mobile in mind, and maintain a site structure that would be scalable as their company grew. They also wanted to explore how to utilize features that would make it easier for users to find information, such as a filter for the blog and easy access to experience-appropriate educational material.

For this project, UX Academy student ​​Melanie Berezoski got to work with the founders of GreenPortfolio, Elizabeth Landau and Bonnie Gurry. 

As Melanie and Elizabeth began working together, GreenPortfolio was wrapping up a logo redesign with another Designlab student, Katie Lewis. So the plan was to roll out their newly optimized site with a fresh look based on this brand centerpiece. 

1 GreenPortfolio Style
UX Academy grad Melanie was supplied (by another Designlab student Katie Lewis) with the logo, fonts, and primary and accent colors which would be incorporated into the full UI Kit.

“They had a great product already but wanted to optimize their site for their growing following of mobile users. I took a mobile-first approach with my research, and kept that in mind when designing, testing, and iterating,” says Melanie.

“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 says.

The Vital First Step: UX Research & Testing

“There is such a strong focus on research in the Designlab curriculum, and that was a vital element with this project. GreenPortfolio was already filling their site with great information, but they didn’t feel that it was reaching their mobile users as effectively as it could, and we needed to hear from users directly to discover why that was. They had already collected some feedback and had some ideas of areas for improvement, but with the guidance I received from Designlab, I knew the approach for us would be to test with actual users and allow the insights I gathered to dictate the updates and changes necessary,” Melanie says.

2 GreenPortfolio User Testing
Melanie 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 what their initial instincts were when interacting with the site.

“Mel was a joy to work with! She was very structured in her approach—her plan included an initial research phase and design suggestions, followed by design iterations based on usability testing and feedback. Mel took initiative and sourced participants for user testing, along with accommodating users we suggested as well. Her professionalism exuded in how she presented her findings, wireframes, and final prototype. I also appreciated Mel’s flexibility regarding timeline—she uncovered some key needs during her testing and was able to integrate additional elements into the final website,” says Elizabeth.

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

Beyond the research, a big focus in this project was simply connecting with the client over video call and making the most of that virtual time together. 

“Beyond the valuable learning experience, it was such a pleasure working with Elizabeth and Bonnie. We worked together over a three-month period. We decided during our first meeting to set up a recurring weekly meeting, and we accepted that we might skip a few here and there if we didn’t need them or if something else came up. In the end I think we only missed a couple of our check-ins, and I became so grateful for each one. We made amazing progress each week, and I got to hear feedback often. I was able to make sure they were confident with my approach and progress at each stage. I’ll suggest regular check-ins for any of my future projects based on this experience,” says Melanie.

During those weekly meetings, Melanie would start with a presentation of her work since the last meeting and open the floor for questions and feedback. They’d wrap up with a discussion of next steps and confirm ownership of any outstanding tasks. Beyond that, they had regular email communication for one-off questions or anything time-sensitive between meetings. That worked well for them as they could focus on tasks during the week and be sure they were making the most of their time together when face-to-face.

“During UX Academy, my mentor Alan Hunt Jr. made a point to ensure that a meeting always included a presentation, and I incorporated that into my work with GreenPortfolio. It was such great practice to ensure that the team had insight into what I had worked on since the last meeting, and we could address any questions before finalizing next steps. It kept the progress on track and helped us to avoid any assumptions or misunderstandings. For example, early on I was reporting on some of the initial research that I’d gathered when it came out that quite a bit of research had already been conducted as part of their NYU Stern Consulting Project. I was therefore able to review those findings at a stage when it was most beneficial,” says Melanie.

4 GreenPortfolio Mid-Fidelity Prototype
Melanie 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.

“It was a new approach for me, but one I can see using quite a bit in the future, presenting options based on the best possible solution, and then adjusting based on the functionality that’s available.”

The Outcome & Learnings

The case study for this project has been shared on Melanie’s portfolio, which you can review in its entirety here.

“This project did a great job of highlighting the value of research in design decisions and has helped build my confidence in my ability to discover actionable insights. I’ll seek out more opportunities to utilize these skills in future projects. Beyond that I’ve enjoyed creating using a mobile-first approach and look forward to projects that allow me to take this new insight into the next challenge.”

“It was such a unique experience and I feel that it came at just the right time. While Designlab gave me the skills necessary to be successful, working with GreenPortfolio allowed me to put it all into practice and solidify my understanding. I especially enjoyed going it alone and being able to pull from all my experience, even from before Designlab, to help me achieve an incredible result,” says Melanie.

5 GreenPortfolio Final Prototype
The final prototype was delivered to the stakeholders along with an expanded UI Kit and supplemental graphics.

“I think a big takeaway for me was realizing how decision making is vastly different with involvement from real stakeholders. I think with the case studies we complete prior to graduation have a little bit of built-in flexibility as you can imagine that anything is possible. With GreenPortfolio however, we were going to be limited by the functionality of their website builder tool. So, I needed to keep that in mind throughout my design process. Some suggestions were made with the caveat “if we’re able to”. It was so interesting to see how answers were more definitive because there were actual limitations. In a way, it simplified those decisions, and we could take ownership of the results with testing,” says Melanie.

“Bonnie and I really enjoyed working with Mel and are excited to have a website that brings GreenPortfolio’s mission to life. Mel leveraged her expertise in UX and visual design, with all recommendations backed by research. I really appreciated Mel’s attention to detail and her strong ability to listen to client requests and translate those requests into an enhanced experience for our customers. Designlab was an amazing partner and I would happily work with their students again,” says Elizabeth.

GreenPortfolio is a personal finance platform that helps you manage your money the climate-friendly way, making it easy to understand the climate impact of your finances while you meet your financial goals. Visit their website to find reviews of investments, banking options, and other financial products that support a clean energy future. The platform is currently in development, but you can join their waitlist to get early access once it launches!

To have the opportunity to be paired with a real-world organization like GreenPortfolio on your UX design career-changing journey, we encourage you to explore UX Academy.

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.