interaction design/user experience design

docs

Probleemstelling: 
 
Hoe kan een digitale oplossing het opmaken van standaard documenten zoals brieven, offertes en facturen versnellen en vergemakkelijken?

Bedrijf:  Extreme Media, Lelystad

Functie: UI/UX Stagiaire 

Prototype: https://invis.io/RYA0LY673

Tools: Sketch, Invision, Material Design

Deze applicatie heeft als hoofddoel om zelfstandige ondernemers te ondersteunen bij het maken en versturen van offertes, facturen en brieven.

Onderzoek

Ieder project begint met het doen van onderzoek. Voor dit project had ik helaas geen toegang tot de doelgroep. Om toch inzicht te krijgen in de user needs en de doelgroep heb ik voornamelijk deskresearch uitgevoerd en gesprekken gehouden met de opdrachtgever die zelf in contact staat met de doelgroep. Uit dit onderzoek zijn de volgende business goals en user needs gekomen:

Business goals

    • De opdrachtgever wil het opmaken van veel voorkomende documenten voor gebruikers efficiënter en gebruiksvriendelijker maken.
    • Organisaties en mkb’ers/zzp’ers helpen met het bewaken van hun huisstijl.
    • Dit wil de opdrachtgever doen op een manier die niet aanvoelt als een systeem.

Bedrijf:  Extreme Media, Lelystad

Functie: UI/UX Stagiaire 

Prototype: https://invis.io/RYA0LY673

Tools: Sketch, Invision, Material Design

User needs

Op basis van gesprekken met de opdrachtgever en het analyseren van soortgelijke applicaties en de gebruikers van deze applicaties zijn de belangrijkste user needs samengesteld. Deze luiden als volgt:

    • snel pdf’s genereren
    • minder type
    • tijd besparen met het maken van veel voorkomende documenten
    • huisstijl bewaken
    • eenvoudig documenten delen.
    • documenten archiveren en doorzoeken
    • Documenten digitaal ondertekenen.

Persona

Op basis van gesprekken met de opdrachtgever en het onderzoek naar soortgelijke systemen en hun doelgroep heb ik een persona opgesteld. Deze persona vertegenwoordigd de doelstelling, user story en frustraties van de typische gebruiker van deze applicatie.

Welke soort content is er nodig om offertes, brieven en facturen te maken?

Om deze vraag te beantwoorden heb ik een aantal standaard offertes, brieven en facturen gekeken. In de basis kwam ik tot de conclusie dat de applicatie sowieso de mogelijkheid moet bieden om de volgende content types te ondersteunen:

  • Tekst
  • Factuurregels
  • Contactgegevens
  • Productgegevens
  • Afbeeldingen
  • Handtekening
  • De mogelijkheid om voor ieder van de bovenstaande types een template te maken, op te slaan, te wijzigen en te verwijderen.

Basis functionaliteiten document editor

Hiernaast vind je schematische weergave van de hoofdtaken voor het toevoegen, verwijderen en aanpassen van content en content templates.

Interface concepten

Omdat ik zelf nog weinig ervaring heb met het ontwerpen van soortgelijke interface heb ik besloten om onderzoek te doen naar soortgelijke interfaces. Voor dit onderzoek heb ik er voor gekozen om de interfaces van webbuilders nader te bekijken. Ik heb hier voor gekozen omdat deze builder veel van de eerder genoemde content types ondersteund. 

Tijdens mijn onderzoek ben ik drie verschillende soorten interfaces tegengekomen.

Namelijk:

  • Resultaat en interface gescheiden
  • Interface zo veel mogelijk geïntegreerd in het medium
  • Een combinatie van een gescheiden interface en een geïntegreerde interface.

Op basis van deze bevindingen heb ik in overleg met de opdrachtgever en met de user needs, persona en business goals in het achterhoofd gekozen voor de derde optie.

Hiernaast vind je enkelen visueel builder/web builders die ik nader heb bekeken bij het onderzoek naar soortgelijke interfaces. Van boven naar beneden: Divi by Elegant Themes.  Beaver Builder  Elementor

Visueel Design

Nu het wat, waarom en hoe duidelijk is. Is het tijd voor het visueel design. Zoals eerder genoemd wil de opdrachtgever niet dat het systeem aanvoelt als een systeem. De opdrachtgever heeft aangegeven dat de visuele style van Google’s Material Design hem om deze reden erg aanspreekt. Ik zelf deel deze mening enigszins en heb besloten om onderzoek te doen naar Material Design van Google.

Afsluitend heb ik de wireframs aan de hand van Material Design verder ontwikkeld naar visuele uitwerking en deze gebruikt om een klikbaar prototype te maken in Invision.

Prototype: https://invis.io/RYA0LY673

Bedrijf:  Extreme Media, Lelystad

Functie: UI/UX Stagiaire 

Prototype: https://invis.io/RYA0LY673

Tools: Sketch, Invision, Material Design

Andere projecten