Development

Creating a Web Shell

CleverDevices - Multi Application Web Shell

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.

» View gallery

» View website

Frame Customizer

Aspire Eyewear - ClearVision Optical

We have been working with a vendor for about a year to develop our own frame
customizer. The UI that the vendor provided was very technical and good for a designer to use, but not a consumer looking to change pieces and colors.

In the first version of the customizer we were only able to change certain aspects. I mocked up some changes, and I created my own CSS which I provided to them to ensure that my changes would get done as expected. The small changes to the UI created for a cleaner more suer friendly approach. The customizer is not responsive and has more changes ahead but the current state was improved significantly.

Months later vendor provided us with a new implementation and we had more control over different aspects of the tool per our requests. So knowing we can change more of the tool, I mocked up a wireframe to show my team members how I envisioned the tool to work and how we can leverage more real estate by using an overlay to show the options based on the main selection. The team loved the concept as well as the managers, and we moved forward.

» View gallery

» View website

DilliDalli Arcade Version

ClearVision Optical Arcade Build

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.

» View gallery

» View website

New design, new templates, lots of work

Aspire Eyewear Relaunch

After designing and developing a new template for the Aspire brand it has finally gone live. I did wish I had more control over the images and copy for the site, but at least it was fun learning and implementing 75% of how I envisioned the site to look like.

The customizer was a fun project, got to rework the interface and make the user experience a more enjoyable encounter. There was a ton of back and forth between us and the vendor, but the overall exchange between us has created a great working relationship.

» View gallery

» View website

Dilli Dalli Game

Red's Journey

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!!!

» View gallery

» View website

HTML 5, IOS and Android Game

DilliDalli Game by ClearVision

So we have moved towards a beta version of our game. We have created a desktop version, as well as porting over it to IOS and Android via phonegap. We are currently testing the game for bugs. Once we complete all testing, we will submit in App store and google play store.

It’s been fun, frustrating, but in the end very rewarding to have worked on this project!!

» View gallery

» View website

Building a game! Say app!!

ClearVison Optical R&D

So we are at the beginning stages of building our game. We have an intern who’s focus in school is game development, so we are testing the waters and building a mobile app game.

We are starting out as a mobile web game and then porting it over to IOS and android via PhoneGap. The screens you see are our part of our UI/UX portion.

I have developed these screens as we defined our our requirements for the game. From here, I will create the other screens that our game developer will add, for example the shop, the settings, etc in html.

Finally getting stoked about some of the work here!

» View gallery

» View website

Wire-Frames and Rapid Prototyping

ClearVison Optical Free Frame Benefit

This project was originally handed off to an intern. They completed their task as expected. But when I finally got my hands on it, the usability and design for this was terrible. So I went back to the drawing board. I saw the data that we needed to display and researched some better charts and graphs to show case the data that we needed in a cleaner more user friendly approach.

Now that I have the prototype looking how I want it, its now time to implement the prototype.

Update: I have completed the working prototype. You view it here  or click on the view website link.

» View gallery

» View website

Bootstrap Parallax! And some other templates

ClearVison Optical R&D

The challenge: Create a bootstrap parallax site.
Why? Cause I wanted to challenge myself!
Issues: Sharing code with non-parallax template and having sticky footer creating all sorts of problems.
Solution: Added body classes to both templates. Using php I passed the the classes and did a check for string position to see if the class had the parallax in it, if it does not echo the div with a class called wrapper which threw off the parallax site.
Problem solved!!

I have also created a style guide for our team to use. Its the homepage of this master template.
I have also customized the bootstrap framework, the responsive navigation is now a push menu.

» View gallery

» View website

Company: Clear Vision Optical

Project: Internal Mobile Application Portal

The project called for creating a new portal that was responsive. My approach was to build out a template that would house all our collective apps using the same principal foundation. This would solve the lack of consistency, between all the apps and since the template is built on on Bootstrap it would be responsive.

So far I’ve created 3 out of the 13 apps, I’m currently on hold until our backend team starts to pull content into the apps I have coded.

» View gallery

Company: Clear Vision Optical

Project: Some mobile app love

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…

» View gallery

» View website

Company: Clear Vision Optical

Project: Expo Site

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.

» View gallery

» View website

Company: NorthShore LIJ

Project: Rehabilitation Network website

I worked closely with the Digital Strategist, project manager and leads from the Rehab center to deliver this website. The project was to use a predefined template but vary a bit from the template. We created some wireframes to give the business an idea of how the site will be structured. Since we had a very agile workflow, we took the wireframes and with rapid prototyping modified where we needed and completed the site as per the requestors requirements.

» View gallery

Company: NorthShore LIJ

Project: The Feinstein Institute for Medical Research website

As the Digital Strategist, I worked closely with the project manager to gather requirements,create a site architecture, create some wireframes and then by doing some rapid protyping we were able to make adjustments where we needed to get the look and feel as intended and where we needed to tweak we did.
After a year of being live, as the Digital Strategist I reviewd some analytics and gathered new requirements and created a presentation to the President and Vice President of the Institute as well as other key members of the organization. The presentation explained why we needed to enhance sections of the website and to restructure the IA to increase visits to sections that were vital to the organization. The presentation was well recieved and the project was immediately approved.

» View gallery

Company: NorthShore LIJ

Project: Lenox Hill Healthplex website

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.

» View gallery

Company: Schear

Project: Schear website

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.

» View gallery