nwPlus.io Redesign

nwPlus organizes some of the largest hackathons in the Pacific Northwest, strengthening the tech community in Western Canada. For this project, I led a design team of 6 to give the website a visual refresh and improve the user experience by incorporating user research into the nwPlus design process.

ROLES

Lead Designer

TIMELINE

July - Sept. 2021

TEAM

nwPlus Design Team

OUTCOME

As UX/Visual Designer, I worked closely with the design, PM and development team to redesign and deliver the official website, which achieved 10000+ interactions, 2000+ registrations for our hackathons, 150+ signups for mentors, 60+ sponsors (e.g., Amazon, Microsoft, Sketch and SAP) and $36,000+ in prizes in. Moreover, this project challenged nwPlus traditional design process, which has inspired the design team to change the way how we normally design and opened up many more UX projects.

2021-22

150+

Mentor Signups

10k+

Interactions

60+

Sponsors

2k+

Hacker Registration

$36k+

In Prizes

BACKGROUND

nwPlus is on a mission to inspire and support all kinds of students in tech by providing opportunities and resources for them to connect, learn and grow.

The main purpose of the nwPlus site is for visitors to learn about us and stay up to date on our annual hackathon events in order to encourage them to join our hackathons or join us for our mission.

Although the original site designed in 2019 was clean and beautiful, it lacked engagement and a clear purpose, which could lead to a poor user experience.

Original Site Designed in 2019: 

Original Site

PROJECT GOAL

Our main goal for the redesign was to do a visual refresh to represent the brand better and make it more engaging to increase visitor engagement with the website. We aimed to improve the user experience and inspire visitors to register for the hackathons or support our mission by joining us. Moreover, I wanted to redesign the website that could provide more value to our visitors, giving them a reason to visit the site occasionally (at least once a month).

DESIGN PROCESS

At nwPlus, the design team normally starts the design process with moodboards to brainstorm design themes. However, I challenged our tradition for this project by introducing user research into our workflow.

Why is user research the right thing to do? When I joined, the design team at nwPlus focused mostly on visual designs, not so much on UX, and designed with assumptions. Even though we are a nonprofit organization who knows (or thinks we know) our audience, this wouldn’t be ideal for us because it can confuse visitors rather than help them learn about us and our events, which lessens the likelihood of them registering or supporting our mission. That is why user research is important, especially for our official website, which functions as the first point of entry to the brand where some visitors know little or nothing about the organization.

Moreover, we have received a couple of feedback and complaints from our visitors on the user experience of some websites, which is another reason why user research is right for our visitors.

Last note: I also wanted to take this opportunity to make our design projects more UX-focused by integrating appropriate UX methodologies with our current design process. For one, nwPlus has a great mission, and faulty assumptions should not prevent us from achieving that. Also, this would open up more opportunities for future designers who want to take on more UX projects.

design-process

1. User Survey

I was responsible for designing survey questions, distributing surveys, and analyzing the results. Survey allowed me to reach a large group of our audience, validating our assumptions and learning about their motivations, opinions and experience with the original website. Compared to interviews, it is much cheaper to conduct in terms of time and money and more reasonable considering that the website was fairly simple.

Before I distributed the survey on nwPlus social media, I worked closely with the design members and the product manager to iterate the questions and make sure that I was asking the right questions. I also tried to make the questions as specific, clear and concise as possible since I wouldn’t be able to probe the respondents due to the nature of the survey.

After collecting 100+ survey responses, I analyzed qualitative and quantitative data and categorized each data point under common themes - Visual, UX, and Behaviours. I also presented the survey insights to the cross-functional teams (e.g., product management and development) during our bi-weekly all-hands for them to understand our audience better and for us to act strategically. Here’s what I learned from the survey:

  • Most respondents visit the site for hackathon-related information
  • Many respondents ignore the newsletter and prefer social media as a form of communication
  • The original website is easy to navigate
  • It has a nice graphic design, but it is not as creative as the designs on the Hackathon pages.
  • It has an unclear and long copy, which makes it less scannable.
  • It is a bit boring and monotonous.
survey

2. Website Evaluation

While waiting for the survey response, I gathered the design peers, the product manager and the director of development in a meeting to run through the original site and evaluate it together from the perspective of a new visitor. It allowed me to collect quick and inexpensive feedback from different teams and give the development team a general idea of what to expect. Reviewing the site together with members of different perspectives really helped us realize a lot of usability and technical issues within the original website.

eval

3. Moodboarding

As a design team of 6, we each created moodboards to ideate the design direction and theme for the official website redesign. In order to ensure everyone was on the same page, we collectively combined aspects from each moodboard by talking through the pros and cons and decided on the one that was most likely to be the vision of the new website without straying too far from our branding.

moodboard

4. Design

Based on the user survey, website evaluation and moodboard, everyone put together sketches or wireframes to determine our website layout and information architecture. During the design all-hands, I invited the product manager and developers for a design critique to gather feedback and discuss the pros and cons of each design. So, before moving on to vectorizing designs and adding colours, we were able to fine-tune the structure of the website and build a solid foundation.

layout

As the design lead, I was responsible for determining the hero section design, which is the critical part of the site since it sets the theme for the rest. It was very challenging as I went through many iterations based on constructive feedback from the team. My proposed sketches of design styles either failed to address our main demographics or did not match the nwPlus branding. So, I kept going back and forth with the sketches and the feedback notes and finally came up with a version that everyone was happy with. During the process, I also revisited the moodboard since the chosen one wasn’t working and created a new one by re-combining elements from each existing moodboard.

hero-1

After I finalized the design with the design peers and PM, I worked closely with the developers by presenting the final design and handing off interaction specifications and asset properties to the team.

handoff

Final Website

CHALLENGES & KEY LEARNING

This was my first experience as a design lead. My biggest challenge was to figure out how to make sure everyone’s contributions were valued while still being able to maintain my own creative approach and design direction, especially with everyone having their own unique ideas and opinions for the project. I learned how to incorporate and prioritize everyone's input and the importance of being transparent and communicative with cross-functional teams throughout the project. I found regularly checking in with collaborators, especially developers and product managers, really useful and crucial throughout the design process.

Thanks to this project, I also had the opportunity to reflect and learn about my leadership style. To me, leadership isn't about the hierarchy, commanding people what to do, or playing a solo game. It is about being collaborative, transparent, and humble. It is about bringing everyone together and making their strengths visible. This project was really the product of a huge team effort.

Lastly, working on this project helped me learn that the design process isn't something fixed or rigid. Not every project or designer needs to follow the Double Diamond framework or stick with the company or organization's traditional design process. Learn to challenge it and pick the right ones for your project and users.

Thanks for reading! 😊

Other Projects

Coastal ConnectUX Design

SOCOUX Design

Let's connect!

Feel free to reach out to me on any platform anytime! I'd love to connect with you and talk about anything.

Made with lots of 🥩 + 🍞 = 🍔 = ❤️