Overview
Throughout the 2024-2025 academic year, I was given the opportunity to redesign the website of Northwestern’s Quantitative Trading and Software Engineering Club. During this opportunity, I was able to leverage my UX UI capabilities...
Role
Collaborators
Duration
Responsibilities
Project Lead
Front-End Engineers
2 Months
UX research, wireframing, user testing, user interviews, user surveying
Back-End Engineers
UX Researcher
UX Designer
What is NUFT?
Northwestern Financial Technologies (NUFT) is a quantitative trading organization at Northwestern being labeled as one of the most rigorous and technically challenging organizations at Northwestern.
NUFT strives to provide its members with the following as quoted by the founder/current president of the organization:
Introduce members to a tight knit community filled with top class engineers from Northwestern
Community
Mentorship
Provide students with the best guidance possible within the industry for better job placement
Mentorship
Provide students with top quant trading/research education
Education
Initial Problem Analysis
To first understand the context of the problem at hand, I went to the founder of the club in order to understand the needs of the stakeholder in this project. Then I proceeded to dive deeper into the underlying issues of the current website.
Stakeholder Needs:
• Communicate what NUFT is effectively
• Showcasing Achievements of NUFT
• Establishing a central hub for members
• Foster connections
• More consistent design and development of website
Business Objectives
Creating a Directory to Establish a Network
Curate a Design System for Consistency
Incorporate Better Language to Communicate NUFT’s Core Values
My Design Process
For this design project, I incorporated the basic human centered design process whilst also making use of generative AI in order to assist me throughout the ideation process and understanding users in a more unique method that will prove to be more effective and efficient.
Understand
Research
Ideation & Sketching
Designing & Prototyping
Implementation
Generative AI
generative AI used for question generation by providing the AI with extensive information on org values and design goals
User Research
First in the design process, its important to understand the users (general members and new applicants) of the NUFT website and their pain points. As a result, member surveys and applicant interviews were carried out in order to identify major user needs.
Data Driven Design
Member surveys were given out to 44 members of the organization of which 38 answered. The point of the survey was the understand how current members interact with the website and understand their current pain points regards to using the actual website. I was also able to take a look at different key metrics of the website such as unique visits and page views.
63%
of general members indicate they were not aware of resources being accessible on the website
~1.5k
unique visits occurred on the website during recruitment season from Sept 25th - Oct 24th
71%
of general members indicate they either never or rarely visit the directory page
~30%
of unique visits were done through mobile devices.
Notable Interviews
Trying to follow where I was within the application process was pretty difficult as I had no idea if I was done with an application or interview.
I didn’t really understand the requirements of the application process like what documents did I need? What do I need to prepare?
Research Analysis
After understanding what users were finding frustrating about the website and understanding the metrics of the website, I was able to turn these pain points into actionable design improvements.
generative AI used for organizing data and metrics, formulating informal analysis for brainstorming
Affinity Diagram
An affinity diagram was used in order to organize all of my thoughts and understand each stakeholder within this project: the founder, current members, and new applying members. This way, I would be able to create separate personas to identify distinct pain points for each type of user: a current member or a new applying member.
Major Pain Points
After organizing my thoughts, I identified major pain points that each user faces throughout the website experience in their own distinct settings and scenarios.
General Members
New Applicants
Resource Accessbility
Confusing Navigation
Unintuitive Application Process
Inefficient Account Management
General Member Persona
generative AI used in order to more efficiently help brainstorm ideal users based on recorded data.
General NUFT Member
Beatrice (21) She/Her/Hers
Bio
Current Northwestern sophomore and aspiring quantitative trader currently majoring in computer science. Has very little to no time on a day to day basis due to rigorous coursework.
Behaviors/Traits
Tech-savy but extremely busy ultimately having no time to troubleshoot poorly designed interfaces. Relatively impatient personality with wanting to get things done.
Frustrations
• Hates going through asking other club members for the different resources as it consumes a lot of time.
• When needing to update her resume, she’s constantly confused by the website’s navigation.
Goals
• Accessing resources such as lecture slides and course guides
• Build professional connections for job applications
• Streamlined profile updates to showoff her latest achievements
New Applicant Persona
generative AI used in order to more efficiently help brainstorm ideal users based on recorded data.
New NUFT Applicant
Henry (19) He/Him/His
Bio
Freshman at Northwestern University, eager to join the FinTech Club to deepen his understanding of quantitative trading and gain hands-on experience.
Behaviors/Traits
Eager, but cautious as he is extremely discouraged by confusing instructions and holds a short attention span requiring a seamless experience.
Frustrations
• Difficult to follow application process
• Ambiguous on the status of the whole application process
• Underwhelmed with the amount of content surrounding NUFT
• Accessing the website via mobile is extremely unaccessible
Goals
• Learn about the organization and what it does
• Apply seamlessly with clear instructions and to-dos
• Connect with other members within the club and the whole NUFT network
The Problem
How might we ensure both incoming students and general members can access the resources they need in a way that feels intuitive, supportive, and efficient for both groups?
Ideation & Sketching
Now came the part of the project where I turned the user pain points into actionable design improvements within the website. Here, I brainstormed various ideas on addressing user pain points with various layouts and different new features for the website itself.
User Flows
In order to gain a grasp of what certain interactions will look like, I curated various user flows for each form of interaction for both general members and applicants.
Low/Mid Fidelity Wireframe
generative AI (such as Relume) used to assist with brainstorming layouts
After completing extensive research and creating various low fidelity UI designs, I then moved on to create high fidelity mockups alongside a design system for developers and future design iterations in order to maintain better consistency throughout future design processes.
Final Designs
High Fidelity
Design System
*Check out the figma file below for more details about the final designs and design system!
Figma File
Conclusions
This project has been such a great opportunity for me to learn and grow as a designer. I’ve learned so much throughout the design process and how integrating various tools such as AI can really help benefit the whole design process as a whole making it more effective and efficient.
Major Takeaways
• User research paves the way: taking the time to really understand your users and understanding their perspectives can really shape the direction in which your final product goes towards.
• AI is here to stay: using generative AI for a process that requires understanding human emotion can raise questions. However, after this experience, I’ve come to realize how incredibly efficient and still accurate AI can be in assisting with the design process. As long as you provide it with the right resources and understand prompt engineering, it can be so incredibly beneficial.
• Organize and Systemize: taking the time in creating a proper design system really helps with the design process. Despite it taking a long time, I’ve learned that it really is worth going through the trouble and should be integrated more often especially when the problem lies in inconsistent design.