loading

>
X

Get more info from ICS.

To contact an ICS representative or request more information on ICS's products and services, please submit the form below:

User Experience Services

The ICS UI/UX team knows how to focus on that elusive user experience. By applying industry best practices to your particular problem domain, we work with you to design a world-class user interface that not only meets your customer's requirements, but actually makes them want to use your application.

Have an upcoming project? Ask how we can help!
Research Design Testing and Support
Know the Objective Understand the Users Create a Design Concept Develop the Design Test and Validate Implementation Support
  • Heuristic Analysis
  • Expert Review
  • Define Requirements
  • Understanding realities of engineering & feasibility of implementation and employment
  • Hardware Recommendations
  • Interviews
  • Field Research
  • Formative User Testing
  • Scenarios
  • User Profiles
  • Focus Groups
  • Creative Brainstorming
  • Concept Creation
  • Story Boarding
  • Ideation
  • Information Architecture
  • Wireframes
  • Map & Flow
  • Visual Design
  • Branding
  • Pixel-Perfect Graphics
  • Summative User Testing
  • Further Design Refinement
  • Custom Graphics
  • Graphical Assets
  • HD Imaging
  • Technical Expertise
  • Prototyping and Simulation
  • Implementation Full or Partial

Follow our UX Journey

With The Sports Med, Inc. Injury Tracker

The ICS UI/UX team was charged with transforming an existing sports injury desktop application into a dynamic and mobile app for tablet devices, enabling sideline use for sports trainers and coaches to record and treat athlete's injuries.

Know the Objective

We began with the end in mind.

In this phase, we met with key stakeholders of Sports Med who needed a way to use an existing injury assessment tool in the field. ICS researched and immersed ourselves in and performed expert review of the existing product. We defined requirements based on goals and understanding the realities of engineering, implementation and delivery. We then set the roadmap to convert the existing desktop software to a mobile tablet application.

Objective Best at statement
Take the Sports Med Inc. player injury desktop software and transform it into a dynamic app for tablet devices to be used by trainers and coaches from the sideline. Record and treat athlete injuries in live game situations from the side line.

Understand the Users

We listened more than we spoke.

Once we assessed the project and its parameters, we researched the users, sports trainers and coaches, and we came to understand them and how they used the software. We did this through a series of interviews, field research, situational heuristic observations, focus groups and user testing to formulate the foundation of user-centric design and strengthen the roadmap.

Create a Design Concept

Fresh, relevant ideas with impact were presented.

In this phase, our UX designers came together to evaluate the data and brainstorm the most crucial elements to convert the desktop applications to a touchscreen tablet. The team developed ideas and storyboards to present creative concepts that strategically address the user while making a visual impact.

Develop the Design

Simply beautiful designs, delivered.

Once a creative direction was established, we presented the navigation for the user experience using wireframes and a map and flow diagram. Once the wireframes with map and flow were created, graphic designers were able to mock up the key screens bringing it all together, layering branding and illustrative elements to deliver the design.

Test and Validate

Pixels were indeed, perfected.

User testing conducted in this phase of the Sports Med project was set to identify areas of further development and validate the successes of components of the design. Our team recorded users in the field during pre-season games, ran cognitive scenarios, simulated trials and gathered feedback from interviews to ensure and engaging experience.

 
 

Implementation Support

A great product was delivered.

The ICS UX team delivered a complete user experience for a touchscreen tablet. We provided a pixel-perfect product that included high-definition visual graphical assets, imaging with various screen resolutions, custom graphics and icons integrated with Sports Med branding, transforming the original sports injury desktop solution into a dynamic application for touchscreen tablet use. The Sports Med team was thrilled with the easy to use and intuitive application.

case 4: // Design the Concept
var scaleVal;
if (distRatio <= 0.33){
  scaleVal = distRatio * 1.5;
  uxObj.designConcept.sketchbook["bottom"] =  - (uxObj.designConcept.sketchbookHeight * (0.33 - distRatio) * 4) + "px";
  uxObj.developDesign.tabletFrame["bottom"] = distRatio * 400 - 195 + "px";
          
  uxObj.developDesign.tabletFrame.transform = "scale3d(" + scaleVal + "," + scaleVal + ",1)";
  uxObj.developDesign.tabletFrame.webkitTransform = uxObj.developDesign.tabletFrame.MozTransform = uxObj.developDesign.tabletFrame.msTransform = uxObj.developDesign.tabletFrame.transform;
          
  uxFunctions.preTransition.exec(uxObj);
  uxFunctions.postTransition.reset();
} else {
  if (distRatio < 0.67) {
    scaleVal = distRatio * 1.5;
    uxObj.designConcept.sketchbook["bottom"] =  - (uxObj.designConcept.sketchbookHeight * (distRatio - 0.3) * 2) + "px";
            
    uxObj.developDesign.tabletFrame.transform = "scale3d(" + scaleVal + "," + scaleVal + ",1)";
    uxObj.developDesign.tabletFrame.webkitTransform = uxObj.developDesign.tabletFrame.MozTransform = uxObj.developDesign.tabletFrame.msTransform = uxObj.developDesign.tabletFrame.transform;
            
    uxObj.developDesign.tabletFrame["bottom"] = distRatio * 400 - 195 + "px";
    uxFunctions.preTransition.exec(uxObj);
    uxFunctions.postTransition.reset();
  } else {
    uxFunctions.preTransition.reset();
    uxFunctions.postTransition.exec(uxObj);
    distRatio = distRatio - 0.67;
    uxObj.developDesign.conceptLayers.wireframeMockup["opacity"] = distRatio * 3;
    uxObj.developDesign.conceptLayers.wireframeSketch["opacity"] = 1 - distRatio * 3;              
  }
}
break;
        
case 5: // Develop the Design
        // Transitions on this slide, of frame inner image opacities, are done w/ CSS3 transitions, for performance.
  if (distRatio < 0.5) {
    uxFunctions.preTransition.exec(uxObj);
    uxFunctions.postTransition.reset();
  } else {
    uxFunctions.postTransition.exec(uxObj);
    uxFunctions.preTransition.reset();
  }
break;
        
case 6: // Test and Validate
   if (distRatio < 0.2) {
      distRatio = distRatio * 5;
      uxObj.developDesign.handImg["left"] = uxObj.developDesign.handFinalLeftCtr - uxObj.developDesign.tfHeight + "px";
      uxObj.developDesign.handImg["bottom"] = (-2.18) * uxObj.developDesign.tfHeight + "px";
      uxFunctions.preTransition.exec(uxObj);
      uxFunctions.postTransition.reset();
    } else if (distRatio < 0.35) {
      distRatio = (distRatio - 0.2) * 6.667;
      uxObj.developDesign.handImg["left"] = uxObj.developDesign.handFinalLeftCtr + uxObj.developDesign.tfHeight * ( distRatio - 1.09) + "px";
      uxObj.developDesign.handImg["bottom"] = - 2 * (1.09 - distRatio) * uxObj.developDesign.tfHeight + "px";
      uxFunctions.preTransition.exec(uxObj);
      uxFunctions.postTransition.reset();
    } else if (distRatio < 0.40) {
      //distRatio = (distRatio - 0.2) * 20;
      uxObj.developDesign.handImg["left"] = uxObj.developDesign.handFinalLeftCtr + uxObj.developDesign.tfHeight * 0.09 + "px";
      uxObj.developDesign.handImg["bottom"] = - uxObj.developDesign.tfHeight * 0.18 + "px";

      uxFunctions.preTransition.exec(uxObj);
      uxFunctions.postTransition.reset();
    } else if (distRatio < 0.43) {
      //distRatio = (distRatio - 0.25) * 33;
      uxObj.developDesign.handImg["left"] = uxObj.developDesign.handFinalLeftCtr + uxObj.developDesign.tfHeight * 0.09 + "px";
      uxObj.developDesign.handImg["bottom"] = - uxObj.developDesign.tfHeight * 0.15 + "px";
      uxFunctions.preTransition.exec(uxObj);
      uxFunctions.postTransition.reset();
    }
          

Integrated Computer Solutions

Have a UX Project?

Take your own journey with us.