wolfgang maehr · wolfgang maehr! 2017 portfolio digital transformation & product creation...

Wolfgang MaehrPortfolio 2017

Wolfgang Maehr2017 Portfolio

Design must elevate, not merely delight.


Digital Transformation

Architecting truly digital business operations

Product Creation

Creating products for digital business operation

Interaction Design

Designing how people will engage digitally

UI & Visual DesignDesigning the surfaces of

digital products

Wolfgang MaehrDIGITAL PROBLEM SOLVER × INTERACTION DESIGNER = PRODUCT CREATOR

We are living through the complete convergence of our physical and meta-physical worlds as this digital revolution advances. We all impact this profound transformation and thus carry responsibility for its outcome.

I want my life’s work to have contributed to a more just, sustainable, free and vibrant world for all. I hope to achieve this by creating products and systems that treat all humans with respect, are interoperable and agile, open and distributed, sustainable and worth the effort.

A curious kid with a growing fascination for technology, I moved through software architecture into interaction design to create usable and useful digital products. Recently I have been working on industrialising software to achieve the same quality, predictability and scale as all other engineering disciplines.

I enjoy exploring and solving meaningful, complex and unconventional problems, diverse environments and fostering people.

Global perspective. Local actuation. Nomadic spirit.


Digital Transformation & Product Creation


Digital Transformation & Product Creation

Software is eating the world. We’re still only at the start of this fundamental shift and merely a fraction of organisations and people are able to keep up. We still have a long way to go until digital interactions are as accessible and omnipresent as electricity and industrially manufactured goods.

People have become used to a certain quality of engagement and service: multi-channel engagement, self-service, flexibility and customisation. Most non-digital organisations struggle doing this at scale.

At Gumbuya my responsibility was to help our customers to become truly digital:

1. Provide a vision for their truly digital operation.

2. Elicit their operation model and devise an architecture and roadmap for it.

3. Design and develop products enabling this digital operational model.

ARCHITECTING TRULY DIGITAL BUSINESS OPERATIONS

Examples – Compliance Platform

– Inventory Management System

– Gumbuya Methodology

– Gumbuya Platform


Compliance Platform

2015–2016

Project Scope Helping the client CEO to transform from a pure consulting business to a hybrid product business by building some of their services as a SaaS product.

My Responsibilities – Guiding conceptualisation,

modelling and architecture of the product

– Creating the required bill of materials (specification) and estimated costing

– Leading the development of the product from a user and customer perspective

Challenges – Defining meaningful roadmap, MVP

and go-to-market

– Creating definite yet flexible processes to scale well across clients

DIGITAL TRANSFORMATION & PRODUCT CREATION — 1

INFORMATION ARCHITECTURE

Trainings

Certifications

Consumers Bulletins

Consumer

Bulletin

Training

Attachments

Reports

Report

Issue

Certification

Internal Auditor

Whistleblower Issues

Provider Certification Providers

Region

Task

Group

<Role>

<Role>s

Deadline

groups

subgroups draft | <date>

attachments

<date>

all

<risk level>

<status>

<date> | unread

<date> | unread

<type>

<date>

draft | availableregions

draft | available

<status>

provider

draft | available

variant

untaken | taken<status>

<status>

auditor

investigations

affects

issues

consumer

<date> | impending

invited | attended | missedconsumers

roles

tasks

<date> | incomplete

On customer deployment

Collection

Item

Collection item

Connected item Owned by customer

Owned by end customer

Present in all cases

On end customer deployment

Created through workflow

Present in some cases

Entry point

PRODUCT CONCEPT

Strategy

Compliance Strategy

Face-to-Face Training Compliance Bulletin Training +

Certification Whistleblower App

ANY INDIVIDUAL

AUDITOR

EXTERNALAUDITOR

BOARD

HIGH RISK EMPLOYEES

EMPLOYEES + SUPPLIERS

Reports

��

OPERATOR

Dashboard

�

�

�

�

�

�


Inventory Management

2016

Project Scope A luxury beauty and healthcare brand required a modern digital operational fabric from production planning, inventory management to logistics, point-of-sale and consumer engagement portal.

My Responsibilities – Envisioning concept,

fundamental architecture and capabilities

– Define and model the platform, estimate the cost and time of development

Challenges – Architecting complex system

with little customer input

– Building a feasible roadmap with bite-size updates


BUILD PROPOSAL

Build ProposalThe 8 key propositions are one Facet each, driven by a shared Model running on Gumbuya’s Platform.

Building on Gumbuya’s framework, each solution follows this archetypical structure.

Aspect Outcome CostsGumbuya Platform Operating system to run the Client’s applications.

Gumbuya Cloud Dedicated infrastructure (Gumbuya Vault) later.

Operation: Users, Consumption, Development & Operation Platform, Support

Foundation Services Common capabilities used in typical IT systems.

4 Foundation Services User Management, Authentication System, Notification Service, Export Service

Build: License, CustomisationOperation: External infrastructure

Model Core architecture for all parts of the solution.

8 Custom Facets +4 Foundation Services

Build: Stage 0, further Conceptualization and Scoping in later stages

Custom Facets Build of all the custom facets and their facilities.

8 Custom Facets: 15 Facilities Build: Stages A–E

Integrations Third party integrations needed for Custom Facets.

6 Integrations Validation Generator, Validator, POS, Online Shop, CRM, Payment System

Build: Integration workOperation: Infrastructure charges

Analytics & Reporting Track, analyze and report system and user activity.

250* Analytics + 26* Reports *Estimate

Build: Stages A–E

External Infrastructure

Foundation ServiceModel

Facility Facility

CustomFacet

Gumbuya Platform

Analytics &Reporting

Facility

SYSTEM OVERVIEW


Gumbuya Methodology

2015–2017

Project Scope At Gumbuya we want a reproducible and modular process for all client engagements from sales through development to support.

My Responsibilities – Define a streamlined and

industrialised engagement process based on customer engagements

– Define a formalised model for predicting delivery cost, time and effort

– Deliver customer projects through said process

Challenges – Defining a generic yet all-

encompassing model

– Formalising said model in an approachable yet precise manner


SOFTWARE BILL-OF-MATERIALS

Model

Consumer Experience

Front-Office Back-

Office

Information ArchitectureDefines all business objects in an organisation; shared across

solutions and products.

Interaction ArchitectureDefines how users and other systems interact with the business objects for a given set of capabilities.

Access ManagementDefine the type of users within and outside the organisation,

and how they can interact with what data.

IntegrationsExternal integrations

exchanging data with the model.

Analytics & ReportingTrack, analyze and report system and user activity.

IDEA TO MODEL

� �

CREATE BULLETIN

SELECT RECIPIENTS

SEND BULLETIN

ADVICE

RECIPIENT

BULLETIN

Integrated Publishing & Engagement Platform for

Agents & Customers Agent Management

CRM & Engagement

PlatformPublishing Platform

Financial Modelling System

BUSINESS PROBLEM SYSTEM FACETS MODEL


Gumbuya Platform

2013–2017

Project Scope Gumbuya provides a revolutionary tech stack in a PaaS offering. In addition, it requires a set of tooling that enables to actually build on the technology.

My Responsibilities – Defining the analytics product from

low-level telemetry to reporting dashboard

– Collaboration on billing and revenue model driven by low-level telemetry

– Collaboration on developer tools, documentation and onboarding

Challenges – Combining a wide range of

telemetry event types into a consistent framework

– Creating developer materials and tools that are powerful yet approachable


SYSTEM OVERVIEW

�

� �Integration Services

REST ConnectorsFTP ConnectorsSOA Connectors

�Delivery Engine

Communication & Session ManagementCDN, Bundler & Delivery ToolsNotification & Subscription System

Telemetry System

Telemetry SystemDiagnostics ServicesTelemetry Store

�Analytics Export

Analytics Raw ExportDashboard & Tools

Client

RuntimeDevice or Cloud

Device Framework & Snaplet RuntimeNotification & Subscription SystemTelemetry CaptureCommunication & Session Management

�Module

Library & Marketplace

Snaplet LibraryAsset/Code Repository IntegrationUser/Role Management

�End User Experience

Consumer ExperienceManagement Experience

RepositoryIdentity & Rights ManagementGumbuya Graph ProcessorGumbuya Graph

�

Tooling Environment

ModelerComposer

��

Snaplet: Code executing graph operations


Interaction Design,UI & Visual Design


Interaction Design, UI & Visual Design

While the first step of a successful product is to be useful, the next step is to be well usable and appealing. The quality of the visual design for digital products has improved significantly recently, yet usability is often still neglected due to it’s relative complexity.

As interaction designer my focus is on how users engage with the product and the world it gives access to:

1. Design how people engage across endpoints and channels (e.g. applications).

2. Design how people navigate between surfaces to achieve their outcomes

3. Design how people interact within a surface (e.g. screen)

4. Design how each of these surfaces looks like.

DESIGNING HOW PEOPLE WILL ENGAGE DIGITALLY

Examples

– Multi-Channel Engagements

– Interaction Architecture & Navigation

– UI & Visual Design


Multi-Channel Engagements

Almost every project now needs to work across channels and endpoints. Some may be highly specialised like QR code scanners and beacons, others communicate the same content in a different form factor and context.

Challenges – Giving access to the same information

through tailored modes of operation

– Giving access to the same information tailored to the specific context and task

– Enabling seamless transition between channels, keeping the system in sync

Strategies – Consistent underlying model

– Atomic transactions

– Mapping of non-linear user journeys

Examples – Financial advisory dashboard (2015–2017)

– Inventory management system (2016)

– Compliance platform (2015–2016)

– Meeting room booking system (2015)

INTERACTION DESIGN — 1

MEETING ROOM BOOKING SYSTEM

Gumbuya Confidential: meeting-concept.graffle — 2014-09-30

!

��

��

�Meeting management remains on the devices in Outlook, Calendar, etc.:– Creation– Invitation– RSVP– Modifications

Gumbuya pollsExchange for new

meetings.

Each meeting has a micro-site with:– Organiser + attendees– Agenda– Related meetings (project, series,…)– Comment, share, link to meetings + resources

��

��

Lists the meetings happening in the room– Organiser + attendees– Available slots (timetable)

Provides information on the current and next meetings.– Allow set a message for outside– Input modes? Touch screen?– What size?

Overview over rooms and vacancies:– List of meeting rooms (equipment, status)– Look up by time– Possibly floor plan– LATER: Find my meeting– LATER: Directions to my room


1. HIGH LEVEL IA

Interaction Architecture & Navigation

The ease of moving through a digital engagement can make or break products.

Challenges – Matching people’s approach,

communicating where they are and providing predictable next steps

– Not encumbering people with excessive steps but keeping interactions crisp

– Linking together use cases to fit the bigger picture

Strategies – Consistency from high level down to the

screen flow and on-screen interaction

– Modular assembly

– Streamlining use-cases

– Testing, testing, testing

Examples 1. Financial advisory dashboard (2015–2017)

2. Spuul: Movie streaming web site (2012)

3. Financial advisory dashboard (2015–2017)

4. Reporting dashboard for parents (2012)

INTERACTION DESIGN — 2

2. NAVIGATION FLOW

LA1: Home Page(spuul.com)

LA2: logged in (free)

LA3: logged in (premium)

LA2a/LA3a: first login

CL1: Clip Listing Page(spuul.com/popular)

SR1: Search Result Page(spuul.com/search)

CD1: Clip Detail Page(spuul.com/watch?clip=xyz)

CD2: resume

CD3: play clip

CD4: play trailer

CD5: special clip page

UA1: User Account Page(spuul.com/account)

ER1: Error 404 Page(spuul.com/404)

FA1: F.A.Q. Page(spuul.com/faq)

AC1: About & Contact Page(spuul.com/about)

TC1: Terms & Conditions Page(spuul.com/tnc)

O2: Registration Overlay

Progress Feedback Overlay

O1: Login Overlay


O3: Special Payment Overlay


http://spuul.com


Interaction Architecture & NavigationINTERACTION DESIGN — 3

3. SCREEN FLOW

">7=��>47><4�� 24;;�� 9>7=�3>42><

�33�2><<4=CJ

�38C

��E4A6A44=�+4AA024�;>2:��*?A8=6584;3��#

�� +F #8

#>68=

>?D;B4

�<08;� 90=4�3>42><

#>68=

&?D;B4�;>68=

'0BBF>A3� ��

)4<4<14A�<4

�0B71>0A3

�;84=CB %4FB '>AC5>;8> $0A:4CB

%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J

%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J

">7=��>4� ��

� �� !=BC8CDC8>=�8=BC8CDC8>=��

">7=��>4� ��

� �� !=BC8CDC8>=��8=BC8CDC8>=��<>A4

%4FB�!C4<*7>AC�34B2A8?C8>=��D8B�<>;;8B��4BC�=>=�2><<J

%4FB��4C08;

%4FB�!C4<��!=C464A�?>BD4A4�4A0C�0�0=C4�E4=4=0C8B�30?81DBJ�70==4; ��270==4;��270==4;�

*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C

$0424=0B�B43�380<�464C�A8BDB�E0A8DB�1;0=38C�B8C�0<4C�=>=�<06=0��A0B�<0CC8B�2>=B42C4CDA�?DADB�B8C�0<4C�54A<4=CD<�-8E0<DB�B068CC8B�;02DB�E4;�0D6D4�;0>A44C�ADCAD<�50D281DB�3>;>A�0D2C>A�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3�B4<?4A

'A>3D2C�%0<4*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C



'A>3D2C��4C08;

'A>3D2C�%0<4*7>AC�34B2A8?C8>=��A0B�9DBC>�>38>��30?81DB�02�5028;8B8B�8=��464BC0B�464C�@D0<�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3�B4<?4A

�;>B8=6�34B2A8?C8>=J�-4BC81D;D<�83�;86D;0�?>AC0�54;8B�4D8B<>3

�;84=C��4C08;

%0<4 .4867C�4B2A8?C8>=

�BB4C�2;0BB�=0<4 ��

�BB4C�=0<4 ��*7>AC�34B2A8?C8>=��A0B�9DBC>�>38>��30?81DB�02�5028;8B8B�8=��464BC0B�464C

">7=��>47><4�� 24;;�� 9>7=�3>42><

�DBC><�=>C4�>=�C74�2;84=C��4=40=�;028=80�1814=3D<�=D;;0�B43�2>=B42C4CDA��DB24�30?81DB��C4;;DB�02�2DABDB�2><<>3>J

�>=3�=0<4 ��!��

*H<1>; (D0=C8CH.4867C -0;D4%0<4 �70=64

�BB4C�2;0BB�=0<4 ��

'A>3D2C�%0<4��

�BB4C�?>AC5>;8>

��)8B:�?A>58;4�D?30C4

*4;42C43�?A>3D2C�'A>3D2C�%0<4��D?30C4

�38C

�DBC>380=

�8=0=280;�!=BC8CDC8>=� �8=0=280;�!=BC8CDC8>=��8=0=280;�!=BC8CDC8>=��8=0=280;�!=BC8CDC8>=��

�33�2DBC>380=

$0A� �)8B:�@D4BC8>==08A4�C0:4=�41� ��'>AC5>;8>�<>34;�0BB86=<4=C

+A0=B02C8>=� 8BC>AH

�38C��4C08;��%4F��;84=C�

,?30C4�A8B:�?A>58;4

*4;42C�?A>3D2C

�33�2DBC>380=

)4<>E4��8=0=280;�!=BC8CDC8>=�� )4<>E4

*0E4

&E4A�F70C�?4A8>3�>5�C8<4�F8;;�H>D�8=E4BC�C>�02784E4�H>DA�6>0;��>A�4G0<?;4��85�H>D�?;0=�C>�A4C8A4�8=�58E4�H40AB�0=3�1468=�F8C73A0F8=6�<>=4H�5A><�H>DA�?>AC5>;8>�0C�C70C�C8<4��H>DA�C8<4�7>A8I>=�8B�=>C�9DBC�58E4�H40AB��1DC�A0C74A�C74�=D<14A�>5�H40AB�H>D�?;0=�C>�14�8=�A4C8A4<4=C�05C4A�58E4�H40AB

K��H40AB

�0=24;

%4F�2;84=C

%4F�2;84=C

�;84=C��4C08;��;40=�

=�0)8B:�?A>58;4�D?30C4

*4;42C43�?A>3D2C�=�0�D?30C4

�38C

�DBC>380=B �33�2DBC>380=

';40B4�64=4A0C4�0�A8B:�?A>58;4�0=3�B4;42C�0�?A>3D2C�

+A0=B02C8>=� 8BC>AH

$0A� ��;84=C�2A40C43

��

� � 'A>3D2C�%0<4��K ��

'A>3D2C�%0<4��K��

*7>AC�34B2A8?C8>=�'A04B4=C�2><<>3>�2DABDB�<06=0��E4;�B24;4A8B@D4�=8B;�2>=B42C4CDA�4C

<>A4�34C08;B

*4;42C

'A>3D2C�%0<4��K��

'A>3D2C�%0<4��K��

'A>3D2C�%0<4�� K��

/>DA�A8B:�?A>58;4

��

�0=24; *40A27

�DBC>380=� $H�10=:�=0<4

*40A27�2DBC>380=

#>68=�C>�2DBC>380=

�<08;� 90=4�3>42><

#>68=

$H�10=:�=0<4�;>68=

'0BBF>A3� ��

�02:

�22>D=C�B4;42C8>=

�33

*4;42C�022>D=CB

�0=24;

�22>D=C�=0<4�=D<14A ��

-0;D4�22>D=C

*C>2:�BH<1>; *40A27�/07>>��8=0=24

*C>2:�BH<1>; *40A27�/07>>��8=0=24

$0A:4C�)4BD;C

#>6>DC

$0A:4CB

'A>3D2CB

%4FB

�;84=CB

#>6>

"0=4��>4

�0B71>0A3 #>6>

�;84=CB #>6> %4FB #>6> 'A>3D2CB #>6> $0A:4CB #>6>

�;84=CB��">7=��>4 #>6> %4FB��%4FB�!C4<�=0<4 #>6> 'A>3D2CB��'A>3D2C�%0<4 #>6> $0A:4CB #>6>

�;84=CB��">7=��>4 #>6>

�;84=CB��">7=��>4��)8B:�?A>58;8=6 #>6>

�;84=CB��">7=��>4��*4;42C�?A>3D2C #>6>

'A>3D2C��4C08;

��E4A6A44=�+4AA024�;>2:��*?A8=6584;3��#

�� +F #8

�0=24; *0E4

%0<4� ">7=��>4

><4� � ��

�<08;� 9>7=�3>42><

,?;>03�=4F�8<064

�DBC><�=>C4�>=�C74�2;84=C��4=40=�;028=80�1814=3D<�=D;;0�B43�2>=B42C4CDA��DB24�30?81DB��C4;;DB�02�2DABDB�2><<>3>J

�><<4=C�

'7>C>�

�4;;� � ��

�33A4BB� ��E4A6A44=�+4AA024�;>2:��

�8CH� *?A8=6584;3

*C0C4� �;>A830

�0241>>:� 4=C4A�,)#

+F8CC4A� 4=C4A�,)#

#8=:43!=� 4=C4A�,)#

�38C��4C08;��%4F��;84=C�

�38C��4C08;��%4F��;84=C�

=4F

�;84=C��4C08;

�;84=C��4C08;

�;84=C��4C08;�0=24;

4. NAVIGATION ARCHITECTURE

T&C Page

About Page

Privacy Policy Page

FAQ PageFooter

Header

App Page

Login Overlay

Signup Overlay

Retrieve Overlay

1: email changed

Settings Page

Delete Account Overlay

Change Password Over-lay

Reminder Settings Over-lay

Change Email Overlay

Share on Twitter

Share on Facebook

Share on e-Mail

2: password changed

3: password not changed

4: password sent

5: activate account

6: set up logging

7: too little data

8: mail settings changed

9: account deleted

10: advice shared

Header

logout

Home Page(not logged in)

Curriculum Pagelogged

in

Skill Pagelogged

in

logged in

Advice Pagelogged

inGame Page

logged in

Home Page(logged in)


1. UI FRAMEWORK

��

��

�� !��!��

�� !

��!��

��"�!��!��

! ;"

��!��

��"�!��!��

"

#

4

;

4

"

��

;

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

"

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��!�� "

��"��!

#

4

%

��"�!��

��

;

"

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��!�� "

#

4

;

4

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��"�

��!��

��"�!��!��

#

4

"

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��

��!��

��"�!��!��

��!��!��

#

4

��

!"

��

!"

��

��"!��

��"�!��!��

��"�!��!��

��"�!��!��

��!��!��

��!��!��

��!��!��

l ��

l ��!��"�

l ��!��"�

��"�!��!��

��"�!��!��

��!��!��

l ��

l ��!��"�

��"�!��!��!��!��

��"�!��!��

��!��!��

��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��!��!��

��!��!��

��!��!��

��!��!��

�� !

��

��!��

��"�!��!��

��!��!��

��

��"�!��!��

��"�!��!��

��"�!��!��

��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"��!

��"��!

��

��!��

��

!"

��"�!��!��

��"�!��!��

��!��!��

��!��!��

�� "

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��

��!��

;

4

"

�� "

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��"�!��!��

��

;

"

;

4

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��

l ��

�� !

��

��!��

��"�!��!��

��

��"�!��!��

��"�!��!��

��"�!��!��

��!��

��!��!��

��!��!��

��!��!��

��!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��"�!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

��!��!��

�� !

��

��!��

��

��!��

��!��!��

��!��!��

��!��!��

��!��!��!��

��!��!��

��!��

��!��!��

��!��!��

Banners

Products

Articles

<Topic> Content

<Topic> Content

<Topic> Content

Products

Articles

Articles

"

BannersAll Collection4

<Topic> ContentAll Collection4

ArticlesAll Collection4

ProductsAll Collection4

��!��!��!"��

Product A# Product B#

Product X#Product C#

Article 1;Article 2;

Article n;Article 3;

%

About us;

Link to Blogl

Link to Cataloguel

Header"

Footer"

Banner: shows some products & articles; link to articles

Header: Logo/home, Catalogue, Blog, About Us

Products: show 4–6 random products; link to product details; link to full catalogue below

Articles: show 4–6 random products; link to article; link to full blog below

Article: shows article

Related products: collection of products connected to the article

Comments: Allow visitors to comment and reply. No uploads or embeds…

Product: shows product details

Buy button: links to shopping cart

Related products: collection of products connected to the product

Related articles: collection of articles connected to the product

Full list of products

Full list of articles

Article

Articles: show 4–6 random products; link to article; link to full blog below

Products

Mobile: alternative, more compact visualisationTablet: Similar/same visualisation as on desktop

Articles

Mobile: alternative, more compact visualisationTablet: Similar/same visualisation as on desktop

- Product Collection: holds all products- Article Collection: holds all articles- Banners: holds all articles/products that appear in the banner- Topic Collections:

- topic article collections hold all articles belonging to a topic- topic product collections hold all articles belonging to a topic

- Advice forum/chat- Sharing of articles and products- Banners

"!"��#!��

2

If we need custom product and article visualisers, these topic collections for now need to be split into two collections each.

$% & '

2 2Sharing: Not possible if the return page shall be at the

Sharing: not feasibleProduct:

- custom visualisation- custom schema: requires shell to be able to create and edit items

Share buttons are not available as I cannot create share links…

For now only random is possible

- Carousel to be extended to support article- Tunnelling out may have issues

Currently to be done by linking explicitly

product cannot be created from

shell if custom schema

UI & Visual Design

Traditionally the focus of design efforts, the visual and UI design is the icing on the digital products.

Frankly, as my visual design skills are comparatively weak, my focus is on clear information structure and clean design.

Challenges – Communicating information based on

it’s importance

– Balancing a visual language across different surfaces

– Aesthetics

Strategies – Visual design frameworks and

modules reused across the products

– Striving for minimalism

Examples 1. Aesthetic Essentials: Online shop (2014)

2. Gumbuya: Analytics dashboard (2015)

3. Compliance platform (2015–2016)

4. Spuul: Movie streaming web site (2012)

5. GiveBlood: Blood donation app (2012)

UI & VISUAL DESIGN — 1

2. UI MOCKUP

http://spuul.com


UI & Visual DesignUI & VISUAL DESIGN — 3

3. VISUAL FRAMEWORK

Gumbuya Confidential: poseidon-ui_mockups_screening-v0.5.graffle — 2016-01-06

https://trident.oceanix.io

TRIDENT GROUP Merinda MillerINTERNAL AUDITOR !"# $

TASKS

Trident » Trident Asia

Archive organization

The Trident mother organisation (this text is a two-line description)

Contact: Deepika RadhakrishnanParent Org: Trident

Initial: A %

in 6d Q2 2015: Quarterly Compliance Report will be compiled soon. Send reminder&

15m ago Dizzy Dionysus was filed. Read and assign'

4mo ago Chirpy Chronos is assigned to you and unresolved. Snooze or Resolve'

2d ago 2015 Annual Training #2 should be completed. Deepika is marking attendance(

1w ago 28 employees did not complete Asian Hiring Laws 101. Send reminder)

1w ago 217 consumers are failing in compliance. Send reminder*

2w ago 9 new certifications were made available to your Consumers by YouComply. Mike is assigning certifications+o

3w ago Aug 2015: Compliance and Legal Update has a low open rate. Send reminder,

3mo ago Q1 2015: Quarterly Compliance Report is ready. View now&

5mo ago 7 consumers did not attend 2015 Annual Training #1. Schedule training-

Reports & History&

Whistleblower Issues'1

Sub-Organizations.

Groups/

Consumers#

Trident Asia

72% (-10%)Overall Compliance

100%Face-to-Face Training

92% (+12%)Online Certifications

56%Bulletin Read Quota

Bulletins Sent5254Whistleblower Issue1

COMPLIANCE OVERVIEW EDUCATION BULLETINS

4d ago Acme Inc. screening completed with warnings.0 Review report

4d ago Juan Monterola was detected for suspected misconduct.1 Investigate

Overview"

Face-to-Face Trainings(

Online Certifications)

Bulletins,

Screening Requests2

5. WIREFRAME + UI DESIGN

Date Yesterday, September 22, 2011Location The Apollo Clinic, Jyoti Nivas

College Rd, Bengaluru, IndiaBlood AB-Ref IN-KA-BGL-XY02643-ZStatus In need

Requests (3/17)Back

Facebook

Pledge Blood

Twitter

4. SCREEN WIREFRAME

��

Spuul Wireframes v.0.1 by Extra ThoughtConfidentialCD2: ClipD Resume (fp)

��

��

��

��

� ��»�� »��

��

��!��

��

��

��!��

� ��

��

��

��

#,3�'%2�*35+)7�7,)�6)26%7-32�'5)%7)(�&<�7,)�%:%5(�:-22-2+�281&)5��,30-�/)��))',',)��#-7,�1)03(-)6�73�53'/�7,)�186-'�-2(8675<�%2(�%8(-)2')6�%0-/)��$��&538+,7�&%'/�'53:(6�73�'-2)1%�,%006��

!,)�139-)�*3003:6�7,)�5)'/0)66�',%6)�3*��%008��%05%1�� %2.%<��877��%�<382+�7)5535-67�:,3�)6'%4)6�*531�.%-0��'%86-2+�18',�(-675)66�73�,-6�.%-035��6)2-35�430-')1%2��%1��%'/-)� ,53**��2�35()5�73�,)04�,-1�'%7',�7,)�9-00%-2��%1�6�*-%2')��%2+%��%(,85-��-;-7��.3-26��%008�6�+%2+�,34-2+�73�085)�,-1�&%'/�-273�'8673(<��%008�5)%0-6)6�,)5�758)�-()27-7<�%2(�6)76�387�73�86)�,)5�73�,-6�3:2�%(9%27%+)��2�7,)�453')66�,)�*%006�-2�039)�:-7,��%2+%�237�/23:-2+�:,%7�0-)6�%,)%(…

"-):6� ��

�'7356� %2.%<��877��%(,85-��-;-7��%'/-)� ,53**��284%1��,)5��%/,))��80=%5��5%13(��87,8��%2+%0��))2%��847%��0-��6+%5

�-5)'735� 8&,%6,��,%-#5-7)5� 8&,%6,��,%-��%1��)0/%5��%10)6,��%2()<

�%2+8%+)� �-2(- 8&7-70)6� �2+0-6,��-2(-��!%1-0�� 4%2-6,��5)2',��%22%(%��8.%5%7-��82.%&-��

�%0%<%0%1��)51%2��7%0-%2

�-/)6� ��

!%+6� �'7-32$)%5� � �)2+7,� ,��1!<4)�� 5))

��

��

�� !��#

�� !

��

��

�� !��m Ipsum…�� !

�� ! ��!

��

��

��

��"��

��

��"��

��…

��"��

��…�� …

��"��

��…

��"��

��…�� …

��"��"�� !��

��

��

��

��

��

��…

�� 1 2 3 4 5

��

��

A

B CD


Other Samples


Appyzoo’s StickeryEDUCATIONAL GAME FOR KIDS: PARENT ZONE — UI DESIGN (2012)

Spielsprache Wählen

Englishen

Bitte wählen Sie die Spielsprache für Ihr Kind.Das herunterladen des Sprachpaketes kann

etwas dauern, wir bitten Sie um etwas Geduld.

Continue with English

Españoles Descargar

中国zh 下�

Françaisfr Télécharger

Deutschde Laden

日本jp ダウンロード

Free AccountSkip Signup

More information at http://parents.stickeryapp.com.

Email [email protected]

Password minimum 8 characters

By signing up, you agree to ourterms of service.

Female Male Birthday2008-01-01

Your child's details:

We do not share your child's detailswith third parties.

OPTIONAL

A Stickery account provides for free:• Tracking of your child's learning performance.• Customized parenting tips.• Ability to reset the game and play it again.

Parent ZoneStickery Logout

Progress Reports Parent Guide

[email protected]

Reset Game

More information at http://parents.stickeryapp.com.

Language: English

Feedback Forum

Share Stickery with Your Friends

Credits

Get the Full Game

Reset Game?The story will restart. Your progress reports

will not be affected.

Cancel Reset


Opera DragonflyWEB DEVELOPMENT TOOLS — UI FRAMEWORK & CONCEPTS (2008)

contents

padding

border

margin collapsed

2px

2em

2px

–2em9999px

1em

1em

1px

-1024px

–

4px

20%

52ex

0px

–

1280px

9600em contents

padding

border

margin

2px

2em

2px

–2em

1em

1em

1px

-1024px

–

4px

20%

52ex

0px

–

1280px

9600em

collapsed

contents

padding

border

margin

2px

2em

2px

–2em9999px

1em

1em

1px

-1024px

–

4px

20%

52ex

0px

–

1280px

9600em

guan. M

a dip is

lja fac

baseline

line-height:145%

descender

font size:medium

ascender

word-spacing:2em

guan. M

a dip is

lja fac

c

p

bm

2px

2em

2px

–2em999px

1em

1px

–

1em

Standard block element Margin collapsed block element (inverted highlight) Border collapsed block element (inverted highlight)

Standard inline element. Inline element with typographic information.


Opera Mobile BrowserMOBILE BROWSER — INTERACTION CONCEPTS (2006)

Lorem Ipsum

Aliquam

Consequat, magna eu auctor dignissim, elit nibh pharetra tellus, nec suscipit nunc pede non tortor. Maecenas dapibus. In eget turpis sed risus posuere sodales.Sed pharetra elementum dui. Maecenas vitae justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin tristique enim sed erat. Suspendisse velit velit, fermentum vitae, dapibus ut, gravida nec, odio. Integer convallis. Sed semper nisl quis nisl. Nullam non lorem in quam dictum sollicitudin.

Pellentesque velit ligula, viverra in.

Donec est. Mauris scelerisque, ipsum sed dapibus aliquam, sem felis accumsan ante, nec egestas tortor pede non velit. Vestibulum nec mauris. Pellentesque vel dui. Nullam placerat, tortor eu bibendum dictum, turpis tellus feugiat erat, vel porttitor tellus libero nec quam. Morbi et massa. Morbi lorem. Aenean molestie, leo placerat sagittis adipiscing, mi felis blandit mi, et congue lacus ante vel tellus. Maecenas vehicula. Morbi et velit. Sed in nunc et massa iaculis accumsan.

A e n e a n o r c i o r c i , venenatis.

Praesent tincidunt lobortis nisi. Aenean nisl risus, c o n d i m e n t u m i d , vestibulum sed, mattis eu, elit. Nulla scelerisque, n e q u e v e l g r a v i d a t incidunt, augue nibh scelerisque tortor, non ultrices nunc mauris nec nibh. Quisque neque enim, feugiat nec, dapibus eget, dictum nec, lorem. Aenean lectus diam, dignissim nonummy, accumsan vel, fermentum eu, nul la . M a u r i s e r o s v e l i t , c o m m o d o n o n , pellentesque at, tristique in, turpis. Nullam purus.

2006-09-15

Lorem ipsum dolor sit amet

Vivamus suscipit, sem ac

gravida porttitor, sem felis

e l e i f e n d l a c u s , a t

consectetuer pede enim eu

urna. Praesent et nibh. Sed

euismod orci nec mauris

elementum lobortis. Nulla

eu neque eu lectus sodales

adipiscing. Suspendisse

velit.

Pede eu elit

Praesent sit amet

Fermentum

Nulla bibendum

Velit et massa

Curabitur

Scelerisque eros

Vel dui. Quisque

Molestie egestas

Mauris fusce

Semper enim et

Arcu vestibulum

Tristique dictum

Magna

Pellentesque

Mauris leoQuisque tempor erat vel

urna. Vestibulum justo

mi, lobortis sed,

fermentum et, tristique

ut, enim.

Suspendisse dignissim

venenatis quam. Sed id

lacus. Proin auctor

rhoncus turpis.

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Phasellus egestas, libero vel

blandit laoreet, metus eros

dictum est, in adipiscing

nulla dolor vitae lacus. Sed

a c c u m s a n , l e c t u s n e c

pharetra convallis, pede odio

ullamcorper elit, sit amet

suscipit nulla ligula nec

lectus. Proin pharetra felis

quis felis. Maecenas fringilla

o d i o a t e r a t . V i v a m u s

suscipit, sem ac gravida

porttitor, sem felis eleifend

lacus, at consectetuer pede

enim eu urna.

Ut et odio id

sapien pretium

convallis. Sed

vitae mauris.

Donec mauris

tellus, venenatis

eu, laoreet eget,

a l iquam nec,

dolor. Ut eget

quam ac dui

ornare feugiat.

A e n e a n

placerat. Cum

sociis natoque

p e n a t i b u s e t

m a g n i s d i s

p a r t u r i e n t

m o n t e s ,

n a s c e t u r

ridiculus mus.

P h a s e l l u s

faucibus nunc

non felis. Proin

n e q u e . N a m

lacus. Aliquam

vehicula arcu.

Vestibulum ut

urna quis tortor

ultrices lacinia.

Vestibulum at

m i e u o r c i

a l i q u a m

dignissim. Ut

v i v e r r a

adipiscing nibh.

Ut interdum.

Aenean ligula

l i b e r o ,

bibendum eget,

scelerisque et,

v e h i c u l a s i t

amet, sapien.

tellus, venenatis eu, laoreet

eget, aliquam nec, dolor. Ut

eget quam ac dui ornare

feugiat. Aenean placerat.

C u m s o c i i s n a t o q u e

penatibus et magnis dis

parturient montes, nascetur

ridiculus mus. Phasellus

faucibus nunc non felis.

Proin neque. Nam lacus.

Aliquam vehicula arcu.

Vestibulum ut urna quis

tortor u l tr ices lac inia .

Vestibulum at mi eu orci

a l i q u a m d i g n i s s i m . U t

viverra adipiscing nibh. Ut

interdum. Aenean ligula

l ibero, bibendum eget ,

scelerisque et, vehicula sit

amet, sapien.

Sed at nulla sit amet justo

volutpat consequat. Nam

quam massa, scelerisque sit

amet, condimentum quis,

venenatis eget, dui. Donec

vel purus. Nam porttitor

condimentum velit. Integer

posuere arcu a est. Aliquam

ligula urna, rhoncus non,

sodales ut, sagittis sit amet,

quam. Nunc dui. Vivamus in

quam. Praesent tristique

magna vi tae mi luctus

a c c u m s a n . V e s t i b u l u m

interdum ante quis mi.

Suspendisse tortor orci,

fermentum in, consequat ac,

sollicitudin nec, leo. Donec

sed velit eu mauris hendrerit

elementum. Pellentesque

habitant morbi tristique

s e n e c t u s e t n e t u s e t

malesuada fames ac turpis

egestas. Nullam semper

bibendum odio. Pellentesque

pellentesque nonummy elit.

I n v e h i c u l a t u r p i s

condimentum massa.

Mobile

Lorem Ipsum

Aliquam






2006-09-15











velit.

Pede eu elit

Praesent sit amet

Fermentum

Nulla bibendum

Velit et massa

Curabitur

Scelerisque eros

Vel dui. Quisque

Molestie egestas

Mauris fusce

Semper enim et

Arcu vestibulum

Tristique dictum

Magna

Pellentesque



mi, lobortis sed,


ut, enim.



lacus. Proin auctor

rhoncus turpis.

















enim eu urna.

Ut et odio id

sapien pretium

convallis. Sed

vitae mauris.

Donec mauris

tellus, venenatis

eu, laoreet eget,

a l iquam nec,

dolor. Ut eget

quam ac dui

ornare feugiat.

A e n e a n

placerat. Cum

sociis natoque


m a g n i s d i s

p a r t u r i e n t

m o n t e s ,

n a s c e t u r

ridiculus mus.

P h a s e l l u s

faucibus nunc

non felis. Proin

n e q u e . N a m

lacus. Aliquam

vehicula arcu.

Vestibulum ut

urna quis tortor

ultrices lacinia.

Vestibulum at

m i e u o r c i

a l i q u a m

dignissim. Ut

v i v e r r a

adipiscing nibh.

Ut interdum.

Aenean ligula

l i b e r o ,

bibendum eget,

scelerisque et,


amet, sapien.




















amet, sapien.




























condimentum massa.

Lorem Ipsum

Aliquam






2006-09-15











velit.

Pede eu elit

Praesent sit amet

Fermentum

Nulla bibendum

Velit et massa

Curabitur

Scelerisque eros

Vel dui. Quisque

Molestie egestas

Mauris fusce

Semper enim et

Arcu vestibulum

Tristique dictum

Magna

Pellentesque



mi, lobortis sed,


ut, enim.



lacus. Proin auctor

rhoncus turpis.

















enim eu urna.

Ut et odio id

sapien pretium

convallis. Sed

vitae mauris.

Donec mauris

tellus, venenatis

eu, laoreet eget,

a l iquam nec,

dolor. Ut eget

quam ac dui

ornare feugiat.

A e n e a n

placerat. Cum

sociis natoque


m a g n i s d i s

p a r t u r i e n t

m o n t e s ,

n a s c e t u r

ridiculus mus.

P h a s e l l u s

faucibus nunc

non felis. Proin

n e q u e . N a m

lacus. Aliquam

vehicula arcu.

Vestibulum ut

urna quis tortor

ultrices lacinia.

Vestibulum at

m i e u o r c i

a l i q u a m

dignissim. Ut

v i v e r r a

adipiscing nibh.

Ut interdum.

Aenean ligula

l i b e r o ,

bibendum eget,

scelerisque et,


amet, sapien.




















amet, sapien.




























condimentum massa.

Lorem Ipsum 2

Aliquam






2006-09-15

Vestibulum tincidunt

Lorem ipsum dolor sit

amet, consectetuer

adipiscing elit.

Phasellus egestas, libero

vel blandit laoreet,

metus eros dictum est,

in adipiscing nulla dolor

vitae lacus. Sed

accumsan, lectus nec

pharetra convallis, pede

odio ullamcorper elit, sit

amet suscipit nulla

ligula nec lectus. Proin

pharetra felis quis felis.

Maecenas fringilla odio

at erat. Vivamus


porttitor, sem felis

eleifend lacus, at

consectetuer pede enim

eu urna.


amet, consectetuer

adipiscing elit.





vitae lacus. Sed




amet suscipit nulla




at erat.

Quisque tempor erat vel


mi, lobortis sed,


ut, enim.



lacus. Proin auctor

rhoncus turpis.

Vestibulum at mi eu

orci aliquam dignissim.

Ut viverra adipiscing

nibh. Ut interdum.

Aenean ligula libero,

bibendum eget,

scelerisque et, vehicula

sit amet, sapien.

Donec mauris

tellus, venenatis

eu, laoreet eget,

ali nec, dolor.

Ut et odio id

sapien pretium

convallis. Sed

vitae mauris.

Ut eget quam

ac dui ornare

feugiat. Aenean

placerat. Cum

sociis natoque

penatibus et

magnis dis.

Phasellus

faucibus nunc

non felis. Proin

neque. Nam

lacus. Aliquam

vehicula arcu.

Neque iactat

Pede eu elit

Praesent sit ametFermentum

Nulla bibendum

Velit et massa

Curabitur

Scelerisque eros

Vel dui. Quisque

Molestie egestas

Mauris fusce

Semper enim et

Arcu vestibulum

Tristique dictum

Magna

Pellentesque

Mauris leo


Donc mores

Lorem Ipsum 2

Aliquam






2006-09-15



amet, consectetuer

adipiscing elit.





vitae lacus. Sed




amet suscipit nulla




at erat. Vivamus


porttitor, sem felis

eleifend lacus, at

consectetuer pede enim

eu urna.


amet, consectetuer

adipiscing elit.





vitae lacus. Sed




amet suscipit nulla




at erat.

Quisque tempor erat vel


mi, lobortis sed,


ut, enim.



lacus. Proin auctor

rhoncus turpis.

Vestibulum at mi eu

orci aliquam dignissim.

Ut viverra adipiscing

nibh. Ut interdum.

Aenean ligula libero,

bibendum eget,

scelerisque et, vehicula

sit amet, sapien.

Donec mauris

tellus, venenatis

eu, laoreet eget,

ali nec, dolor.

Ut et odio id

sapien pretium

convallis. Sed

vitae mauris.

Ut eget quam

ac dui ornare

feugiat. Aenean

placerat. Cum

sociis natoque

penatibus et

magnis dis.

Phasellus

faucibus nunc

non felis. Proin

neque. Nam

lacus. Aliquam

vehicula arcu.

Neque iactat

Pede eu elit

Praesent sit ametFermentum

Nulla bibendum

Velit et massa

Curabitur

Scelerisque eros

Vel dui. Quisque

Molestie egestas

Mauris fusce

Semper enim et

Arcu vestibulum

Tristique dictum

Magna

Pellentesque

Mauris leo


Donc mores

scrolling clicking link

zooming in zooming in


Thanks for your [email protected]

mailto:[email protected]

wolfgang maehr · wolfgang maehr! 2017 portfolio digital transformation & product creation...

Documents