Uitdaging

De uitdaging

Clang is het omnichannel marketing platform van e-Village. Grote en bekende A-merken gebruiken deze SAAS-applicatie om hun klanten op elk moment en via uiteenlopende kanalen te voorzien van de juiste marketingboodschap.

Binnen een high-end applicatie als Clang is gebruikersvriendelijkheid een must. Maar naast die usability is ook de algemene visuele uitstraling belangrijk, want die draagt bij aan de merkervaring van het product.

Bekend met onze expertise in interface design besloot e-Village het complete redesign van de Clang user interface aan Clearsite toe te vertrouwen.

User Interface Redesign Clang
Clang Homepage
Oplossing

Het resultaat

We ontwierpen een compleet nieuw uiterlijk voor de omnichannel tool. Daarbij werkten onze designers bij e-Village op locatie. Zo leerden we niet alleen de applicatie goed kennen, maar ook het ontwikkelteam van e-Village.

Alle projectfases werden gedetailleerd vastgelegd in een uitgebreid stappenplan. Als eerste werd het belangrijkste onderdeel van de applicatie uitgewerkt, qua interface, functies en look & feel. In volgende stappen rolden we dit design uit naar de andere onderdelen van de applicatie.

Onze rol beperkte zich niet alleen tot design: tijdens het project konden we het team van e-Village ook op verschillende vlakken ondersteunen met onze ervaring in front-end ontwikkeling.

Een belangrijk onderdeel van het project was de application styleguide die we opstelden. Hier kan het eigen ontwikkelteam van e-Village altijd op terugvallen bij functionele uitbreidingen. Zo blijft de consistentie van de interface altijd gewaarborgd.

Typografie

Open Sans - Regular
Typografie UI Design
Open Sans - Semibold
Typografie UI Design
Open Sans - Light
Typografie UI Design

Kleurgebruik

#4285f4#27323f
#14c9a5#f8ac32#fe584b#9b26af
#6b80a8#ffffff

Van analyse naar ontwerp

Interface design is een bijzondere tak van sport. Aan het daadwerkelijke ontwerpen gaat vooral ook veel denkwerk vooraf. Ook bij e-Village analyseerden we eerst grondig de applicatie om vervolgens planmatig in verschillende stappen te werk te gaan.

  • Productanalyse
    & Projectplan

    analyse
  • Scenario’s
    & Flowcharts

    Flowchart
  • Requirements
    & Wireframes

    Wireframes
  • Interface
    & Styleguide

    Styleguide
User Interface Design Clang

200+ custom iconen

e-Village kiest bewust voor een duidelijke visuele identiteit van haar high-end marketing platform. Daarom is ieder icoontje in de applicatie op maat ontworpen. Inmiddels telt de iconenset meer dan 200 unieke iconen en wordt Clearsite nog steeds ingeschakeld als er bij functionele uitbreidingen nieuwe iconen nodig zijn.

Iconen Iconen

Onderdelen uit de styleguide

Styleguide User Interface Design Clang

Wij hebben Clearsite benaderd voor een volledige restyling van onze webapplicatie. Door heldere afspraken, een duidelijke werkwijze en het vermogen om heel snel de applicatie te doorgronden heeft Clearsite een design opgeleverd waar we met z’n allen trots op zijn.

Op tijd en binnen budget.

Stephan van Maris - Product Owner
www.e-village.nl/clang-3

Gemaakt door

  • Gijs
    van Arem

    Foto Gijs van Arem
  • Wilco
    Westbroek

    Foto Wilco Westbroek
Terberg Leasing
4/7

Terberg Leasing

Mobile first WordPress-website met modulair, doelgroepgericht contentbeheer.

Gepubliceerd in Emerce e Guide 2017