CollegeFitFinder CFF UX Redesign Case Study

May 8, 2019 | XEO

About College Fit Finder

College Fit Finder is a SaaS platform which is a leader in college athlete recruiting. They work primarily with sports clubs around the US providing a turnkey solution for picking a college and having an awesome profile to share with the college coach. This blog is the first in a series of case studies with solutions.

Challenge

The College Fit Finder founder is a graphic designer and was itching for a mobile first ux redesign. The software platform needed to scale up in order to keep up with projected user growth and planned feature that will drive up daily usage per user. Delivery needed to be time based instead of feature based. Additional business models including advertising and white labelling needed to be added in. Competitors are running on Android and iOS mobile apps.

Approach

The first step was to create a design language that was easy to use and easy to reuse across all features. The product owner stepped in and wrestled down the design language borrowing some elements from Airbnb and other top web apps.

As a design case study example, this new design language boiled down to what we called 6-pack cards. Each search result was presented in a list of the cards and each contained 6 icons of summarized data making it very glanceable. Then filters and sorts were standardized, and the detail page popped up to the right side of the list for easy perusal of many returned results. This was adaptable to be mobile friendly by putting the filters and sorts on pop ups and the detail page popping over the list view.

As a website design case study, the website is growing quickly in terms of both users and in terms of daily usage per user. Scaling up needed to be an integral part of the plan. This meant enabling multiple servers to participate including multiple front-end servers which can be added to the elastic beanstalk and will automatically adjust as traffic changes

Solution

XeoDev knew that we wanted to build on a modern framework and chose Laravel because of all the built-in features. We also chose Vue.js as the front-end framework as it is natively integrated into Laravel. The next step was to implement the design language in a highly reusable manner within the framework. This new coding stack for our developers was a significant portion of our problem solving case studies with solutions. The website utilizes theming for many aspects including the colors of colleges and clubs as well as having custom logos for each. As you flip through colleges the ux changes to the school colors. This required considerable manual entry of all school colors and some advanced CSS made the presentation really easy One of the most challenging parts of this solution was getting to launch day. There were a couple of early attempts to lock down the design fully and get all the work lists aligned. However, there were also a ton of good ideas and design perfecting tasks to move pixels around which competed for the web development time. Finally, a date was chosen, and the entire team agreed to work in Armageddon mode where work items had to be really critical to get scheduled. this mindset shift took a while to settle in, but ultimately the date was hit with as much work as could be done accomplished. the next few weeks were intentionally set aside for fire drill mode and many bugs were found and squashed in a very short amount of time. this was possible because the design and code were so familiar and there were known lower priority areas which were delayed on purpose. For the CFF team who had not gone through the full SDLC (software development life cycle), this was a real world web development case study that they learned quite a bit from. This date driven approach really cuts contrary to the natural state of this creative team. The team naturally finds and prioritizes ideas and new strategic tasks and organically rolls them out in an agile model. But, that laid-back approach didn’t allow the entire complex system to be launched on a single date. now that the launch is behind us, the team has returned to the laid-back feature machine that it naturally is. To facilitate scaling, since email was slow to send on the live website, email was broken down into a background task that runs on a separate server utilizing a queue to allow that server to catch up as needed instead of making the user wait until everything is completed before continuing.

Results

The key metric for this redesign is that the sales team can now do a full demo in 5 minutes instead of needing over 30 minutes on the old system. Because it is so modular and every page uses that simplified design language, new areas of the website are very easy to pick up once you learn the first area. An unexpected outcome was the vastly improved reach for marketing and feature messaging when sent directly to the site users vs going through the club management. Changes to facilitate this will be rolled out later this year. I hope you found this helpful it is one of our best case study examples. Please return to our case study finder and read another one.

About XeoDev

During the post mortem meeting on the release one of the client partners raise this high compliment for the XeoDev co-founders: 'David contributed as if he were a founder of CFF, not as a vendor and I really respect that.' That sums up our intended relationship model: we would like to be your technology partner and bring that founder mindset into your business to deliver complex redesign projects together. XeoDev provides SaaS and Mobile Android and iOS App platforms for companies ranging from solopreneurs to unicorns. When you need this type of technology for your business get started by requesting a quote.