OVERVIEW
The technology behind Heretto's products fascinate me. Documentation, for most companies, is key. It's basically a digital manual that can be updated worldwide and instantly. For employees and customers, this solution is, in my opinion, revolutionary.
I've been hired as a UI designer in April 2022. I work directly with customers to create and enhance the documentation platform, pushing the boundaries of innovation under the conventions and constraints of a standard CCMS and my clients' brand guidelines.
Since April 2022, I've designed around 10 documentation portals for clients wolrdwide.
RECOMMANDATION
"Joséphine is a great choice for compelling, well researched UX/UI design. She can propose effective solutions to customers, and then respond to their feedback thoughtfully. She works fast, is super responsive and her communication skills are excellent.
Josephine’s coding skills allow her to work with the dev team directly to solve problems."
Chris DeTurk, Professional Services Manager at Heretto
DESIGN PROCESS
01.
STYLE TILES
The first step of this design process is gathering all the client's brand elements and summarizing them in style tiles to showcase the look and feel of the documentation portal. I usually propose six options the client has chose from with different visuals for main elements: dark/light versions, tiles with or without pictures, icons and buttons...
The client then comments on the Figma file to amend and chose the best option for their documentation portal.
02.
WIREFRAMES
The second step of the process is the wireframes: there are 5 main pages on a documentation, and each of them have multiple optional functionalities. On the wireframes, I expose to the client the architecture of their future website and they can chose every functionality on each page: SSO option, featured articles, descriptions, hero section...
The client then comments on the Figma file with the features they want.
03.
MOCK-UPS
The third step of the process is the mock-ups: they are a the combination of the first two steps (style tiles and wireframes). Here I'm designing their five main portal pages the way the visitors will see them once the portal is developed.
The client continues commenting the mock-ups to adjust the theme, the colors of buttons, the images, the navbar etc.
04.
PROTOTYPE
This step is basically making the links between all the pages on Figma. From this, I can send a prototype link to the client, so that they can test out how the portal would look and function.
From that prototype link, the client can showcase to their employees/clients how the documentation portal will work. We then use Maze to get feedbacks from different stakeholders and amend the prototype and mock-ups.
05.
DESIGN SYSTEM
This final step is meant for the documentation content. The CCMS that Heretto has developed has constraints in forms of DITA elements. The design system is a catalog of different design options for each DITA elements such as <parameter-list>, <xsml>, <code-block>, <table>, etc.
The client comments on each DITA element page to help us amend into the best option for their content. From the design system, I'll select the chosen options and transfer them to the developer in charge of that client's documentation portal development.
CONTINUOUS IMPROVEMENT OF HERETTO'S DESIGN PROCESS
Objective: to reduce design time from 20 days (1 month) to 10 days (2 weeks).
In 4 customer assignments, we not only achieved the target, but also improved customer satisfaction with more time for customer feedback on the design, and the ability to add more design effects to the CCMS components.
