.png)
DFS Judging Application
Where tech industry representatives evaluate STEM projects developed by students.
Role: Lead Designer
Organizations: Blueprint at UCI
Tools: Figma
Timespan: 14 weeks
Dreams for Schools (DFS) is a nonprofit organization that oversees programs which contribute to educating youth about STEM fields.
"We need to redesign our judging application and expand its functionality as our company is expanding in its endeavors" - DFS Directors
.png)
The Judging Application
In DFS programs, students develop and design various projects such mobile apps, electronics, and websites. At the end of the program, students present their projects in a showcase, which are evaluated by technology industry representatives. This platform is what judges use to evaluate these projects.
UI/UX Evaluation
Since this project was a redesign, the first thing I did to start this project was evaluate the original judging application. Here were some key details I noticed:
Can't specify the event's program and assumes it's in person
How to Improve: Add a dropdown menu of all the DFS programs (AppJam, Web Development, Le STEM, etc.) and toggle the location to URL to add zoom link for virtual showcase
Key information is crowded and difficult to read, and you can't edit events
How to Improve: Utilize the empty space in the right and left margins to make the information more readable
.png)
Criteria can't be edited and is always manually added
How to Improve: Create templates for each program with their own criteria, so when admin specifies a program for an event, its criteria will automatically transfer to the event
Requirements Analysis
After looking through the original judging application, my project lead and I spoke with DFS to get an understanding of their needs for the application.
Needs
.png)
Create a new program with unique criteria to judge
Specify event program, online vs in person, and participants
An easier way to add users as judges to events
Flexibility with making criteria (editing ability)
Wants
To be able to create new criteria categories
Ability to view and edit all user profiles as admin
Incorporate the DFS brand, style, and colors
Utilize team colors in judging assignments
Nice to Haves
Save and review judging data and judge demographics
Display personalized showcase map for judge
Reduce carbon footprint by going paperless
“I want to have an intuitive interface that matches the DFS style for us to organize events, manage judges, and collect scoring data.”
- DFS Admin Users
“I would like an easy to use website that gives us judges everything we need to judge a DFS event and score our assigned projects.”
- DFS Industry Representatives
Ideation
Throughout the duration of this project, I designed multiple different mockups for the judging applications new interface. Below is the progression of the UI for various pages of the project from most recent to oldest.
Create a New Event
Creating New Program Template
User Database for Admin
Usability Testing
As I made mockups for the design, I began prototyping the interface and shared the Figma project with the DFS directors to conduct usability testing and get feedback. Their feedback was crucial to the improvement of the judging application since I had overlooked some elements as someone not in the target audience of the system.
Problem:
Admin can't tell if all the scores have been submitted and must expand all score cards to see empty fields
Solution:
Add a visual cue to show when all scores had been submitted
Problem:
Someone could be both an admin and judge user
*different functionality
Solution:
Create modes for user accounts and allow them to toggle between if given both
*chose the toggle button in the header
Problem:
Difficulty with text input score submissions when using tablets
Solution:
Incorporate a slider score submission
*Decided that each design was best for the respective devices and allowed users to toggle between the perspectives
Problem:
Small sign in button
Solution:
Center and enlarge the button
*for older users with small tablets to easily touch
High Fidelity Prototype
Here is the high fidelity interactive prototype of the DFS Judging Application design that we created! https://www.figma.com/proto/VUint18QxXH9uH9nI4AfAM/Final-Prototype?scaling=scale-down-width&page-id=0%3A1&node-id=701%3A5260
Final Thoughts
This project was truly an amazing learning experience for me as a designer. Not only was I able to express my creativity, I was happily surprised with the amount of organizational and problem solving skills I had to do. Having real clients with a real application was challenging since I felt the pressure to deliver a well functioning, intuitive product.
One of my largest takeaways from this project was the importance of investing time in the beginning for a smoother design process. I spent the first couple weeks of this project evaluating the original design and talking to the DFS executives to establish the application functionality producing our needs, wants, and nice to have documentation. This made the following several weeks of design feedback iterations much more successful since I knew exactly what elements were priorities to design and implement first. There wasn't doubt with my workflow and what to proceed working on next during this process.
Nonetheless, I'm proud of the final design produced for the DFS judging application. DFS holds a close place to my heart since I used to be one of the college mentors that taught young students about computer science and programming. My relationship with DFS feels to have come back full circle, and I can't wait to see how the company continues to grow and educate more students.
One of my largest takeaways from this project was the importance of investing time in the beginning for a smoother design process. I spent the first couple weeks of this project evaluating the original design and talking to the DFS executives to establish the application functionality producing our needs, wants, and nice to have documentation. This made the following several weeks of design feedback iterations much more successful since I knew exactly what elements were priorities to design and implement first. There wasn't doubt with my workflow and what to proceed working on next during this process.
Nonetheless, I'm proud of the final design produced for the DFS judging application. DFS holds a close place to my heart since I used to be one of the college mentors that taught young students about computer science and programming. My relationship with DFS feels to have come back full circle, and I can't wait to see how the company continues to grow and educate more students.
