UI/UX

CleverDevices was enlisted to enhance an existing product utilized by NYCT. Although NYCT had originally developed the product in-house, they opted for CleverDevices to take over the project after witnessing enhancements made to other products. While still in the design phase, the project owners were highly satisfied with the progress and eagerly anticipated showcasing the project to NYCT.

The primary issue with the product was the prolonged duration field operators required to input actions (such as identifying problems and implementing solutions) for vehicles. This posed significant challenges for the agency in tracking both problems and corresponding solutions. In the legacy application, this task was fragmented across at least three different views. However, we streamlined it into a single, user-friendly pop-up form preloaded with as much relevant information as possible. Additionally, implementing type-ahead functionality simplified the selection of issues and resolutions, utilizing a list previously vetted by the agency.

Addressing the outdated design and complex user interaction of the product was a key objective.

Upon my departure from the company, the outcome was a newly redesigned product that generated considerable excitement among the project owners, eager to showcase the improvements to NYCT. This marked a substantial enhancement over the existing system, notably accelerating workflows for users.

A valuable lesson gleaned from this experience was the effectiveness of simplicity in saving time. For instance, in one challenging section, we replaced three dependent dropdown menus from the old application with a predictive search feature. Through iterative refinement, we discovered that simplicity significantly expedited the user’s process of inputting problems and solutions.

The gallery shows some examples and the last image was the original application.

The CAD application was a comprehensive tool enabling mass transit companies to perform a multitude of tasks for their fleets.

Its complexity and scale were significant; a complete redesign would have required over two years. To manage this, we divided the project into manageable sections, beginning with the map view.

Initially, the maps in the application were outdated, user-unfriendly, and challenging to decipher. We commenced the project by addressing the smallest component: the vehicle icons.

The primary challenge with these icons was to convey a wealth of information at a glance, while also accommodating potentially hundreds of vehicles on screen. This included displaying vehicle status (color-coded), vehicle type (e.g., bus icon), vehicle ID (up to nine digits), event type (icon representation), and crucially, the vehicle’s direction.

Another issue I identified and resolved was the problem of vehicle bunching, where icons would overlap depending on the map’s zoom level. I found the approach of suggesting continuous zooming to isolate specific vehicles impractical. Instead, I devised a solution to improve both the appearance and functionality of the icons when bunching occurred. Simplified icons would display the number of vehicles, and upon clicking, would expand to reveal all vehicles with their respective information, allowing users to drill down for further details and actions. If a vehicle had a Vehicle Identification Number (VIN), the number would display events associated with it. In the absence of a VIN, a trailing number would indicate the number of bunched vehicles.

In addition to refining the vehicle icons, I also contributed to enhancing the user interface (UI) for the map itself and expanding its functionalities.

The following gallery showcases some of the ideas we presented to product managers to see if we had their buy in to continue on the current path.

For this project, my role as a UX Designer involved crafting a comprehensive wireframe layout for an upcoming web application. Collaborating closely with the business analysts (BAs), I delved into understanding the application’s purpose and functionalities. Armed with requirements and video demonstrations of key user tasks, I meticulously researched and began constructing the wireframes. Throughout the process, I remained flexible, making adjustments based on feedback from the BAs and IT team during our review sessions.

Working alongside a skilled and talented group was truly enriching, and I found the project to be both challenging and enjoyable. However, my involvement was limited to a specific phase of the project, and unfortunately, I did not witness its completion.

The ask for this project was to redesign and enhance our reporting application. The stakeholder had asked to design the main reports page along with a sub page that showed various reports and options to refine, filter and show other menu options for the reports. I had proposed two options for the sub pages. One would utilize the header top to include menu options for the reports, the other would incorporate a side bar with the menu options. The stakeholder loved it all and was to move forward using my designs to move to the next phase.

The ask from the stake holders, was to develop a web shell that the developers would utilize to create future applications. Since I had developed a design system that all our applications would follow, it would make the developers job easier if they all had the same starting point to work from. I created my own toggle for dark and light mode. Coded the CSS so that the swap would be easy. I wanted more control than having a frame work handle the swap. Our dark mode was based on shade of our corporate colors and used that as my baseline. There was still some work to do on the mobile portion of the site, but since this application was not meant to be utilized on a phone, the responsiveness was not necessary at the point of delivering the code to the developers. I used bootstrap 5, sass, and some minor javascript for this.

So not only did we create an android/iphone version, but we got a custom arcade cabinet made (thanks to Andres Gaete) arcade-pi.com. We developed a version of the game to be two player version of the game which adds some strategy and additional fun!

The arcade version brings back some nostalgia as well as adding that tactile feedback we all love. If your in Las Vegas for Vison Expo come check out ClearVision at Vision Expo West 2017 Booth #16087 to play on our arcade version.

So after month’s of work, after many iterations, and after some user testing, we are launching the game on Sept. 14th. For more info check out this page. Reds Journey

I wore many hats during this project. From wire-framing, to character development, to UI/UX, front end development, and some strategy. So in short I learned alot! I also failed alot, but that’s all part of the learning process.

So in short please download our game, and please feel free to give back any feedback, and keep in mind all proceeds go to charity.

Thanks!!!

Problem: We need an app!! That is all I hear from higher ups at our company. The what they don’t realize is the lack of organization and direction is their main hurdle.

I stressed the importance of brainstorming, planning, and developing a strategy in order to get some solid requirements. With previous projects I have seen the waterfall effect of no proper direction and the project time exponentially grows due to improper management. With that said, I followed up with describing the proposed prototype.
Continue…

The problem with the project, I was asked to update content on an outdated site, with no cms. My solution was to redesign the the site as a responsive site built on WordPress for easy content management.  I used our main site as a reference tool to capture elements that would keep you feeling like you were still part of the digital real estate of ClearVision Optical.  The challenge for me was that this was my first real front end and backend build in WordPress.

I worked closely with the Digital Strategist and project manager to create a design for a site that we did not have much idea what was needed. We had very little copy to work with. I created various wireframes and different prototypes to showcase the main message of the project. I had created a parallax version which was not approved and went with something more traditional and just made it look clean, modern, and made it responsive.

I was asked to create a simple design that would showcase what the company does, what projects they have done, and a way for customers to contact them. The design was clean, modern and fully responsive. This project is still in the works, I am awaiting copy and photo approvals.