ConceptRx Web Application

Sample page: Order
Sample page: Cart

I led the design and development of the ConceptRx.com app – working with PHP and MySQL on the back-end and HTML, CSS, and Angular on the front-end.

The example pages include an experimental logo for a possible branch of the core company. I designed this logo and helped to brainstorm the name.

I chose to use Angular JS on this project since it is the best Javascript framework I have come across. I went with a no JQuery approach to keep the size of the app as low as possible and challenge myself to integrate Angular fully. Angular’s features allowed me to spend less time coding my own solutions and more time focusing on the visual design of the app. With Angular I was able to speed up the app by reducing the number of AJAX requests needed by referencing existing data between pages.

Each main features of this app had complex challenges which I had to find unique solutions to. For example, the Order Page had many requirements involving the sorting, displaying, and automated aspects of the list. The Order Page is intended to do many things that make a pharmacist’s ordering process easier. I want to go into more detail but I won’t because there is a lot to it. One of the big challenges was designing all of the features we wanted into one list without it becoming confusing and hard to use.

The Cart Page also had some challenges that most carts or checkout pages don’t have. It needed some features that are specific to the pharmacy world including: The ability for the pharmacist to see their current order broken down by supplier. The ability to include or remove all items by a specific supplier from the order. A check to let the user know that they have met the minimum required order for that supplier. Ability to edit the order inline. Alerts that notify the supplier of various aspects of the Supplier/Price they have chosen for a given drug.

screen-shot-2016-11-07-at-3-01-18-pm

Since both the Order page and Cart page needed to use a common feature for adding and editing items in the current order – I used a modal that I created to contain the tool required. I created the modal as an Angular add on and built in short cuts and customization options. It allowed me to build the tool within it smoothly despite its complexities. It deals with multiple lists of data, makes two-way references back to the original item row, and does its own calculations to help speed up the user’s ordering process.

Once the App was ready to roll out, I created a roll out process. This App had some unique requirements and I created a roll-out process which we followed for the initial roll out and future version updates. Customers from the old system had to be transitioned into the new one. This involved importing their login accounts into the new system, re-integrating the new software into the pharmacies workflow. For new customers, we had to integrate our software with whatever software they were already using to track things like current inventory numbers, and inventory usage data.

ConceptRx.com Home Page

www.ConceptRx.com

I designed, coded, and wrote copy for the home page. I also created the logo and brand identity. I designed this home page to let customers know what ConceptRx is and what it does in as quickly as possible. This meant clear and concise copywriting and limiting unnecessary or misleading text and imagery as much as possible.

ConceptRx started years ago, before I was involved, as a platform to help pharmacies manage their inventory. The service gained lots of initial interest from pharmacies. At the time it was cutting-edge. However, customer base quickly diminished due to a clunky interface and countless usability issues. This eventually spawned an idea to rebuild the company with a new identity and completely new web application.

I worked with a team to plan and implement these changes. I created the new logo and brand identity, and worked to architect the new app and it’s features. I even worked with our print designer on brochures and postcards.

The homepage is designed to be 100% responsive. Whenever possible, I try to do responsive development using a single HTML document whenever possible. This is as opposed to having a separate document that loads adaptively depending on the device being used to view. I find that this can make future updates more straightforward, makes the whole process cleaner, and causes the site to work well on intermediate screen sizes (such as when a desktop browser window is not at full size).

The next step was building the new web app. More about the App [here].