<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dev &#8211; Dan&#039;s Art</title>
	<atom:link href="https://dev.dans-art.ch/feed/" rel="self" type="application/rss+xml" />
	<link>https://dev.dans-art.ch</link>
	<description>Webdev</description>
	<lastBuildDate>Tue, 20 May 2025 12:14:48 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.1</generator>

<image>
	<url>https://dev.dans-art.ch/wp-content/uploads/2022/11/Logo-on-gray-150x150.png</url>
	<title>Dev &#8211; Dan&#039;s Art</title>
	<link>https://dev.dans-art.ch</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Faszination Wildpflanzen</title>
		<link>https://dev.dans-art.ch/faszination-wildpflanzen/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Mon, 03 Apr 2023 05:42:17 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<category><![CDATA[Wordpress]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=435</guid>

					<description><![CDATA[Oft unbeachtet sind sie, die Wildpflanzen. Jedoch kann man daraus mit Know-How und ein wenig Experimentierfreude seine Gerichte verfeinern und neue Geschmackserlebnisse entdecken. Bei dieser Website war das Design bereits erstellt, jedoch nicht für verschiedene Geräte optimiert und ohne Funktion. Es wurde dann auf Basis von WordPress einen modernen Webauftritt realisiert. Neben den Standardfunktionen wurde [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Übernehmen von Design Vorlage</li>



<li>WordPress</li>



<li>Eventkalender</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:50vh;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-437 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2023/04/Faszination-wildpflanzen-showcase.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<p>Oft unbeachtet sind sie, die Wildpflanzen. Jedoch kann man daraus mit Know-How und ein wenig Experimentierfreude seine Gerichte verfeinern und neue Geschmackserlebnisse entdecken.</p>



<p>Bei dieser Website war das Design bereits erstellt, jedoch nicht für verschiedene Geräte optimiert und ohne Funktion. Es wurde dann auf Basis von WordPress einen modernen Webauftritt realisiert. Neben den Standardfunktionen wurde die Seite um ein Newsletter und Eventkalender erweitert. Damit sind immer die aktuellen Events auf der Seite zu sehen und eine Anmeldung ist direkt auf der Event-Seite dank einem dynamischen Formular möglich.</p>



<p>Lasse dich von den Wildpflanzen faszinieren.</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" href="https://faszination-wildpflanzen.ch" style="background-color:#66ce47" target="_blank" rel="noreferrer noopener">Zu Faszination Wildpflanzen</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Design Studie &#8211; Timy App</title>
		<link>https://dev.dans-art.ch/timy-design-studie/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Thu, 16 Mar 2023 16:22:55 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=396</guid>

					<description><![CDATA[Im November 2022 habe ich den Lehrgang als UX Designer begonnen. Dabei ist das Projekt &#8222;Timy&#8220; entstanden. Über das Projekt Ziel war es, eine App zu designen, welche an Arbeitnehmer gerichtet ist, welche oft ändernde Dienstpläne und mehrere Arbeitgeber haben. Die App erlaubt das einfache Verwalten der Einsätze und gibt eine Übersicht über alle Aspekte [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Design Studie Zeiterfassungs App Timy</li>



<li>UX und UI Design</li>



<li>Durchführen von Studien</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:50vh;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-279 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2023/01/Mockup-Timy_2-1.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<section class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<p>Im November 2022 habe ich den Lehrgang als UX Designer begonnen. Dabei ist das Projekt &#8222;Timy&#8220; entstanden.</p>



<h2 class="wp-block-heading">Über das Projekt</h2>



<p>Ziel war es, eine App zu designen, welche an Arbeitnehmer gerichtet ist, welche oft ändernde Dienstpläne und mehrere Arbeitgeber haben. Die App erlaubt das einfache Verwalten der Einsätze und gibt eine Übersicht über alle Aspekte der Dienstplanung.</p>



<p class="has-text-align-center"><strong>Projekt Zeitraum</strong>: November 2022 &#8211; Januar 2023<br><strong>Meine Rolle</strong>: UX Researcher &amp; UX Designer<br><strong>Verantwortlichkeiten:</strong><br>&#8211; Grundlegende Forschung<br>&#8211; Forschungen über Konkurrenzprodukten<br>&#8211; Durchführen von Studien<br>&#8211; Erstellen von Konzeptzeichnungen<br>&#8211; Erstellen von Wireframes und Mockups</p>



<p class="has-text-align-center"><br></p>



<hr class="wp-block-separator alignfull has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80);background-color:#6bd548;color:#6bd548"/>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Das Problem</h3>



<p>Oft wechselnde Dienstpläne und mehrere Arbeitgeber machen das Planen der eigenen Zeit zu einer Herausforderung. Auch die Nachvollziehbarkeit von Anpassungen und ein komplizierter Prozess für Dienständerungen erschweren das Leben unnötig.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Das Ziel</h3>



<p>Eine einfache App, welche dem Mitarbeiter eine schnelle Übersicht über alle Dienstpläne gibt. Änderungen sollen diese unkompliziert über die App machen können.</p>
</div>
</div>



<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80);background-color:#6bd548;color:#6bd548"/>



<h3 class="wp-block-heading">Erforschung von Nutzergruppen</h3>



<p>Es wurden mehrere Studien erstellt welche halfen, die Zielgruppe zu definieren und die Probleme bestehender Lösungen herauszufinden. Hierbei wurde der potenzielle Nutzer an erster Stelle gesetzt und die Lösung auf die Nutzergruppe zugeschnitten. Dabei ergaben sich vier Hauptthemen.</p>



<div style="height:42px" aria-hidden="true" class="wp-block-spacer"></div>
</section>



<div class="wp-block-columns alignwide has-medium-font-size is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-radius:0px">
<div class="wp-block-column is-vertically-aligned-top has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">1</h3>
</div>



<p class="has-text-align-center"><strong>Spontane Dienstwechsel</strong></p>



<p class="has-text-align-center">Arbeitspläne können sich schnell ändern und oftmals ist es nicht klar, was genau geändert wurde.</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">2</h3>
</div>



<p class="has-text-align-center"><strong>Änderungen anfragen</strong></p>



<p class="has-text-align-center">Dienständerungen sind mühsam und oftmals fehlt ein guter Überblick, was wann angefragt wurde.</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center circle-back wp-block-heading">3</h3>
</div>



<p class="has-text-align-center"><strong>Kommunikation</strong></p>



<p class="has-text-align-center">Verschiedene Kommunikationswege erschweren oft eine einfache Übersicht. Besonders per Telefon gehen oft wichtige Details unter.</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center circle-back wp-block-heading">4</h3>
</div>



<p class="has-text-align-center"><strong>Arbeiten für mehrere Arbeitgeber</strong></p>



<p class="has-text-align-center">Mehrere Kalender und Apps von verschiedenen Arbeitgeber sind oft verwirrend und mühsam.</p>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<hr class="wp-block-separator alignfull has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Personas</h3>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Um sich die künftigen Benutzer besser vorstellen zu können wurden mehrere Personas erstellt. Dies sind fiktionale Personen, welche einen repräsentativen Teil der künftigen Nutzer widerspiegelt.</p>



<p>Für die Personas wurde jeweils eine User Journey Map erstellt. Diese zeigt auf, welche Aktionen und Emotionen während der Nutzung der App auftreten. Auch sind in diesem Schritt bereits erste Optimierungen für den Prozess erkennbar. </p>
</div>



<div class="wp-block-column persona is-layout-flow wp-block-column-is-layout-flow" style="border-width:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);flex-basis:66.66%">
<h4 class="has-text-align-center wp-block-heading">Michaela</h4>



<figure class="wp-block-image aligncenter size-medium is-style-rounded"><img fetchpriority="high" decoding="async" width="300" height="300" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_happy_girl_around_25_years_old._With_a_bike_in_the_back_5b512c16-0cca-4421-b2a2-656a9ff90b89-300x300.png" alt="Portraitbild von Michaela. Einer fiktionalen Person, welche eine junge Fahrradmechanikerin darstellt." class="wp-image-312" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_happy_girl_around_25_years_old._With_a_bike_in_the_back_5b512c16-0cca-4421-b2a2-656a9ff90b89-300x300.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_happy_girl_around_25_years_old._With_a_bike_in_the_back_5b512c16-0cca-4421-b2a2-656a9ff90b89.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_happy_girl_around_25_years_old._With_a_bike_in_the_back_5b512c16-0cca-4421-b2a2-656a9ff90b89-150x150.png 150w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_happy_girl_around_25_years_old._With_a_bike_in_the_back_5b512c16-0cca-4421-b2a2-656a9ff90b89-768x768.png 768w" sizes="(max-width: 300px) 100vw, 300px" /><figcaption class="wp-element-caption">&#8222;Ein Leben ohne Katze ist möglich, aber sinnlos&#8220;</figcaption></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Hauptziel</strong><br>Michaela ist eine Fahrrad Mechanikerin welche wissen muss, wann ihr Einsatz ist damit sie ihre Freizeit planen kann.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Alter: 27</li>



<li>Ausbildung: Grundschuhlabschluss</li>



<li>Wohnort: Bern</li>



<li>Familie: Single, 1 Katze</li>



<li>Berufung: Fahrradmechaniker</li>
</ul>
</div>
</div>



<div class="wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Ziele</strong></p>



<ul class="wp-block-list">
<li>Liest gerne und lernt neues über fremde Kulturen.</li>



<li>Pläne machen für längere Auslandaufenthalte</li>



<li>Fahrräder reparieren und die zufriedenen Kunden sehen machen ihr viel Freude.</li>



<li>Mag die dinge direkt und unkompliziert.</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Frustrationen</strong></p>



<ul class="wp-block-list">
<li>&#8222;Manchmal bekomme ich meinen Dienstplan sehr spät, was es schwierig macht, mein Privatleben zu planen&#8220;</li>



<li>&#8222;Mein Arbeitskollege ist of sehr chaotisch am Arbeitsplatz. Das ist eine Herausforderung für mich&#8220;</li>



<li>&#8222;Wenn mein Chef zuhause eine schwierige Zeit hat, wirkt sich das oft auf die Stimmung des ganzen Teams aus&#8220;</li>
</ul>
</div>
</div>



<p><strong>Über Michaela</strong><br>In Michaelas Leben dreht sich viel um verschiedene Kulturen und Länder. Sie reist gerne und ihre Katze begleitet sie immer. Seit drei Jahren arbeitet sie mit zwei Kollegen im Bike Shop in Bern. In ihrer Freizeit renoviert sie auch gerne alte Möbel auf und berät bei der Einrichtung von Räumen. Sie plant für nächstes Jahr eine große Reise mit ihrer Katze durch Europa.</p>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Wireframes</h3>



<div class="wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Auf Papier wurden die ersten Entwürfe gemacht. Dabei wurden 8 verschiedene Lösungen für den Hauptbildschirm skizziert. Danach wurden die besten Elemente in einen digitalen Wireframe zusammengebracht. </p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image aligncenter size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-scaled.jpg" target="_blank" rel="noreferrer noopener"><img decoding="async" width="1024" height="697" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-1024x697.jpg" alt="Konzeptzeichnungen als Wireframe des Timy Apps" class="wp-image-316" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-1024x697.jpg 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-300x204.jpg 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-768x523.jpg 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-1536x1046.jpg 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Crazy-eight-2048x1394.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Konzeptzeichnungen um die beste Struktur für die Hauptseite zu evaluieren</figcaption></figure>



<figure class="wp-block-image aligncenter size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-scaled.jpg" target="_blank" rel="noreferrer noopener"><img decoding="async" width="1024" height="720" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-1024x720.jpg" alt="Wireframe der Details-Seite" class="wp-image-317" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-1024x720.jpg 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-300x211.jpg 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-768x540.jpg 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-1536x1080.jpg 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Details-screen-2048x1439.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Wireframe für die Details-Seite</figcaption></figure>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Digitale Wireframes</h3>



<p>In Figma wurden nun digitale Wireframes erstellt. Diese zeigen die Funktion zur Dienständerung. Es wurde ein Prototyp erstellt, welcher von fünf Personen aus der Zielgruppe getestet wurde.</p>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-461x1024.png" alt="" class="wp-image-322" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-691x1536.png 691w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home.png 720w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-461x1024.png" alt="" class="wp-image-325" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-691x1536.png 691w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail.png 720w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change.png"><img loading="lazy" decoding="async" width="463" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-463x1024.png" alt="" class="wp-image-324" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-463x1024.png 463w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-136x300.png 136w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-695x1536.png 695w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change.png 724w" sizes="auto, (max-width: 463px) 100vw, 463px" /></a></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation.png"><img loading="lazy" decoding="async" width="462" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation-462x1024.png" alt="" class="wp-image-323" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation-462x1024.png 462w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation-693x1536.png 693w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Request-change-confirmation.png 722w" sizes="auto, (max-width: 462px) 100vw, 462px" /></a></figure>
</div>
</div>
</div>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-base-color has-text-color has-background wp-element-button" href="https://www.figma.com/proto/2MJvgwA5wiC6PVZU5scMGN/Timesheet-App-V2?node-id=370%3A3017&amp;scaling=scale-down&amp;page-id=370%3A3016&amp;starting-point-node-id=370%3A3067" style="background-color:#6bd548" target="_blank" rel="noreferrer noopener">Zum Wireframe Prototypen</a></div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Mockup</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Die Erkenntnisse aus der Studie zum Wireframe Prototypen wurden bei der Entwicklung des Mockups mit einbezogen.<br>Ein Mockup enthält das endgültige Look and Feel der App. Dies beinhaltet unter anderem Farben, Typografie und Animationen. </p>



<p>Die Kacheln des Hauptbildschirms der App wurden neu Angeordnet damit die &#8222;Nächster Dienst&#8220;-Box zentraler und auffälliger ist. Mit Farben und verschiedenen Formen können die unterschiedlichen Arbeitgeber im Mockup differenziert werden.</p>



<p>Durch einen leichten Schatten heben sich die einzelnen Kacheln vom Hintergrund ab und helfen somit, diese optisch zu gruppieren.  </p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-461x1024.png" alt="" class="wp-image-322" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home-691x1536.png 691w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Home.png 720w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a><figcaption class="wp-element-caption">Wireframe Hauptbildschirm</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut.png"><img loading="lazy" decoding="async" width="460" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-460x1024.png" alt="" class="wp-image-328" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-460x1024.png 460w, https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-768x1709.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-690x1536.png 690w, https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut-920x2048.png 920w, https://dev.dans-art.ch/wp-content/uploads/2023/01/1-Home-May-cut.png 1436w" sizes="auto, (max-width: 460px) 100vw, 460px" /></a><figcaption class="wp-element-caption">Mockup Hauptbildschirm</figcaption></figure>
</div>
</div>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Mockup &#8211; Dienstdetails</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Auf der Seite der Dienstdetails wurde neben den Farben und Animationen auch ein Indikator für den Arbeitgeber (Kreis oben links) hinzugefügt.<br><br>Ausserdem wurde eine Historie der Änderungen angefügt. Wird der aktuelle Kalendertag geöffnet, steht ausserdem eine Zeiterfassungs-Kachel zur Verfügung. Bei vergangenen Tagen kann ganz einfach die Anzahl der Stunden angegeben werden.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-461x1024.png" alt="" class="wp-image-325" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail-691x1536.png 691w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Day-detail.png 720w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a><figcaption class="wp-element-caption">Wireframe Dienstdetails</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-461x1024.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-461x1024.png" alt="" class="wp-image-331" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-768x1705.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-692x1536.png 692w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6-922x2048.png 922w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-21.-May-6.png 1441w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a><figcaption class="wp-element-caption">Mockup Dienstdetails mit Historie</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-461x1024.png"><img loading="lazy" decoding="async" width="461" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-461x1024.png" alt="" class="wp-image-330" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-461x1024.png 461w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-135x300.png 135w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-768x1707.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-691x1536.png 691w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked-922x2048.png 922w, https://dev.dans-art.ch/wp-content/uploads/2023/01/2-Day-detail-Current-day-Untracked.png 1080w" sizes="auto, (max-width: 461px) 100vw, 461px" /></a><figcaption class="wp-element-caption">Mockup Dienstdetails mit Tracking</figcaption></figure>
</div>
</div>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Erkenntnisse aus den Nutzbarkeitsstudien</h3>



<p>Es wurden insgesammt zwei Nutzbarkeitsstudien durchgeführt. Eine mit dem Wireframe (Lo-fi) Prototypen und eine mit dem Mockup (Hi-fi) Prototypen. <br>Ziel der Studie war, herauszufinden wie intuitiv sich die App bedienen lässt und welche Funktionen die wichtigsten für die Zielgruppe sind.<br>Die Studien wurden mit jeweils 5 Personen unterschiedlicher Berufungen innerhalb der Zielgruppe durchgeführt.  </p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">Wireframe (Lo-fi)</h4>



<ul class="wp-block-list">
<li>Die Testpersonen hatten keine Probleme, eine Dienständerung anzufragen. Waren jedoch verwirrt, warum die Anfrage nach dem Prozess nirgends zu sehen war.</li>



<li>Einige Testpersonen hatten wertvolle Ideen wie erweiterte Statistiken und eine Ansicht für mehrere Arbeitgeber.
<ul class="wp-block-list">
<li></li>
</ul>
</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">Mockup(Hi-fi)</h4>



<ul class="wp-block-list">
<li>Die Teilnehmer waren verwirrt was die verscheidenen Farben im Kalender zu bedeuten haben.</li>



<li>Es wurde eine Funktion zum Bestätigen oder Aufzeichnen von geleisteten Stunden gewünscht.</li>
</ul>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Der finale Prototyp</h3>



<p>Nach der Hauptaktion wurden alle weiteren Bildschirme erstellt. Darunter das Menu, Statistik und Ferien Bildschirm, Einstellungen etc. </p>



<iframe loading="lazy" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="850px" src="https://www.figma.com/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2F2MJvgwA5wiC6PVZU5scMGN%2FTimesheet-App-V2%3Fnode-id%3D307%253A1206%26scaling%3Dmin-zoom%26page-id%3D124%253A280%26starting-point-node-id%3D307%253A1206%26hide-proto-sidebar%3D1" allowfullscreen=""></iframe>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Inklusives Design &amp; Zugänglichkeit</h3>



<p>Die App wurde stets mit dem Gedanken entwickelt, für möglichst viele unterschiedliche Nutzer zugänglich zu sein, insbesondere für Personen mit Einschränkungen. </p>



<div class="wp-block-columns alignwide has-medium-font-size is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-radius:0px">
<div class="wp-block-column is-vertically-aligned-top has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">1</h3>
</div>



<p class="has-text-align-center">Die App verwendet verschiedene Farben für die Arbeitgeber. Damit auch Personen mit einer Farbschwäche die App nutzen können, ist es möglich, neben der Farbe auch eine Form zu wählen</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">2</h3>
</div>



<p class="has-text-align-center">Um den Einstieg einfacher zu machen, wurde eine Serie von Bildschirmen erstellt, welche Farben und Formen des Kalenders erklären. Diese werden beim ersten Start angezeigt.</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center circle-back wp-block-heading">3</h3>
</div>



<p class="has-text-align-center">Der Arbeitskalender kann ganz einfach im Privaten Kalender synchronisiert werden. So lässt sich das Leben neben der Arbeit besser planen.</p>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Lernprozess und weitere Schritte</h3>



<p>Dies Studie zeigte sehr effektiv, welche auswirkungen sorgfältige Nutzbarkeitsstuden haben. Während der Testphasen wurden wichtige Erkentnisse gemacht, welche die App sichtbar verbesserten. Auch können so schon vor der kostspieligen Entwicklung Funktionen und Konzepte auf ihre effizienz getestet werden.</p>



<p>Nach dieser Studie ist die App bereit, dem Entwickler-Team übergeben zu werden. Nach der Entwicklung wird die App dann in einer Ausgewählten Gruppe von bis zu 10 Personen getestet und nach Fehlerbehebungen und Anpassungen dann der Öffentlichkeit Zugänglich gemacht. </p>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Kontakt und besondere Dank</h3>



<p>Ein besonderer Dank geht an die Tester der Prototypen und Unterstützer der Studie:<br>Lisa, Jamin, Jerome, Linda, Simon, Brigitte &amp; Gülly<br></p>



<p>Kontakt: Daniel Spycher &#8211; <a href="mailto:dev@dans-art.ch" target="_blank" rel="noreferrer noopener">dev@dans-art.ch</a></p>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Design Studie &#8211; Shopify QR-Rechnung</title>
		<link>https://dev.dans-art.ch/qr-rechnungs-app-design-studie/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Thu, 12 Jan 2023 16:22:00 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=275</guid>

					<description><![CDATA[Im November 2022 habe ich den Lehrgang als UX Designer begonnen. Dabei ist das Projekt &#8222;QR-Rechnung für Shopify&#8220; entstanden. Über das Projekt Als ich für einen Kunden einen Shopify Shop aufgesetzt habe, ist mir aufgefallen, dass die verfügbaren QR-Rechnungs Apps im Bereich Integration &#38; Ersteinstellung viel Verbesserungspotenzial haben. Aus diesem Grund habe ich mich, im [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Design Studie der QR-Rechnung App für Shopify</li>



<li>UX und UI Design</li>



<li>Durchführen von Studien</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:50vh;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-422 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2023/01/Design-Studie-QR-Rechnung.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<section class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<p>Im November 2022 habe ich den Lehrgang als UX Designer begonnen. Dabei ist das Projekt &#8222;QR-Rechnung für Shopify&#8220; entstanden. </p>



<h2 class="wp-block-heading">Über das Projekt</h2>



<p>Als ich für einen Kunden einen Shopify Shop aufgesetzt habe, ist mir aufgefallen, dass die verfügbaren QR-Rechnungs Apps im Bereich Integration &amp; Ersteinstellung viel Verbesserungspotenzial haben. Aus diesem Grund habe ich mich, im Rahmen des zweiten Projekts für den UX Lehrgang, entscheiden genau einen Solchen Einrichtungsprozess zu gestalten.</p>



<p class="has-text-align-center"><strong>Projekt Zeitraum</strong>: Januar 2023 &#8211; März 2023<br><strong>Meine Rolle</strong>: UX Researcher &amp; UX Designer<br><strong>Verantwortlichkeiten:</strong><br>&#8211; Grundlegende Forschung<br>&#8211; Forschungen über Konkurenzprodukten<br>&#8211; Durchführen von Studien<br>&#8211; Erstellen von Konzeptzeichnungen<br>&#8211; Erstellen von Wireframes und Mockups</p>



<p><br></p>



<hr class="wp-block-separator alignfull has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80);background-color:#6bd548;color:#6bd548"/>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Das Problem</h3>



<p>Um einen QR-Rechnungs Code in das Shopsystem zu integrieren sind einige Einstellungen nötig. Sind diese nicht korrekt oder Fehlen, wird kein oder ein falscher Code angezeigt. </p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Das Ziel</h3>



<p>Eine einfache Shopify-App, welche dem Administrator des Shops die Einrichtung erleichtert und hilft, Fehler zu vermeiden.</p>
</div>
</div>



<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80);background-color:#6bd548;color:#6bd548"/>



<h3 class="wp-block-heading">Erforschung von Nutzergruppen</h3>



<p>Es wurden mehrere Studien erstellt welche halfen, die Zielgruppe zu definieren und die Probleme bestehender Lösungen herauszufinden. Hierbei wurde der potenzielle Nutzer an erster Stelle gesetzt und die Lösung auf die Nutzergruppe zugeschnitten. Dabei ergaben sich vier Hauptthemen.</p>



<div style="height:42px" aria-hidden="true" class="wp-block-spacer"></div>
</section>



<div class="wp-block-columns alignwide has-medium-font-size is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-radius:0px">
<div class="wp-block-column is-vertically-aligned-top has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">1</h3>
</div>



<p class="has-text-align-center"><strong>Fehlerhafte eingaben</strong></p>



<p class="has-text-align-center">Oftmals kann kein QR-Rechungs-Code angezeigt werden, weil Details wie Kontonummer oder Adresse fehlen </p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">2</h3>
</div>



<p class="has-text-align-center"><strong>Referenzcode für automatischen Abgleich</strong></p>



<p class="has-text-align-center">Um die Rechnungsbeträge im E-Banking später einer Bestellung zuordnen zu können, wird ein eindeutiger Referenzcode benötigt</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center circle-back wp-block-heading">3</h3>
</div>



<p class="has-text-align-center"><strong>Integration</strong></p>



<p class="has-text-align-center">Die Integration ist gerade für Administratoren ohne Coding Erfahrung sehr schweirig</p>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<hr class="wp-block-separator alignfull has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Personas</h3>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Um sich die künftigen Benutzer besser vorstellen zu können wurden mehrere Personas erstellt. Dies sind fiktionale Personen, welche einen repräsentativen Teil der künftigen Nutzer widerspiegelt.</p>



<p>Für die Personas wurde jeweils eine User Journey Map erstellt. Diese zeigt auf, welche Aktionen und Emotionen während der Nutzung der App auftreten. Auch sind in diesem Schritt bereits erste Optimierungen für den Prozess erkennbar. </p>
</div>



<div class="wp-block-column persona is-layout-flow wp-block-column-is-layout-flow" style="border-width:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);flex-basis:66.66%">
<h4 class="has-text-align-center wp-block-heading">Anthony</h4>



<figure class="wp-block-image aligncenter size-large is-resized is-style-rounded"><img loading="lazy" decoding="async" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_male_41_years_old_but_looking_younger_who_works_as_a_de_6d554aca-1c55-49a3-9f4e-4eadd478c309-1024x1024.png" alt="" class="wp-image-400" width="256" height="256" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_male_41_years_old_but_looking_younger_who_works_as_a_de_6d554aca-1c55-49a3-9f4e-4eadd478c309.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_male_41_years_old_but_looking_younger_who_works_as_a_de_6d554aca-1c55-49a3-9f4e-4eadd478c309-300x300.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_male_41_years_old_but_looking_younger_who_works_as_a_de_6d554aca-1c55-49a3-9f4e-4eadd478c309-150x150.png 150w, https://dev.dans-art.ch/wp-content/uploads/2023/01/spy15_a_male_41_years_old_but_looking_younger_who_works_as_a_de_6d554aca-1c55-49a3-9f4e-4eadd478c309-768x768.png 768w" sizes="auto, (max-width: 256px) 100vw, 256px" /><figcaption class="wp-element-caption">&#8222;Gib mir einen Stoff und ich mache dich zu einer 10!&#8220;</figcaption></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Hauptziel</strong><br>Anthony ist Modedesigner und betreibt einen kleinen Shopify Shop in welchem er seine Designs verkauft. Er will seinen Kunden das unkomplizierte Bezahlen per Rechnung anbieten.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Alter: 41</li>



<li>Ausbildung: Grundschuhlabschluss</li>



<li>Wohnort: Zürich</li>



<li>Familie: Frau mit zwei Kindern</li>



<li>Berufung: Modedesigner</li>
</ul>
</div>
</div>



<div class="wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Ziele</strong></p>



<ul class="wp-block-list">
<li>Er liebt es zu tanzen, insbesondere Tango</li>



<li>Möchte eine einfache Möglichkeit haben, wie seine Kunden im Shop bezahlen können</li>



<li>Liebt es Leute mit Kleidern zu transformieren indem er Kleider für sie erstellt</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Frustrationen</strong></p>



<ul class="wp-block-list">
<li>&#8222;Ich hasse es wenn ich warten muss. Ich bin sehr ungeduldig.&#8220;</li>



<li>&#8222;Leute welche keinen Sinn für Mode haben sind für mich schwer zu ertragen.&#8220;</li>



<li>&#8222;Ich nutze das Internet so viel wie ich muss, finde aber das es nervt.&#8220;</li>
</ul>
</div>
</div>



<p><strong>Über Anthony</strong><br>Anthony ist ein Modedesigner der alten Schule. Er ist in Zürich aufgewachsen und hat sein ganzes Leben lang als Designer gearbeitet. Als junger Erwachsener war er 2 Jahre im Ausland und verbrachte die Zeit in London und New York. Er hatte nie grosses Interesse an moderner Technologie und Internet. Er glaubt an echte Dinge, wie schöne Stoffe und handgemachtes Handwerk. In seiner Freizeit tanzt er gerne Tango und trifft sich mit Freunden. Er betreibt einen kleinen Shopify-Shop, um seine Designs zu verkaufen.</p>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Wireframes</h3>



<div class="wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Auf Papier wurden die ersten Entwürfe gemacht. Dabei wurden 8 verschiedene Lösungen für den Hauptbildschirm skizziert. Danach wurden die besten Elemente in einen digitalen Wireframe zusammengebracht. </p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-scaled.jpg" target="_blank" rel="noreferrer noopener"><img loading="lazy" decoding="async" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-760x1024.jpg" alt="" class="wp-image-401" width="380" height="512" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-760x1024.jpg 760w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-223x300.jpg 223w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-768x1035.jpg 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-1140x1536.jpg 1140w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-1520x2048.jpg 1520w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-1-scaled.jpg 1900w" sizes="auto, (max-width: 380px) 100vw, 380px" /></a><figcaption class="wp-element-caption">Konzeptzeichnung für die Startseite der App</figcaption></figure>



<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2.jpg" target="_blank" rel="noreferrer noopener"><img loading="lazy" decoding="async" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-944x1024.jpg" alt="" class="wp-image-402" width="472" height="512" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-944x1024.jpg 944w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-277x300.jpg 277w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-768x833.jpg 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-1416x1536.jpg 1416w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Paper-Wireframe-Final_edited-2-1889x2048.jpg 1889w" sizes="auto, (max-width: 472px) 100vw, 472px" /></a><figcaption class="wp-element-caption">Wireframe für die Ansicht nach dem Einrichtungsassistenten</figcaption></figure>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<hr class="wp-block-separator alignwide has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading">Sitemap / Information Architecture</h3>



<p>Um den Ablauf des Assistenten zu visualisieren und die verschiedenen Seiten zu skizieren wurde eine Sitemap erstellt.</p>



<p>Diese zeigt welche Seiten wie miteinander verknüpft sind. So sind die Grünen Elemente nur nach der Installation der App verfügbar und werden, wenn die Einrichtung abgeschlossen ist, nicht mehr angezeigt.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap.png"><img loading="lazy" decoding="async" width="1024" height="345" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap-1024x345.png" alt="" class="wp-image-417" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap-1024x345.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap-300x101.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap-768x259.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/sitemap.png 1115w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Sitemap der App</figcaption></figure>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Digitale Wireframes</h3>



<p>In Adobe DX wurden nun digitale Wireframes erstellt. Diese zeigen die Funktion zur Dienständerung. Es wurde ein Prototyp erstellt, welcher von acht Personen aus der Zielgruppe getestet wurde.</p>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large is-resized has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome.png"><img loading="lazy" decoding="async" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-1024x570.png" alt="" class="wp-image-405" style="border-width:1px" width="1024" height="570" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-1024x570.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-300x167.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-768x428.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-1536x855.png 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-screen-Welcome-2048x1140.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Willkommensbildschirm des Einrichtungsassistenten</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-1024x576.png" alt="" class="wp-image-404" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-1024x576.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-300x169.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-768x432.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-1536x864.png 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-1-2048x1152.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Integrationsanleitung auf dem Desktop Gerät</figcaption></figure>
</div>
</div>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome.png"><img loading="lazy" decoding="async" width="474" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome-474x1024.png" alt="" class="wp-image-403" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome-474x1024.png 474w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome-139x300.png 139w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome-768x1657.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome-712x1536.png 712w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Onboarding-Mobile-–-Welcome.png 860w" sizes="auto, (max-width: 474px) 100vw, 474px" /></a><figcaption class="wp-element-caption">Willkommensbildschirm des Einrichtungsassistenten auf dem Mobilen Gerät</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen.png"><img loading="lazy" decoding="async" width="395" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-395x1024.png" alt="" class="wp-image-406" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-395x1024.png 395w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-116x300.png 116w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-768x1990.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-593x1536.png 593w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen-791x2048.png 791w, https://dev.dans-art.ch/wp-content/uploads/2023/01/Integration-screen.png 860w" sizes="auto, (max-width: 395px) 100vw, 395px" /></a><figcaption class="wp-element-caption">Integrationsanleitung auf dem Mobilen Gerät</figcaption></figure>
</div>
</div>
</div>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-base-color has-text-color has-background wp-element-button" href="https://xd.adobe.com/view/4b3cfbd1-4b19-4a59-828c-f34cfebaad97-1e6f/" style="background-color:#6bd548" target="_blank" rel="noreferrer noopener">Zum Wireframe Prototypen</a></div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Mockup</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Die Erkenntnisse aus der Studie zum Wireframe Prototypen wurden bei der Entwicklung des Mockups mit einbezogen.<br>Ein Mockup enthält das endgültige Look and Feel der App. Dies beinhaltet unter anderem Farben, Typografie und Animationen. </p>



<p>Damit die App wie ein Teil von Shopify wirkt und sich perfekt integriert, wurde das Design System &#8222;Polaris&#8220; von Shopify verwendet. In diesem Dokument sind alle Elemente beschrieben wie sie auszusehen und zu verhalten haben.<br>Dies sorgt nun im fertigen Mockup dafür, das alles wie aus einem Guss wirkt.</p>



<p>Der hier gezeigte Referenz Bildschirm musste für die Mobile Anicht optimiert werden. Insbesondere da bestimmte Funktionen wie &#8222;Drag &amp; Drop&#8220; nicht so gut auf dem Smartphone funktionieren würde.</p>



<p>Auch war in der ersten Version geplant, das die einzelnen Einrichtungsbildschirme von unten einfliegen würden. Dies wurde dann aber verworfen um besser in Shopify integriert zu sein.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference.png"><img loading="lazy" decoding="async" width="1024" height="567" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-1024x567.png" alt="" class="wp-image-410" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-1024x567.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-300x166.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-768x426.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-1536x851.png 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Reference-2048x1135.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Wireframe Einrichtungsassistent &#8211; Referenznummer</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2.png"><img loading="lazy" decoding="async" width="1024" height="542" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-1024x542.png" alt="" class="wp-image-411" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-1024x542.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-300x159.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-768x407.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-1536x814.png 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-screen-Referenz-–-2-2048x1085.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Mockup Einrichtungsassistent &#8211; Referenznummer</figcaption></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference.png"><img loading="lazy" decoding="async" width="474" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference-474x1024.png" alt="" class="wp-image-413" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference-474x1024.png 474w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference-139x300.png 139w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference-768x1657.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference-712x1536.png 712w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–Reference.png 860w" sizes="auto, (max-width: 474px) 100vw, 474px" /></a><figcaption class="wp-element-caption">Wireframe von der mobilen Ansicht des Einrichtungsassistent &#8211; Referenznummer</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3.png"><img loading="lazy" decoding="async" width="474" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3-474x1024.png" alt="" class="wp-image-412" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3-474x1024.png 474w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3-139x300.png 139w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3-768x1657.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3-712x1536.png 712w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Reference-1-–-3.png 860w" sizes="auto, (max-width: 474px) 100vw, 474px" /></a><figcaption class="wp-element-caption">Mockup von der mobilen Ansicht des Einrichtungsassistent &#8211; Referenznummer</figcaption></figure>
</div>
</div>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#6bd548;color:#6bd548"/>



<h3 class="alignwide wp-block-heading">Mockup &#8211; Einstellungen</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Der Einstellungsbildschirm ermöglicht die Code-Integration sowie die eingegebenen Daten zu bearbeiten.</p>



<p>Für die Navigation habe ich mich gegen ein Hamburger-Menu für die App auf den Mobilen Geräten entschieden, da es zu Verwirrungen hätte führen können. So wurde aus &#8222;Über QR-Rechungen App&#8220; auf dem Desktop nur noch &#8222;Über&#8220; auf dem Smartphone.</p>



<p>Um die Integration zusätzlich zu Erleichtern gibt es neben einem geschriebenen Text, auch das ganze als Video zum anschauen.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration.png"><img loading="lazy" decoding="async" width="1024" height="542" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-1024x542.png" alt="" class="wp-image-416" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-1024x542.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-300x159.png 300w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-768x407.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-1536x814.png 1536w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Settings-screen-Integration-2048x1085.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Desktopansicht der Integrationsseite</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration.png"><img loading="lazy" decoding="async" width="244" height="1024" src="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration-244x1024.png" alt="" class="wp-image-414" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration-244x1024.png 244w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration-768x3226.png 768w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration-366x1536.png 366w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration-488x2048.png 488w, https://dev.dans-art.ch/wp-content/uploads/2023/03/Onboarding-Mobile-–-Integration.png 860w" sizes="auto, (max-width: 244px) 100vw, 244px" /></a><figcaption class="wp-element-caption">Smartphone Ansicht der Integrationsseite</figcaption></figure>
</div>
</div>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Erkenntnisse aus den Nutzbarkeitsstudien</h3>



<p>Es wurden insgesamt eine Nutzbarkeitsstudie durchgeführt. Die Studie wurde mittels eines Formulars gemacht, welche die Teilnehmer selbstständig ausgefüllt haben. Ziel der Studie war, herauszufinden ob der Einrichtungsassistent funktioniert und nützlich ist.<br>Die Studien wurden mit jeweils 7 Personen unterschiedlicher Berufungen innerhalb der Zielgruppe durchgeführt.  </p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">Studie des Wireframe (Lo-fi) Prototypen</h4>



<ul class="wp-block-list">
<li>Die meisten Testpersonen hatten keine Probleme den Assistenten zu nutzen
<ul class="wp-block-list">
<li><em>Des weiteren hat die nachtäglichen Befragung ergeben, das ein überspringen des Assistenten kein Bedürfnis war.</em></li>
</ul>
</li>



<li>6 von 7 Personen konnten nach der Einrichtung die Einstellungen für die angegebenen Daten finden
<ul class="wp-block-list">
<li><em>Dies zeigte, das die Beschriftung und Position der Elemente sinnvoll war</em></li>
</ul>
</li>



<li>Die Integration war für die meisten Probanden nicht verständlich
<ul class="wp-block-list">
<li><em>Dieses Problem wurde mit besserer Beschreibung und Erklärvideos behoben</em> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Der finale Prototyp</h3>



<p>Der fertige Prototyp wurde als Desktop und Mobile variante entwickelt. Hier die Smartphone Variante zum testen:</p>



<iframe loading="lazy" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="850px" src="https://xd.adobe.com/embed/edff056a-ac06-4161-bebf-bf5571fcbe3c-b8ac/" frameborder="0" allowfullscreen=""></iframe>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Inklusives Design &amp; Zugänglichkeit</h3>



<p>Die App wurde stets mit dem Gedanken entwickelt, für möglichst viele unterschiedliche Nutzer zugänglich zu sein, insbesondere für Personen mit Einschränkungen. </p>



<div class="wp-block-columns alignwide has-medium-font-size is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-radius:0px">
<div class="wp-block-column is-vertically-aligned-top has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">1</h3>
</div>



<p class="has-text-align-center">Durch die Verwendung des Design Systems von Shopify befindet sich der Nutzer bereits in einer Gewohnten Umgebung und findet sich schnell zurecht</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center wp-block-heading">2</h3>
</div>



<p class="has-text-align-center">Der Einrichtungsassistenten hilft neuen Benutzern die App einzurichten. Erfahrene User können diesen Überspringen und alle Daten in den Einstellungen eingeben</p>
</div>



<div class="wp-block-column has-medium-font-size is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group circle-back has-large-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<h3 class="has-text-align-center circle-back wp-block-heading">3</h3>
</div>



<p class="has-text-align-center">Erklärvideos helfen bei der Integration in das System und sind so auch für unerfahrenere Benutzer zugänglich</p>
</div>
</div>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Lernprozess und weitere Schritte</h3>



<p>Dies Studie zeigte sehr effektiv, welche auswirkungen sorgfältige Nutzbarkeitsstuden haben. Während der Testphasen wurden wichtige Erkentnisse gemacht, welche die App sichtbar verbesserten. Auch können so schon vor der kostspieligen Entwicklung Funktionen und Konzepte auf ihre effizienz getestet werden.</p>



<p>Nach dieser Studie ist die App bereit, dem Entwickler-Team übergeben zu werden. Nach der Entwicklung wird die App dann in einer Ausgewählten Gruppe von bis zu 10 Personen getestet und nach Fehlerbehebungen und Anpassungen dann der Öffentlichkeit Zugänglich gemacht. </p>
</div>



<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<h3 class="wp-block-heading">Kontakt und besondere Dank</h3>



<p>Ein besonderer Dank geht an die Tester des Prototypen und Unterstützer der Studie.<br>Bild QR-Code Scanner von <a href="https://www.freepik.com/author/stories">storyset</a> &#8211; <a href="https://freepik.com">Freepik</a></p>



<p>Kontakt: Daniel Spycher &#8211; <a href="mailto:dev@dans-art.ch" target="_blank" rel="noreferrer noopener">dev@dans-art.ch</a></p>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Timy App Design Studie</title>
		<link>https://dev.dans-art.ch/timy-app-studie/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Wed, 11 Jan 2023 13:32:55 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=269</guid>

					<description><![CDATA[Prototyp Bevor eine App in die Entwicklung geht, wird ein Prototyp erstellt. Ich nutzte dazu Figma, welche die Erstellung von detaillierten Prototypen und Designs ermöglicht. Alle Screens / Mockups der App Interaktive Demo des Prototyps]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Prototyp</h2>



<p>Bevor eine App in die Entwicklung geht, wird ein Prototyp erstellt. Ich nutzte dazu Figma, welche die Erstellung von detaillierten Prototypen und Designs ermöglicht.</p>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<iframe loading="lazy" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Ffile%2F2MJvgwA5wiC6PVZU5scMGN%2FTimesheet-App-V2%3Fnode-id%3D124%253A280%26t%3DK5zSfl5hwWXSiwmh-1" allowfullscreen=""></iframe>



<p>Alle Screens / Mockups der App</p>



<iframe loading="lazy" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2F2MJvgwA5wiC6PVZU5scMGN%2FTimesheet-App-V2%3Fnode-id%3D307%253A1206%26scaling%3Dmin-zoom%26page-id%3D124%253A280%26starting-point-node-id%3D307%253A1206%26show-proto-sidebar%3D1" allowfullscreen=""></iframe>



<p>Interaktive Demo des Prototyps</p>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Plekvetica</title>
		<link>https://dev.dans-art.ch/plekvetica/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Fri, 25 Nov 2022 08:31:20 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=201</guid>

					<description><![CDATA[Bei dem Projekt handelt es sich um eine Website, welche sich der Rock und Metal Szene verschrieben hat. Als Basis wurde hier wieder WordPress verwendet und mit einigen Plugins erweitert. Dazu wurde ein eigenes Plugin entwickelt, welches speziell auf die Seite zugeschnitten ist und mit um die 40&#8217;000 Zeilen code, zu den aufwendigsten Projekte gehört. [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Website mit Community Funktionen</li>



<li>WordPress mit eigenem Plugin</li>



<li>Viele Erweiterungen und Optimierungen vorgenommen</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:510px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-202 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2022/11/Plekvetica.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<p>Bei dem Projekt handelt es sich um eine Website, welche sich der Rock und Metal Szene verschrieben hat. Als Basis wurde hier wieder WordPress verwendet und mit einigen Plugins erweitert. Dazu wurde ein eigenes Plugin entwickelt, welches speziell auf die Seite zugeschnitten ist und mit um die 40&#8217;000 Zeilen code, zu den aufwendigsten Projekte gehört.</p>



<p>Anpassungen wurden in vielen Bereichen gemacht. So wurde der Event Kalender so angepasst, das dieser einen vergangenen Event in ein Review verwandeln kann und dann die Fotos und den Bericht zum Event anzeigt. Auch wurde ein Formular gestaltet, bei dem alle, welche mitmachen möchten, ihre Events eintragen können. Hierbei war mir auch wichtig, das es keine Duplikate gibt und die Einträge von hoher Qualität sind. Dies erreiche ich mit der Datenvalidation, welche an mehreren Stellen während der Erstellung passiert.</p>



<p>Ein weitere Punkt ist die automation. So wurden viele Funktionen eingebaut, um sich wiederholende Aufgaben zu automatisieren und zu vereinfachen. Als Beispiel, das Hochladen von Konzertfotos.</p>



<figure class="wp-block-image size-large has-custom-border"><a href="https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1.webp"><img loading="lazy" decoding="async" width="1024" height="825" src="https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1-1024x825.webp" alt="" class="wp-image-253" style="border-width:1px" srcset="https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1-1024x825.webp 1024w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1-300x242.webp 300w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1-768x619.webp 768w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1-1536x1237.webp 1536w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Process-Write-Review-1.webp 1609w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Der Prozess früher und heute</figcaption></figure>



<p>Der Prozess um hochladen der Fotos war relativ kompliziert und hat dazu geführt das es viele Fehler gab. Es musste zwischen Seiten hin und her gewechselt werden, Galerien danach Alben erstellt werden, diese richtig benennen und dann in den Beitrag einfügen. Dies wurde dahingehend vereinfacht, dass das erstellen der Alben und Galerien automatisch geschah und alles an einem Ort gemacht werden kann.</p>



<p>Daneben wurde ein Member-Bereich erstellt, diverse Formulare um z.b. Bands, Veranstalter und Orte hinzuzufügen, Email Benachrichtigungen für Mitglieder und einiges mehr.</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" href="https://plekvetica.ch" style="background-color:#8c262e" target="_blank" rel="noreferrer noopener">Zu Plekvetica</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Yoga-Brigit</title>
		<link>https://dev.dans-art.ch/yoga-brigit/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Tue, 15 Nov 2022 12:35:50 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=162</guid>

					<description><![CDATA[Für einen Ausgleich schwören viele auf Yoga. Und dies nicht ohne Grund. Es entspannt und bringt Geist und Körper zusammen. Als Brigitte 2021 ihre Ausbildung als Yoga-Lehrerin abgeschlossen hat, war der Bedarf einer Website gross.Hierbei habe ich eine Website auf Basis von WordPress, das Logo und die Fotos auf der Seite erstellt. Begleitend zu Brigittes [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Logodesign und Konzept</li>



<li>WordPress</li>



<li>Youtube Videos und Fotos</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:50vh;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-178 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2022/11/Yoga-Brigit.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<p>Für einen Ausgleich schwören viele auf Yoga. Und dies nicht ohne Grund. Es entspannt und bringt Geist und Körper zusammen.</p>



<p>Als Brigitte 2021 ihre Ausbildung als Yoga-Lehrerin abgeschlossen hat, war der Bedarf einer Website gross.<br>Hierbei habe ich eine Website auf Basis von WordPress, das Logo und die Fotos auf der Seite erstellt. </p>



<p>Begleitend zu Brigittes Ausbildung als Kinder-Yoga Lehrerin wurden Videos erstellt, welche speziell für Kinder sind und mit einer spannenden Geschichte zum mitmachen animieren.  </p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Kinder Yoga Safari 1 - Afrika - Kindergeschichte - Schweizerdeutsch" width="500" height="281" src="https://www.youtube.com/embed/L1I0jsPW1PI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" href="https://yoga-brigit.ch/" style="background-color:#ad1f5f" target="_blank" rel="noreferrer noopener">Zu Yoga-Brigit</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Lischen-Hof</title>
		<link>https://dev.dans-art.ch/lischen-hof/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Tue, 15 Nov 2022 12:29:31 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=154</guid>

					<description><![CDATA[Der Lischen-Hof ist seit längerem bekannt für Truten-Fleisch direkt vom Hof. Allerdings nicht mit eigener Website oder Logo. Bei diesem Projekt wurde das gesamte Branding des Geschäfts gemacht. Dazu gehört Logo-Design, Visitenkarten gestalten, Website erstellen und Shop einrichten. Die Website benötigte besondere Aufmerksamkeit, da die Produkten eine Kg Preis anstatt wie üblich eines Fix-Preises.Es wurde [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Online-Shop</li>



<li>Logodesign und Konzept</li>



<li>WordPress mit WooCommerce</li>



<li>Produkt Darstellung angepasst</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:678px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-171 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2022/11/Minimalist-Showcase-Project-Presentation-square.jpg)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<p>Der Lischen-Hof ist seit längerem bekannt für Truten-Fleisch direkt vom Hof. Allerdings nicht mit eigener Website oder Logo. Bei diesem Projekt wurde das gesamte Branding des Geschäfts gemacht. Dazu gehört Logo-Design, Visitenkarten gestalten, Website erstellen und Shop einrichten. </p>



<p>Die Website benötigte besondere Aufmerksamkeit, da die Produkten eine Kg Preis anstatt wie üblich eines Fix-Preises.<br>Es wurde ein eigenes Menu für die Administratoren erstellt, um vordefinierte Informationen zum Fleisch  zu ändern, sowie eigene Felder bei den einzelnen Produkten. So kann der Kg-Preis mit einem eigenen Feld angegeben werden und wird dann auch entsprechend angezeigt.</p>



<p>Auch wurde eine spezielle Seite erstellt, welche eine Liste generiert, die für den Ausdruck optimiert ist. So zeigt diese die Bestellungen nach gewünschtem Abholdatum und erleichtert so den Prozess beim Verpacken des Fleisches.</p>



<p>Um die Seite abzurunden, wurden die Fotos für Hintergründe, Produkte und Portraits erstellt.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="996" height="585" src="https://dev.dans-art.ch/wp-content/uploads/2022/11/Lischen-Hof-shop.jpg" alt="" class="wp-image-159" srcset="https://dev.dans-art.ch/wp-content/uploads/2022/11/Lischen-Hof-shop.jpg 996w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Lischen-Hof-shop-300x176.jpg 300w, https://dev.dans-art.ch/wp-content/uploads/2022/11/Lischen-Hof-shop-768x451.jpg 768w" sizes="auto, (max-width: 996px) 100vw, 996px" /><figcaption class="wp-element-caption">Die Shop-Seite vom Lischen-Hof. Die Preise werden in KG angezeigt und tiefgefrorene Produkte speziell gekennzeichnet.</figcaption></figure>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" href="https://lischen-hof.ch/" style="border-radius:0px;background-color:#03af36" target="_blank" rel="noreferrer noopener">Zum Lischen-Hof</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Natura-Handwerk</title>
		<link>https://dev.dans-art.ch/natura-handwerk/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Mon, 14 Nov 2022 22:08:42 +0000</pubDate>
				<category><![CDATA[Referenzen]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=130</guid>

					<description><![CDATA[Die Website von Natura-Handwerk war von Anfang an als Shop konzipiert worden, welcher aber auch Informationen über den Betrieb und die Verarbeitung bereitstellen sollte. Die Website so geplant, das sie Stückweise immer wieder erweitert werden kann.So wurde zuerst nur der Online-Shop betrieben. Verkaufte Produkte, welche an Märit oder im Laden vor Ort verkauft wurden, sind [&#8230;]]]></description>
										<content:encoded><![CDATA[
<ul class="wp-block-list">
<li>Online-Shop</li>



<li>WordPress mit WooCommerce</li>



<li>Viele Erweiterungen und Optimierungen vorgenommen</li>
</ul>



<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:510px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-197 has-parallax" style="background-position:50% 50%;background-image:url(https://dev.dans-art.ch/wp-content/uploads/2022/11/Natura-Handwerk.webp)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size"></p>
</div></div>



<p>Die Website von Natura-Handwerk war von Anfang an als Shop konzipiert worden, welcher aber auch Informationen über den Betrieb und die Verarbeitung bereitstellen sollte.</p>



<p>Die Website so geplant, das sie  Stückweise immer wieder erweitert werden kann.<br>So wurde zuerst nur der Online-Shop betrieben. Verkaufte Produkte, welche an Märit oder im Laden vor Ort verkauft wurden, sind dadurch nicht im System gelandet. Später, wurde dann ein Point of Sale System integriert, welches den Verkauf an Märiten oder im Laden möglich machten.</p>



<p>Neben vielen kleinen Anpassungen war dieses Projekt auch die Geburtsstätte eines Plug-ins, welches dann öffentlich verfügbar gemacht wurde. Das <a rel="noreferrer noopener" href="https://wordpress.org/plugins/add-customer-for-woocommerce/" target="_blank">Add Customer for WooCommerce</a> Plug-in ermöglicht das einfache erstellen neuer Kunden direkt im Admin-System.</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-black-color has-text-color has-background wp-element-button" href="https://natura-handwerk.ch/" style="background-color:#fadc93" target="_blank" rel="noreferrer noopener">Zu Natura-Handwerk</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Super Easy Stock Manager</title>
		<link>https://dev.dans-art.ch/super-easy-stock-manager/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Mon, 19 Jul 2021 19:36:58 +0000</pubDate>
				<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Wordpress]]></category>
		<guid isPermaLink="false">https://dev.dans-art.ch/?p=60</guid>

					<description><![CDATA[Sometimes it is quite frustrating to work in the backend of WordPress. Especially when there are a lot of plugins installed and the internet connection is not that fast. This leads to long waiting times and a lot of frustration. But this does not have to be like that! (That may sound like a cheese [&#8230;]]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="383" height="126" src="https://dev.dans-art.ch/wp-content/uploads/2021/07/frontend-1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/07/frontend-1.png 383w, https://dev.dans-art.ch/wp-content/uploads/2021/07/frontend-1-300x99.png 300w" sizes="auto, (max-width: 383px) 100vw, 383px" /></figure>


<p>Sometimes it is quite frustrating to work in the backend of WordPress. Especially when there are a lot of plugins installed and the internet connection is not that fast. This leads to long waiting times and a lot of frustration.</p>



<p>But this does not have to be like that! (That may sound like a cheese commercial&#8230; but never mind)</p>



<p>A client of mine has a WooCommerce Shop and they have all their products equipped with barcodes. They use a barcode scanner to search for products in the backend and then make changes. Often these changes fall into one of three categories. <br>Information about the product, quantity, or price</p>



<p>Therefore my main focus was on these three types.<br>I wanted to make a small Plugin, which allows the user to update the shop&#8217;s stock with ease.<br>The second important part was speed. The application should be super fast.</p>



<p>The outcome was a minimalistic design for the most used interactions.<br>In the middle, there is the big search bar which gets automatically focused. This is intended to use with a barcode scanner. After the scan, the selected action is taken via an ajax call. The output gets added underneath. Therefore, a history of all the actions taken is visible all the time. Until you reload the page.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="893" height="763" src="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1.png" alt="" class="wp-image-68" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1.png 893w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1-300x256.png 300w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1-768x656.png 768w" sizes="auto, (max-width: 893px) 100vw, 893px" /><figcaption class="wp-element-caption">Product information view</figcaption></figure>



<p>The first section is to get information about the product. It gets the prices, product image, quantity, and description.<br>Or an Error, if the product is not found. It is mostly used to see if a product is in the database and how much is left in stock.</p>



<p>Section number two, the one with the box, is used to increase or decrease the stock amount. Just set, how much you like to add or remove and scan the barcode. Easy!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="513" src="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1024x513.png" alt="" class="wp-image-57" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-1024x513.png 1024w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-300x150.png 300w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-768x385.png 768w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image.png 1107w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Quantity management view</figcaption></figure>



<p>The last part is about the price. You can set the regular price and the sale price.<br>And again. Use the handy dandy scanner to complete the update.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="880" height="502" src="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-2.png" alt="" class="wp-image-69" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/07/image-2.png 880w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-2-300x171.png 300w, https://dev.dans-art.ch/wp-content/uploads/2021/07/image-2-768x438.png 768w" sizes="auto, (max-width: 880px) 100vw, 880px" /><figcaption class="wp-element-caption">Price management view</figcaption></figure>



<p>That&#8217;s it!<br>Did I already mention that it is super easy to use?</p>



<p>Unfortunately, the Super Easy Stock Manager never got further than the initial &#8222;Beta&#8220; version. Therefore there was no excessive testing on different servers and with other plugins. It works on the client&#8217;s system, that&#8217;s all that is needed. None or less, it should work on any other system/configuration as well. Give it a try and let me know. If this is useful. If so, I will make a real WordPress Plugin out of it and an improved version.</p>



<p><br>The Plugin is available on Github.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-03627597 wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-primary"><a class="wp-block-button__link wp-element-button" href="https://github.com/dans-art/super-easy-stock-manager" style="border-radius:2px" target="_blank" rel="noreferrerhttps://github.com/dans-art/super_easy_stock_manager noopener">Github</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Add Customer for Woocommerce</title>
		<link>https://dev.dans-art.ch/add-customer-for-woocommerce/</link>
		
		<dc:creator><![CDATA[Daniel]]></dc:creator>
		<pubDate>Sun, 18 Jul 2021 18:16:49 +0000</pubDate>
				<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[dev]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[woocommerce]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://dev.dans-art.ch/?p=12</guid>

					<description><![CDATA[This Plugin for WordPress allows the shop manager to create a new user while creating a new order.With a single click on the checkbox, a new user gets created and linked to the newly created order. WooCommerce allows you to get orders from clients via the frontend, but you can also create those easily in [&#8230;]]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="772" height="250" src="https://dev.dans-art.ch/wp-content/uploads/2021/04/banner-772x250-1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/04/banner-772x250-1.png 772w, https://dev.dans-art.ch/wp-content/uploads/2021/04/banner-772x250-1-300x97.png 300w, https://dev.dans-art.ch/wp-content/uploads/2021/04/banner-772x250-1-768x249.png 768w" sizes="auto, (max-width: 772px) 100vw, 772px" /></figure>


<p>This Plugin for WordPress allows the shop manager to create a new user while creating a new order.<br>With a single click on the checkbox, a new user gets created and linked to the newly created order. </p>



<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://dev.dans-art.ch/wp-content/uploads/2021/04/screenshot-1.png" alt="" class="wp-image-21" width="686" height="618" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/04/screenshot-1.png 647w, https://dev.dans-art.ch/wp-content/uploads/2021/04/screenshot-1-300x270.png 300w" sizes="auto, (max-width: 686px) 100vw, 686px" /><figcaption class="wp-element-caption">At the bottom of the billing address, this checkbox appears. It&#8217;s in fact the only change the site manager sees. </figcaption></figure>



<p>WooCommerce allows you to get orders from clients via the frontend, but you can also create those easily in the backend of WordPress. This is especially useful when you get orders by phone or email.<br>But what happens, if you have recurring clients? You have to fill out the billing and delivery fields every time. Unless you create a new user, which stores those data and groups the order to the customer.</p>



<p>I had this situation with a client of mine. They got a decent amount of orders outside of the shop and often from the same customers.<br>One Solution for this problem is, to go to the user page and create a new user. Then create the order and select the user. Doable, but not convenient at all.</p>



<p>My idea was to create a solution as simple and convenient as possible. One Checkbox at the end of the billing fields, that&#8217;s all that should be visible for the shop manager. If checked, multiple things happen in the background.</p>



<p>First, a new user gets created. It uses the name and surname from the billing information. Then the order gets linked to the new user. In some cases, you don&#8217;t have the email address of the client. If so, a &#8222;fake&#8220; email name gets created. Looking something like that: firstname.lastname@yoursite.com.<br>Also, the new user does not get any confirmation, that an account was created. I did not want to notify the user about his new account to prevent confusion.</p>



<p>The creation of this plugin was pretty straightforward.<br>I&#8217;ve added the checkbox with the action &#8222;woocommerce_admin_order_data_after_billing_address&#8220;. The field will only appear if the order is not assigned to a customer. So it is also possible, to create this new user after the order is created.<br>Next i hooked into &#8222;woocommerce_process_shop_order_meta&#8220; to create the new user.<br>The hardest part for me was to deactivate the email that would be sent to the user. It was all a matter of finding the right hooks for the job. As well as to debug test this function. Since I could not just echo out in the action, I had to print it in the PHP error log to see what&#8217;s happening. </p>



<p>End of November, version 1.0 got released. And with that, my first publicly available plugin.<br>Because of its simple nature, there was not a lot to do or update in the coming months. Newer WordPress versions were supported out of the box, and it was quite quiet about this plugin. <br>It took around half a year, till I got a message, that the plugin is not working anymore. Time to have again a look.<br><br>After a chat with the user, I had kind of an idea, what the issue could be. Therefore I&#8217;ve tried a few strange names with special characters and invalid email addresses. And there it was. No error, no message no new user. Time for version 1.1.</p>



<p>This version, released mid of July 2021, brings a few fixes regarding the issue mentioned above.<br>And to make my life easier as well, I implemented some error handling functions. If adding a new user fails, an entry in the error log, as well as in the Simple History Plugin gets created. Which makes debugging so much more convenient.</p>



<p>Before this fix was ready, I got two feature requests. Preselection of the checkbox by default and sending of an email with the account information was asked. Because these were not complex functions to implement, I decided to add those to the 1.1 version as well.<br><br>After the creation of the options page, the check got added to the code. Everything was working just fine. The user got the Standard &#8222;Your account got created&#8220; email from Woocommerce and I was about to call it a day.<br>But one thing was bothering me. How should the customer log himself in? Since he has no password and to use the &#8222;Lost password&#8220;-function was not obvious.<br>This leads me to the solution of creating a custom email. The default Woocommerce header and footer were added to get a more official look. And also, if the webmaster modified the email template, it will be shown in this email as well. Now, if the option is set, the new customer gets an email with his login credentials.</p>



<p>Next was the debugging and testing with all kinds of data. Updating the readme file and added a new screenshot of the options menu. To make the code beautiful and add comments is important for me. I know, my feature me will thank me.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="782" height="402" src="https://dev.dans-art.ch/wp-content/uploads/2021/07/screenshot-3.png" alt="" class="wp-image-48" srcset="https://dev.dans-art.ch/wp-content/uploads/2021/07/screenshot-3.png 782w, https://dev.dans-art.ch/wp-content/uploads/2021/07/screenshot-3-300x154.png 300w, https://dev.dans-art.ch/wp-content/uploads/2021/07/screenshot-3-768x395.png 768w" sizes="auto, (max-width: 782px) 100vw, 782px" /><figcaption class="wp-element-caption">Options page of the plugin</figcaption></figure>



<p>After a few hundred downloads, two 5-Star reviews, and a few feature requests, Version 1.2 got released on the 6th of October 2021.<br>This Update was mostly done because of the requests I received. Since there is the option to send notifications to the user, there was no possibility to switch that on the fly. Before the creation of the new order, you had to go to the options menu to turn on or off the notifications. Therefore I added a second checkbox, which will be displayed, once the &#8222;Add Customer&#8220; Checkbox is selected. This makes it easy to enable or disable this function before creating the user.</p>



<p>Also, it was important for me to give the user proper feedback about what happened. After saving the order, the admin/editor will now get a notice, if the creation and sending of the email were successful or not.</p>



<p>As the third big new feature, the support for custom billing and shipping fields has been added. In WordPress it is easily possible, to modify the billing and shipping fields to your needs and add new ones. Those custom fields were ignored by the Plugins before 1.2. Now they get saved as well and if you load the data for a new order, it gets populated as well.</p>



<p>At the start of February 2022, there was the release of version 1.3. In this version, a bug got fixed which was resulting in customers getting created on existing orders, due to the preselect-checkbox option.</p>



<p>The next few updates were mainly driven by user&#8217;s feedback.  I added support for custom email templates with preview and added a few new hooks, to customize the plugin or solve unique user problems.<br><br>It is always very interesting for me to see, how other people use the plugin and what kind of special cases they have.</p>



<p>The Plugin is available in the official WordPress plugin directory and on Github</p>



<div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-03627597 wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-default"><a class="wp-block-button__link has-neve-link-color-background-color has-text-color has-background wp-element-button" href="https://wordpress.org/plugins/add-customer-for-woocommerce/" style="border-radius:2px;color:#fffffa" target="_blank" rel="noreferrer noopener">Github</a></div>



<div class="wp-block-button is-style-default"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/plugins/add-customer-for-woocommerce/" target="_blank" rel="noreferrer noopener">ADD CUSTOMER FOR WOOCOMMERCE</a></div>
</div>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
