Case Studies

A quick rundown of some details regarding recent projects I have been involved in in terms of UX Architecture, System Design, UI Theming and Library as well as Implementation, having been given Carte blanche to provide much of my expertise in a user-oriented way to define and shape solutions for Desktop, Mobile and more specific Field Workers devices, and delivering both Design and integration.

SIMFRONT (DEFENSE) MASTER M (EDUCATION)
REQUEST A FREE QUOTE FOR YOUR PROJECT

Complex HMI Design

Multi-profile Specific Field Workers Devices

Simfront Simulation Systems

Among the most challenging projects requiring a sharp and complete analysis of the available materials at start then defining those to be created in order to provide a full and coherent solution displaying several applications united as a whole and gathered around common UX principles and UI rendering as a core design at the end of the exercise.

THE PROJECT AND THE NEEDS

We need to rethink the User Experience and to modernize the Look & Feel of our applications that are currently in use by different profiles, and to have them fit those to come. We are seeking someone able to handle the whole Design System for our complex applications and their components...

UX ARCHITECTURE

The very first step of the project consisted in analyzing and then redefining the key principles of the user experience architecture as a whole, taking into account the hierarchy of information and user flows in line with the different types of devices for which the application was intended including specific ones such as the Panasonic FZ-M1, FZ-G1 and CF-33 tablets, allowing the addition of embedded components and their data.

IMPLEMENTATION-READY MATERIALS

The next step was the creation of complete UI/UX walkthroughs containing all the information dealing with the UX principles defined upstream, the behaviors and the different specific and responsive key points, as well as the properties and values of every component to support their implementation. In addition, a global SVG library rich of 600+ icons was produced and each walkthrough was provided in Confluence.

COMPONENTS TO FIT MAIN INTERFACE

The adding of embedded components was redesigned in terms of UX architecture in order to fit naturally the parent-application as a whole, and it was enriched with a brand-new library of icons that was set to feed the same global rendering. Fully Responsive, the additional components were designed to especially fit different devices used by field personnel running the system it was embedded to.

RWD, SVG, CSS, HTML w/ JS Framework.

Designed for Desktop and specific Field Workers Devices.

NEED TO RE-THINK YOUR INTERFACE?
Panasonic CF-33 wire view
Panasonic CF-33 mixed view
Panasonic FZ-G1 wire view
Panasonic FZ-G1 view
Panasonic FZ-M1 wire view
Panasonic FZ-M1 view
UX UI Screens
UX & UI info + implementation props and values
Specific components definition
Vector Icon Library. Export as SVG files

UX/UI • CSS • WIREFRAMES • WALKTHROUGHS

Simfront Simulation Systems

Previous Next
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Case Study Image
Previous Next

Parts of the illustrations above are the property of Simfront Simulation Systems / Calian Corp.


Adaptive Interfaces Design

Simplifying Outdoor Face-to-Face Sessions

Master M

Surely among the most complete and sharp projects I have been involved in, a from-scratch project for which it took a sharp UX design to organize a complex navigation, lots of functionalities and a high volume of data, a responsive multi-themes UI design to satisfy every user and smart integration and development for the application to load fast.

THE PROJECT AND THE NEEDS

We need to design and develop and adaptative desktop application that will be linked to the Ministry of Education. The technologies are not yet defined and we have almost no design. We need someone who is capable to handle both design and frontend development...

BRANDING & UX/UI ARCHITECTURE

The first step of the project consisted in defining the key principles of the user experience architecture, taking into account the hierarchy of information and user flows in coherence with the type of device for which the application is intended. In parallel, a proposal for a plural identity graphic design was formulated considering the scope of the interface, the type of target audience and contemporary trends in graphics.

INTEGRATION & DEVELOPMENT

The next step was the integration of the responsive interface using flexible declarative code for WPF and each of its elements using the complete and documented graphic design material previously validated by the Product Owner, according to the 'pixel-perfect' method. The use of XAML allowed to avoid any important refactoring, some modifications having been requested by the owner during the development phase.

DESKTOP APPLICATION

Master M was launched about 1 year after the beginning of its design and development. This responsive desktop application required the creation of the most relevant responsive interface in terms of user experience architecture, several graphic themes, the management of a large volume of data and a development subject to the technical requirements for connection and data sharing with the Ministry of Education.

Implementation: XAML and C#, SVG and Bitmaps.

Designed for Desktops, Laptops and Tablets.

NEED TO DISCUSS A PROJECT?
Splash screen
Blue UI Theme
Management System
Dark UI Theme

FIELD APPLICATION

Master M Orientation is a web-based mobile application born from MasterM that specifically offers tools for the orientation of candidates in the context of their enrollment in an educational structure. This mobile field application was designed to facilitate the acquisition of all the data of each candidate by the field staff and the communication of this data in a secure manner to the appropriate department via Master M in order to complete and validate their registration and thus avoid incomplete files and unnecessary delays. Master M O, an extended app. of Master M.

Implementation: HTML, CSS, JavaScript SVG and Bitmaps.

Specially designed for Tablets.

NEED A FIELD WORKER APPLICATION?
SIMFRONT (DEFENSE) MASTER M (EDUCATION)

Involved in 21 projects in the last 6 years designing and implementing user oriented solutions.

Designer-Codeur's name and logotype © 2019-Present Sylvain C. Millot. All Rights Reserved.