Everything in one place with simple UI

Project made for our friends from Germany. This website and webapp allows you to search and browse media providers in your area in one place. Type your address, choose category and let the magic begin! This is a brand new idea on Germany market. So far you had to enter and order single media on the website of its provider, now you can order all in one place. 

Why it needs to have its own case study?

(If you don’t want to read it – click here and go to the summary of the section)

Well. This is a great, big project where a lot of people had impact during developing process. I was working in close cooperation with UX team, for which I was a consultant and DEV team during building a webstie. I was the one who was presenting design ideas to product owners and then to stakeholders.

Also we worked in Agile process on YouTrack board (kind of Jira). In two weeks sprints and daily meetings. Also the process was intresting because of differences in language. Not everyone (like me) spoke in German language, not all of them spoke in English language. So it was really challanging to always be on the same page during the whole process.

What is it all about?

Imagine the situation that you are building a new house or you are developer and building whole estate and you have to check what providers are for your area (in Germany there is only one for example electricity provider in specific area, so it is not always obvious which one is for your address or zip code). Now you can do it in one place. Just type address and see what gas, electricity, water or media like phone / internet provider is for you. Go further, register and sign agreement with them through out the modern and light, minimalistic, user friendly dashboard.

You can easily check your status, change requirements, everything in one place.

First steps

Everything started with a lot of sessions on which we wanted to understand the idea, the process and main functionality of the iHAP. How the life looks in German. What is administration process while building house, signing agreements with providers etc. and then, armed with this knowledge, we could start putting our first steps into the projects.

Whole design process started with the Lo-Fi Mockups and prototyping tools, to save time and money, and see if the explaining sessions before was successful. On this phase we could establish connections between the functionalities. Discuss buttons, links, order of the sections and compare whole IA with the ideas before. Will we meet business requirements? Will the user receive what is truly important in a simple and friendly way?

Show time!

After few sessions with product owners, developers and stakeholder we finally could start the Hi-Fi Design. That was the second phase for me. So we choose color pallete accoridng to brandbook and add some new one, complementary with the main color.

I created a design system for developers so they don’t have to wait for the firsts whole designs but they can start styling main information like colors, fonts, roundness of elements, headers, paragraps, spacing, buttons, form fields etc. Whole project was made with 12 columns system and 8px grid.

Looks awesome? Let’s go for dashboard!

Happily designs which I provided occurs to be great according to product owner feedback and stakeholders comments. That’s why (having simple design system – or maybe better word is Styleguide – and main Hi-Fi screens) we decided to also design the dashboard and whole system inside, after register. Main view, search result, step forms for choosing data provider and some other screens came under my pen.

We decided to keep same style, same colors, same fonts, so the user won’t be moved to the whole new world. However the margins for 12 columns systems have changed. We needed to make it more wide. reorganize data on first screen.

Let’s present it!

After this I created a clickable mockup and animated mp4 for stakeholders and whole team to avoid any mistakes or misunderstandings. To present which buttons links where. How looks hover, active or focused state. Design was proven with some WCAG requirements like contrast, sizes etc.

That’s it!

After this came last phase. The test and consulting phase with developers. If this what we see answers our needs, designs and business goals. Few sessions of testing, changing, creating new tasks and voila! We have it! Cheers!

Summary!

What may be interesting for you:

Scope of work: UI/UX Design, UX consulting, presentations to stakeholders, tests.
Softwares: Adobe XD, Adobe Ilustrator, YouTrack.
Work system: Sprints, task oriented, agile.

I’m very happy to be the part of this project because it was multicultural, engaging, multitasking project that requires UX and UI process and also contains website and dashboard.

Want to see more projects?

See all projects