Long Case study: designing Diplomatica.eu

Designing a www.diplomatica.eu platform for stories related to women empowerment.

I can confidently say that Tadas is good at grasping not solely the concept itself of the wanted website of his client but also suggests original and lively solutions to transform one’s ideas into the real product.

I highly recommend working with Tadas if you want your website to be not one of million others but one in a million with a soul.

Gintarė Janulaitytė
Founder
DIPLOMATICA.EU

Problem definition

The client asked me to create a personal platform where she would share her and others’ stories on women empowerment, women diplomacy and similar topics.

Together with a client we raised those goals:

1. Website should have a feel of professional platform rather than a personal blog.

2.Website should feel stylish, official, diplomatic and most importantly — feminine.

3.Design reader-focused platform where reading stories would be pleasant, easy and not distractive.

4.Make it easy to navigate the platform on various devices and screens.

5.Give a sense of timelessness for the platform.

Audience

Audience would consist mostly from young professionals more likely from politics background, but not necessarily.

Team/Role

It was me and a developer. My role included:

• Project management.
• Research on digital blogging, publishing and story telling design.
• Visual identity.
• Digital editorial design.
• UX
• Platform design adaptation for various screens.

What I did

1. Analysis

Like in most of the cases my work I started with studying client’s industry and the best practices user experience solutions to be aware what’s come before me.

I almost got a vertigo scrolling through online magazines, news outlets, blogs. Only few of them were easy to navigate and read… Most of the websites were overwhelmed with content, had bad typography which was distracting from the content and had a messy user journey through the pages.

I realised that I should aim for clean and clear website with a magazine feel with timeless content rather than streamy outlet where stories are lost in time.

2. Paper sketching.

I have to confess that I did only few initial rough alignments of the elements on paper and moved straight to designing a prototype in Sketch.

3. Designing a prototype with a desktop-first in mind.

Being familiar with Luke’s Mobile-First philosophy I tend to think that it’s not accurate to assume that mobile is the primary experience nowadays. Users switch devices.

Since the client intended to publish good reads for young professionals’ audience, I assumed that committed readers more likely will choose desktop or tablet device to read the stories as these have bigger screens and provide more comfort and ease for focused reading. That’s how I started with a desktop version first. It’s also easier to keep consistency over different devices when I have maximum elements designed first.

Version 01

It was supposed to be a rough mockup in black and white without branding or typography but as I was trying to put all the elements together I got carried away by the visual design as well.

The first mockup looked like average blog site. With a little tweaking it could pass as a good enough site. But I was aiming for more.

Version 02

I changed it to card layout considering easy transition trough various devices but it still felt outdated, too boring and not readable enough for me. It looked more unique though.

Version 03

I though of featuring stories but couldn’t come up with nice layout.

Version 04

Finally I made nice grid and upon that I build my new layout which was spacious, dynamic and not too crowded. I worked out a typography to have more contrast and bigger font sizes. A lot of elements were still missing but I was on a good way.

3. Carving the logotype.

The primary use of the logotype was digital. Mostly used for this website it needed to work well in small size for top menu. Personality of it had to be light and elegant, also “feminine” according to the client.

After few attempts and iterations I choose Trajan font, because I looked classic but fresh, and reflected diplomatic aesthetics. Nice tweak with last “A” letter gave a “feminine” touch. The only thing I am still not sure about is kerning.

5. Working on the typography and UX

Good user experience starts with a good readability, so typography played crucial part in this project.

To my understanding bigger typography provides better experience when done well. So I went bigger, minimal and clear.

Body text

I started with body text as it is s the key component in communicating the story, and it’s probably the most important element on a website. I chose Leitura News as the main typeface for body text because it works well in bigger size and scales well.

Text styles

I also provided client with several text styles to chose from when guiding her readers through the stories. To be honest that was very difficult part to handle because client will be having control over that and it will be different depending on the content. I had to forethink all combinations and set rules. I am not sure if I made it right.

Headlines

Important task was to catch reader attention on the headlines at the home page. I chose Domaine font for headlines as it gives quite distinctive look and works nicely with overall style.

But not only typography matters for good UX

Navigation

I chose horizontal navigation leaving all the categories visible all the time. It’s classic, works almost always and has a great usability. But it takes space in height, so I made it to go smaller when scrolled also placing secondary links to submenu.

Details

I guess those are not so surprising know-hows to many but yet they are crucial small elements helping readers to read:

• Estimated amount of time needed to read the story;
• Subtile gamified reading progress bar;
• Always visible “To the top” button.

Search

To make search useful I designed full screen search based on tags. As whole existing tags are listed it gives user idea what can be found. One can type words to combine tags or simply click on them.

6. Working on the mobile and tablet versions.

After discussing with developer I chose to make two breaking points. Transferring the concept from already created desktop version was fairly easy. Same principles of design remained in mobile: bigger type faces, more space, minimal and clear design guiding through the stories, not distracting.

Mobile version required additional navigation and other rethinking. However, having worked on mobile apps before made me very confident with designing mobile website version.

7. Implementing design into real website with the developer.

While designing in Sketch I was mostly working with static images. That required a lot of imagination. So only when I started bringing everything to life with a developer I realised how many details and especially interactions are missing. My task was also make all visual elements consistent and logic.

I designed the style reference to help developer implement the interactions like hovers. Other interactions I had to explain or work out together with developer live.

At this stage I regretted not using live prototyping tools that I used in my other projects in advance because as one could expect after seeing the live page client had some feedback. Some changes needed to be made. Some of them were pretty big so that caused a lot of problems.

8. Finalising

During the final development process together with a client I focused on details. The end is always harder, because one might expect to finish very soon but it takes long to carefully overlook everything.

On other hand there is hardly ever an end as no site(even well designed) can stay stagnant forever.

Retrospective

Did client benefit from work?

It can only be told in the future. Even though I start to think that she should have started the other way around: gathering an audience first with MVP tools.

How much time I’ve spent?

Way toooooo much. Over 3 months with iterations, a short brakes, redesigns and development.

Can I learn from this work?

Few things I should have remembered:

• More sketching and prototyping, before designing detailed mockups!! The process of design is always messy but this would have saved me tons of time.
• Use of live prototyping; tools like Invision or Marvel might look like time consuming but it’s really worth especially presenting your prototype to the clients and managing the project workflow.
• Developer is my best friend; A designer should understand the principles of coding and a developer should have an idea about nature of design.

Few things on project management:

• Chose your clients. Don’t just do work for money; it really makes a difference to work on meaningful projects with clients who values effort and good design like in this case.
• Estimate the scope of work and payment accurately from the beginning; we all know it takes longer than we think. I was not aware it would take me that much from the beginning.

Would I do the same work again?

Totally. The lessons are learned and the experience is gained for this type of work. I strongly believe that specialising is a key to being master at something.

Maybe my result is not correct, but I share my process of solving the task. If you have any questions about it feel free to drop me a line tuchkaus@gmail.com