Overview
Made for CollegeWear, Inc. This is a web-based desktop and mobile application that allows anyone to customize and design their own graduation stole with text, logos, fabrics, and more.
Initially started as a redesign of their older version of the same tool, but upgraded to feature more quality of life upgrades, new customization tools, and a more modernized look. I worked closely with the development team in ensuring design mockups and prototypes are meeting the intended standards and to regularly identify and solve bugs and issues reported by users.
Tools: Figma, Adobe Creative Suite
Skills: Prototyping, User Testing, Visual Design
Skills: Prototyping, User Testing, Visual Design
Redesign
When this project first began in 2020, the web application's early design was very simple and contained limited customization options. The goal was to update it's design to be more sleek, modern, and more optimized for desktop, tablet, and smartphone usage.
Many of the core issues stemmed from "unnecessary" clicks to achieve simple functions, unintuitive customization options, and an overall dated-ness to the app that does not resemble mobile and desktop creativity tools that the average person may interact with (ex. Canva, CapCupt, Instagram filters, etc.).
Below: CollegeWear, Inc.'s Stole Design Web Tool pre-2020
Below: CollegeWear, Inc.'s Stole Design Web Tool's current version as of 2024
Faster User Flow
Previously, customers would have to go through a few opening steps before they are able to design a stole. This included, logging in, choosing a base, finding your school, etc. These steps often felt unnecessary, and our user testing revealed those who found those steps too cumbersome would simply not want to interact with the application any further, losing potential customers.
In its latest version, opening the tool allows you to jump straight into the design screen, letting customers to be able to interact with its features right away without much barriers to entry. This change alone had allowed a shorter turnaround time between customers opening the tool and submitting an order.
Search Functionality
In a design tool that offers over 100+ customization options for flags, hybrid tips, logos, Greek Crests, and more, customers were overwhelmed when trying to find what they needed. In the application's initial iteration, it did not include any way to search or filter its customization results.
I designed and implemented a smart search function that filters results easily based on what's typed out in the search bar. This search bar in particular is able to parse out your results if it contains what you have typed, prioritizing results that start with the search term and ends with results that contain the term elsewhere in its name.
Improved Interactions
Actions such as choosing where elements on on the graduation stole has been simplified to mimic other online design and art tools.
For instance, in the past, if you wanted text to be on the right side of the stole, you would have to click a button that indicates what side you want to place it on.
Now, you can simply drag and drop the elements wherever you want instead - functionality more familiar to today's students and parents alike, who are used to "drag and drop" functions you can do on Canva, CapCut, and more.
Next Steps
The development and design of this web tool is an ongoing project. During graduation season is when receive the highest volume of orders and feedback. Because this tool serves the graduating student community, the staff and faculty working at schools and institutions, and even parents who order for their students attending high school, the requests and suggestions we receive are very diverse.​​​​​​​
Each year we take those requests to better meet the user needs of our customers for the next graduation cycle, alongside figuring out what other ways we can improve the designing and ordering experience in terms of functionality and customization options.
Additionally, we are in the process of revamping and re-optimizing this application for its mobile counterpart. While it is still accessible and usable on smartphones and tablets, we are still working towards making changes behind the scenes to account for smaller real estate, touch gestures, and more.
You can interact with this your self here! Please note, the features and functionality you see here may differ from the current live version, as we work continuously to make updates and improvements with our development team when time permits.