Innovative Windows 10 App for Business: Less Hustle for More Gain

Client

Floor laying products manufacturer based in Germany

Role

UX Designer, UI Designer, UWP Programmer, WPF Programmer

Technology

UWP (Windows 10) WPF (Windows 7)

Developed in

2017 - Now

This was my very first project after I got my first job as UX Developer. As this Business App evolved, so did my skills. We started small with 2 main features: customer and products. Now we have appointment manager, lead capturing tools, and even a dedicated dashboard to have overview of the teams. 

Problems & Challenges

Huge products and product systems catalog

Too much time wasted preparing for client presentations

Workflow digitalization

Complex calculation

Outdated system that nobody wants to use

UX Process

onboarding orange

A. Onboarding

– Vision, Missions, Goals
– Personas
– Main Functions
– Technical Constrains

B. UI/UX Design

– User Stories
– User Flows
– Information Architecture
– Screen Design

C. Programming

– UWP (Client)
– C#, SQL, PHP, XML
– Server
– Test Cases (Manual)
– UI Test Cases (Auto)

D. Rollout

– Optimization
– Handware Troubleshooting
– Further Updates

Solution

1. Understanding

During my first few weeks as UX Developer I spent my time understanding every concept and data that was previously created and gathered by my co-workers during client meetings that were held weeks or a month or two before my first day.  

At first it was overwhelming since it’s literally my first UX job. But with help and dedication I managed to process every little thing possible. After this phase I started with the UX design phase. 

Persona

A team at work and the clients already created Personas which helped me a lot as I started doing the UX work. I always have them in mind whenever I try to create a new concept or function for or in the app.

Main Functions

The app is separated in 6 main sections and conceptualized and programmed in the following order: customer or business, products, media library, lead, appointment, and controlling.

Content is under development

Content is under development

Content is under development

Content is under development

Content is under development

Content is under development

2. UX Design

Since the app offers numerous functions and sections, I have to make sure every thing is structured, easy to discover, and can be found where it’s expected to be,  I also need to make sure the data comes from the right source and is actually available

To help me achieve these goals, I created several UX deliverables such as sitemap, information architecture, and user flow

Sitemap & Information Architecture

I started small with sitemap where I listed the main sections of the apps then evolved it to information architecture where I can see each data in that section, where it comes from (CRM, Product / Media Database) and which users (technical adviser, marketing manager, etc.) will mostly use it. Each section has one information architecture

3. UI Design

Since it is a Windows 10 App. We are trying to apply fluent design principles to the app. Fluent design is a design system developed by Microsoft. We also try to design the most user-friendly interface for our target users. 

Since all our target users mainly work with Windows 10 tablet with touch capability. We try to scale the size of each element so it can still be clicked either my mouse or tapped with a finger tip

4. Programming

UWP is programmed using C#, the interface is coded using XAML. We are using MVVM pattern to separate the GUI and the back end logic. We are using SQLite technology to store the data, thus we need to write SQL Query to process the data that is going to be displayed to the users in the app.  

I also created a separate download-manager using WPF technology to compliment the main UWP app. At some point after the first roll out, I developed a touch-screen app for Windows 7 platform for the client to promote their new product in a construction exhibition in Munich.

C#

Back-end and business logic. Sometimes also to manipulate XAML.

SQL Query

Creating, updating, reading, and deleting entries from the database

XAML

Markup language to layout and style the front end

JSON

Serializing and deserializing objects

5. Rollout

The business app is a big success. The app is now currently in various countries and languages available such as Netherlands, Germany, Switzerland and Austria. 

 

We improve the app continuously and listen to our users feedback. It can only get better from there. 

Graphic: Personal | Wireframes: Personal | GUI: Personal | Illustration: Undraw | Photos: Unsplash | Mockups: Behance