DETAILS AND PROCESS

Challenge(s) and constraints

Limited budget: our work was initially limited to only one section of the platforn and we had to keep the changes and the new features at minimum, reusing existing features and working on the content organisation.

The new product must be AA accessibility and more responsive even if the project is for Desktop.

UI/UX consistency with other company’s products: we had to work in collaboration with other Design Teams inside the company to define UI guidelines and UX generic components adaptable to all projects.

Managing the platform complexity and keeping the result consistent (navigation and UI): different sections (Assessement, Proctoring, Reporting, Administration management...), different tasks and uses, different users and authorised profiles

Team organisation and communication: different locations (PO and Engineers in Chicago, Design Lead in Boston, Design in Dublin). Also Design had to face to a general lack of precise information and organisation and had to take ownership of the project management and ticket follow-up.

1- Analyse of the current platform and identification of flows (by user typology), pain points and needs

Meetings with sales team and the PO having user's feedback

Meetings with PO and Engineers to have walkthrought to identify current flow(s)

Gathering of information: list of users, the business requirements or specifics improvements needed/requested

Diagram flow Extract from document made for the flow analyse

Annoted screenshot from Proctoring flow Extract from document made for the flow analyse

2- Researches and Design

Below the different types of deliverables I have made, following the project needs and progression.

Initially we were supposed to design only one section of the platform. However, our work was appreciated and some additional budget was unlocked in order to redesign the whole platform.
Also a new UX designer was recently included in the Team to support the Design work coming, working exclusively on the Reporting area.

DETAILS AND PROCESS

Challenge(s) and constraints

UX Design:

One version for each mobile operating system but fitting all devices sizes (phone, mini-tablet, wide tablet) and formats (landscape and portrait) was developped with the minimum of responsivity. So the UX needed to be generic and adapted/working with all devices (i.e buttons placement, font size…).

Also we have to take in count the physical and age differences between the users in the UX design and the elements placements. I.e: a Grade K Student has smaller hands than a Grade 6 student and might handle an heavy Ipad pro with 2 hands insetad of 1. So the button(s) placement must fit in all cases and users.

An intermediate testing step in a classroom allowed us to test and fix most of the UX issues.

UI Design:

The product is composed of 7 levels with 7 different 3D environments and colors, so the UI design and colors needed to be harmonious with all.

Also, it was an internal research and developement project so we had limited budget and resources. The development was made by a vendor that restricted the UI/UX Design: few animations/transitions, simple shapes and visual effects (i.e no gradient) for the UI elements.

The flat style choice resolved the 2 problems: the UI elements are not visually "parasiting" the 3D structures and their simplicity made them easy to implement by the vendor.

Researches and Design

Below the description of the steps and the different types of deliverables I have made, following the project needs and progression.

Research and brainstorming

White board sketching during a workshop on site (Dublin)

Presentation of the UX and the flow

Wireframes build in illustrator showing the flow and animations/transitions

Final screen in Sketch and posted in Zeplin. Single elements were exported in svg and provided to the vendor with the UI guidelines as reference.

Results and evolution

The first version was a success inside the company (sales team and management approval) that allowed the developpent of other versions for other teaching programs (Science). The public also really liked it, other than the visual and technological aspect, the students could work and play at the same time, at home and/or in the classroom intreracting and collaborating with classmates and teacher, encouraging communcation and team work.
Also more R&D projects using AR and VR are currently in development.

Houghton Mifflin Harcourt

Houghton Mifflin Harcourt (HMH) is a global leader in Pre K-12 educational content and services, combining digital innovation and research to make learning more engaging and effective.

Below you can find an small overview of my work in HMH (interactive prototypes on Axure, user flows, architecture information, low and hi-res wireframes...).

HMH Fields trips - Google VR Expeditions

360° virtual field trips through the World, Science and History. Users: Students in classrooms (see BBC Presentation and product page). Devices: VR viewer (Google Cardboard).

Science Dimensions AR

Augmented Reality educational games using the schoolbooks covers as trigger.Users: Students in classrooms and at home. Devices: Mobiles.

PÜSH

My collaborative Diploma Project (2009) is a cross-platform system (Mobile, AR and Multitouch table) to explore museums exhibitions in a new and playful way.

Discover PÜSH (Flyer and website)
The user finds an intriguing flyers with a QR code and a website link. He/She has to go on the website and use the QR code to trigger the Augmented Reality feature: he will see a "teaser" of the Experience and, at the same time, will start it. If he wants to continue, he will have to book a session at the Museum with some friends as Team Players.

Play and Collect (Museum and mobile device)
The team of users is "playing" with the Museum Art Works. Through the mobile devices (each of them have one) they are following a story and are interacting with the Art Pieces to collect items/rewards.

Win and Unlock (Multi-user tactile table)
The users must resolve the last Enigma using the items they previously won so the access to the Exhibition's contents (text, images, videos...) will be unlocked. Once they succeeded, they will be able to consult these contents, at the same time on a multi-user tactile table.

We were a group of 4 students. My role in this project was mainly Project Manager. However, as it was a complex project and the UX Designer needed assistance, I worked on the Design too, building userflows, scenarii and storyboards. Also, I wrote the main part of the Story, the "Game" contents ( Art Pieces - Characters- speeches/interactions) and the final presentation contents.

Multi-user tactile table

This table is the last step of the visit: resolve the final Enigma to unlock the access to the Exhibition's contents. Click here to see the Sketched Interaction Design storyboard.

Storybard/flow for presentation

Flow chosen to present the project to a Jury. The document contains key screens, content and audio background.

Video presentation of Püsh

Malzieu Project "Jeu, set et Mat"

Student Project called "Jeu set et Mat" (2008): a ludic multimedia project based on the French Artist Mathias Malzieu work and artistic world - Writer/Poet, Painter, Singer and Composer of Rock Band "Dionysos".

The project is composed by a website, a mobile app and a desktop widget. It is based on the concept of Collection- then Exchange - of items unlocked/found during the Exploration of a personal transcription of Mathias Malzieu's artistic world.

I have designed the whole project myself: Concept, UX, Art Direction and prototype - included some parts of the code (Flash AS2). Below some Design documents showing the UX works: wireframes, ("zonings"), site maps ("arborescences"), personas ("users scenarii"), sketched storyboard for prototype presentation (realised in Flash).

Sitemaps

Extract of the Design Document showing the information architecture, interactions and connections between the app and devices: website, mobile and desktop widget.
Open the pdf

Wireframes

Extract of the Design Document showing all the project's wireframes(website, mobile and desktop widget) following a specific user flow.
Open the pdf

Complete Design Document

Document communicated to the Jury, explaining the project and gathering all the deliverables from the user scenarii to the planning/budget table.
Open the pdf