Various project

Gweltaz Loquin
5 min readDec 1, 2015

--

Including UI/UX design, Agile management, development (web & soft)…

I will present here some of my student projects.

Summary

  1. Intranet website for the French Army
  2. L’arbre de connaissances (Knowledge shaft)
  3. TrAVis (Tracking Data Analysis and Visualization tools)
  4. UX research for end-users with cognitive disabilities

1. Intranet website for the French Army

  • Project: In autonomy
  • Deadline: 3 months (two in 2011 and one in 2012)
  • Tools & languages:
    - Photoshop
    - CMS SPIP
    - (x)HTML-HTML5, CSS-CSS3, jquery, ajax
  • Skills needed besides designing and coding:
    - thoroughness
    - excellent writing and speaking skills
    - understanding of confidentiality policies

I had to redesign and update CPAC’s website.

My main goal was to improve the usability of the website. I had to take into account users who are visually-impaired or exhibit deficient mobility.

I had the opportunity to introduce my work in front of the high-ranking army officers. It was during the event of Health, Quality, Security & Environment certification. The experience was astounding!

This picture of Chief Warrant Moreira and I during the event is the only document I could take with me.

Introduction of my work in the theater of the military camp

2. L’arbre de connaissances (Knowledge shaft)

  • User research with: J.B. Billaud — M. Blanchard— G. Loquin
  • UI/UX design part in autonomy
  • Deadline: 2 weeks
  • Tools & languages:
    - Kmade
    - Balsamiq mockup
    - Photoshop
  • Skills needed besides designing and coding:
    - identify & define task
    - conduct a user research
    - empathy with teachers ;)

Innovating in education, some of our physics engineering teachers like trying new things. One of them is using a knowledge shaft system to help student visualize their progresses.

Each HCI students had two weeks to collect data and propose a visual redesign of his current system.

As we had to consider the views of students and teachers, we surveyed each group separately. Thus, we collected data on what was already working and what should be improved for two distinct perspectives.

I followed this path:
- Identify tasks — Forms & interview with students & teachers
- Define tasks — Kmade software
- Create low-fidelity mockups — Balsamiq mockups
- Create high-fidelity prototype — Photoshop

Here are some exports:

Low fidelity prototype using Balsamiq Mockup
High fidelity prototype using Photoshop (left: teacher homepage, right: student view of mechanical engineering course)

The ideas of tree and progression led me to create a subway-like visualization. The fact is each student follows a unique path by deciding to concentrate on some subjects to unlock the next course.

His pedagogy is based on the participatory approach of Freinet. This method force us to meet prerequisite for the next semester more efficiently than a single exam.

3. Travis (Tracking Data Analysis and Visualization tool)

  • Group project with: J. Coulon — S. Ledunois — G. Loquin
  • Deadline: 6 months
  • Tools & languages:
    - Photoshop
    - Personas & Users stories
    - Angular JS
    - Material Design
    - Marvelapp/Powerpoint (for interactive prototypes)
  • Skills needed besides designing and coding:
    - Information System : data management
    - Database Design and implementation
    - Data mining & Semantic Web
    - Security of Information Systems

TrAVis is a research project initiated by Madeth MAY, senior lecturer at ENSIM. He is a former student and teacher at INSA Lyon , one of the top five french engineering school.

TrAVis is a tracking tools allowing moderators -for instance teachers- to visualize data. With such a tool you can see anything on the platform supervised from click to scroll. It intents to discovers patterns by tracking user’s behavior. For instance a lost of interest in a course or scholar failure in extreme cases.

Our goal was to redesign Travis then enhance his system.

Knowing our work methods, Madeth gave us carte blanche. We chose to refactor the code developed during his thesis , from PHP to AngularJS. And we used google material design guidelines to keep consistency between platforms.

We thus anticipated the mobile need of upcoming versions.

I was the team lead (scrum master) on this project.

Homepage hi-fi prototype

Last but not least…

4. UX research for end-users with cognitive disabilities

  • Mostly in autonomy but with great feedback and share of experiences with office neighbors (Phd and bachelor students)
  • Deadline: 6 months
  • Tools & languages:
    - Balsamiq Mockups
    - Illustrator
    - Photoshop
    - Android
  • Skills needed besides designing and coding:
    - Self education on various subjects
    - Project management (autonomous)
    - Design thinking
    - Conduct a user experience research
    - Personas, users stories

In conclusion of a dual degree, my final year internship had to be done in engineering and research.

I chose the LICEF at Téluq in Montreal to spend my last semester as student.

Téluq offers advanced trainings thanks to a strong research potential.
This distance university has 18 research units including the Cognitive Computing Laboratory and Training Environments (LICEF).
Accredited Research Centre since 1995, LICEF directs its fundamental and applied researches in the field of Cognitive Computing.

Charles Gouin-Vallerand was my supervisor there.
Curious, challenging, Charles is an awesome person to work with!
Perrine Ruer, his Phd student in cognitive computing, was my precious coworker during these six months. Our brainstorming sessions and her incredible feedbacks saved me amount of time, thank you again Perrine :)

First, I educated myself on cognitive diseases and the means to constrain their progression. I deepened my knowledge on gamification, plasticity of interfaces and ubiquitous computing too.

My goals were to:

  • Fulfil the Human Centered Design of the android app (User Interface/User eXperience);
  • Take into account users w/ cognitive deficiencies such as early stages of Alzheimer disease;
  • Determine required features to suit users’ needs via brainstorming sessions.

I also had the opportunity to take part in the 2015 INTER/REPAR summer school in Sherbrooke. The theme was “Innovation, creativity and communication serving rehabilitation technologies”.

Our missions were to:

  • Work on the conceptual design of a technological solution addressing rehabilitation needs;
  • Create a proof-of-concept (POC) in interdisciplinary team (rehabilitation/engineering);
  • Plan the design and evaluation of the technological solution.
Some mockups done with Balsamiq
Screenshot of the Illustrator file

More to come in another article!
I am currently designing a mobile app to motivate users through their challenges… :)

Thanks for reading this far, have a wonderful day!

--

--

Gweltaz Loquin

Productivity and inner peace seeker — Lifehacks lover — Front end engineer (HCI & UI/UX)