How to redesign and implement new guidelines?
Photoshop, Illustrator, Bootstrap
Alkemics is a collaborative platform created in 2013, with the simple but complex objective of smoothing exchanges between CPGs manufacturers and retailers, starting with e-commerce workflows.
When I came at Alkemics as the first UI UX Designer, I wanted to focus on current users and deeply understand the consumer goods universe. But, after few days, I understood that the User experience starts in your organization.
To better define the problems and needs, I talked with the teams: business intelligence, sales, marketing and tech.
For BI, it was difficult to pick charts to deliver understandable, homogenous and clear reports for our customers.
For Marketing, the main problem was to clearly communicate Alkemics positioning through the corporate website.
For Sales, the PowerPoint template was hard to customize, and didn’t allow them to deliver a clear message.
Last but not least, tech teams had no guideline and were losing a lot of time to define a meaningful and consistent UI. Often mixed up with the Bootstrap framework in front, it was too inconsistent to deliver an intuitive user experience.
To summarize, a lot of time was lost on finding templates, creating components or presentation. Moreover this inconsistent design provided bad experiences to our users and deteriorate Alkemics reputation.
How might we provide design guidance in the company and a clearer experience for our users?
Report and plan
After taking all those feedback, I created a report to explain the importance, for internal teams and external communication, of a new corporate identity. Then, I presented it to the founders and gave them a plan with prioritized solutions, goals and time estimate to develop them.
The overall experience was not a disaster at all, but the information architecture and consistency could be easily improved with some adjustments.
But, to add « more challenge to the challenge », i only had 2 weeks to deliver a first iteration with a new guideline, to adapt the print supports and social media, and to launch the new corporate website.
Hopefully, i had an army of smart people to help me for this huge metamorphosis: a dedicated front-dev to quickly bootstrap and verify all the impacts on the platform, and the Head of Marketing to develop and clarify the website.
Brand and graphic design
To identify the differentiating points of Alkemics, I analyzed the main competitors and their positioning. After some researches, i translated all my findings in a simple mood-board to express with pictures and keywords the « essence » of the company.
Benchmark and graphic codes
Colors, Typography & Headings
After that, i worked on the most visible issues of the user interface: colors and headings.
The color palette was classic (coming from Bootstrap) but used systematically on all components.
The headings was not used in a consistent way, and the text was mostly in uppercase, to indicate their importance.
Colors: first iteration
Colors: second iteration
Let’s test with Bootstrap!
Launch & Learn
After 2 weeks, the challenge has been completed! A new guideline has been deployed on user interfaces and the corporate website has been launched. As internally as for customers, this new identity was a success and fit better with our « first smart platform for CPGs data exchange » positioning.
Our previous so-called guideline had grown to a total mess, interfaces could have a totally different look and feel and the same symbol (like a color) could have multiple meanings.
She spotted the issues and provided principles that we implemented together in a Bootstrap theme. Thanks to Alexa’s work it since has been much easier to develop consistent and efficient interfaces.