UI/ UX Design: Rakuten Logistic (Tokyo)

Issue: The logistic websites may be difficult to understand for the users (Rakuten Ichiba sellers), many functions and pages to manage orders with CSV, shipments, inventory, warehouses...
Also, other applications had an old design and need renovation for internal logistic teams, or are used in special condition like in a warehouse with a very repetitive use. We need to make a better logistic back office system compare to Amazon, Next Engine for example and become number one in Japan.

Solution: Create the best funtions for users, make the process easy to understand depending of the user and condition, choose the best organization for forms, fields, buttons and table of results, check the user feedback to improve design. We created a UI library with components and documentation to keep the design consistent and a site map.

Process of work: The work flow was following Agile management process, with Scrum Team and sprint period of 2 weeks. As part of the design team of OMS logistic group, I made prototypes of various logistic applications, the main project was BOSS, back office support system with around 5000 users (https://boss-oms.jp) and smaller project for internal services (information about sellers, API management ect), warehouses workers (touchpad to prepare orders, picking, choose packaging ect).

Following the requierements made by the business side by JIRA ticket:
- I done meetings with the users, the product owner, to understand the requierements, the goal of this design. Why it is necessary, who will use it, what is the user flow ect.
- I created mock up using Photoshop and Figma, logos and Illustrations creation using Illustrator, colors identity, then user check and choose the design for internal teams.
- I code in HTML5, CSS3, Javascript, JQuery using component from our library, create new one when necessary, and recently use vue.js framework with a storybook, user can test the prototype for internal project.
- The development process was to merge the new pages from a branch using SourceTree in the develop main branch, and sometime resolve change conflict coming from other branches.
- Finally, developpers connect the data bases and work with our new pages/ function, we reviewed on stagging environment to fix the bug before put the new pages in production.
- Regulary meetings with developer to explain our process, the meaning of the design and the rules to follow.

Web design: I-order (Yokohama)

Process of work: I-order, partner of Rakuten needed to renew the english website www.i-order.asia, I made a mock up on photoshop then code of responsive website, using bootstrap code library. I created graphic elements for events and elements for rakuten shop.

Issue: I-order was searching foreigner clients to help them to sell in Japan e-commerce (Rakuten, Amazon, Wowma).

Solution: I made the website with modern tools, organize events all over the world by creating flyers, search new overseas clients.

Graphic design: Rue du commerce, But.fr, Carrefour (Paris, France)

Process of work: As a contract employee, I worked as graphic designer, content manager for different French e-commerce websites, rue du commerce, but.fr, Carrefour Ooshop Supermarket.
Every week new products was selected to be on front page of the website, sometime special operations or events. The marketing service decided which products will be on the landing pages, so created banners in various format depending of the page with Photoshop, e-mailing and integrate it with a content management system in HTML and CSS, javascript if necessary.

Issue: Each graphic elements of the website must be attractive to make the user click and buy the product, we had tools to annalyse where the users click the most.

Solution: Create interesting banners and mailing, original with attractive colors and buttons with good description of the products, use of the SNS, creation of games to win products like quiz.

Web master: Nissan/ Michelin (Paris, France)

Process of work: For Nissan and Michelin websites, Nissan.fr, Michelin.fr, the process of work was update each website depending of the country with new content, like text translation, images or tools to build a car or a tire for example, I used a content management system created by the company called 'Communique'.

Issue: There was many website to update all over the world in a limited time.

Solution: Learn how to use a Content Management System and update websites very fast.

Graphic designer: Alten (Paris)

Process of work: Alten is a leader in Engineering and Outsourced R&D and IT Services. They also create E-learning and training to help other companies in the process of change, for example: create serious games to explain what is the new process of work, explain to employees what are the disabilties at work ect. The process is a story board was created by the client and engineers, I was in charge of the characters design, the background, animation in Flash, design of mini-games and coding with action script 3 and show the progress to the client during meeting. I made E-learning for clients of Alten and for the company itself also.

Issue:Serious games was usually not very creative, employees need good e-learning to understand new process at work or any necessary training for work.

Solution: I drew characters, background and other elements and digitized them with photoshop and illustrator in Anime style, because my style is manga. The e-learning was looking better, funnier, more attractive for the user.

Extract of E-learning about disabilies at work in the style of Professor Layton game.