Gine App

To view this protected post, enter the provided password below:

Meron

Meron is a franchise that sells speciality coffee services. The idea behind their business is to capture the present moment, and the one thing that should be the greatest joy to people. The joy of being.

Online presence

We build the new website for Meron by keeping in mind mobile device performance while giving its brand the online presence it deserves. A youthful and fun play using the brand’s bold color combination of black and bright yellow.
The challenge was to speak to its audience by telling its story and to reach new audience at the same time.

Happy Cup Animation


For MERON a set of SVG Animations were created to help emphasize the brand’s presence. The icons add dynamism to the website without affecting performance. To achieve this I used the anime.js, a lightweight JavaScript animation library which works with CSS properties, SVG and DOM attributes and JavaScript Objects. The icons were drawn using an 8px grid in Sketch App.


Mobile device

Meron is still in development, but below there are some screens showcasing the work so far. Looking forward to updating this section with complete flows and graphics.

Desktop

The components created “mobile first” extended nicely on larger screens, thus keeping it consistent and easy to maintain.

Telfort

Telfort is a Telecom business in The Netherlands providing reliable services at affordable prices. They there for everyone, especially for people who want quality, but do not want to spend too much money on it.

Kassabon

Description: “Kassabon” (the shopping cart summary) is an important component in the checkout flow. It’s the only section present on all 3 steps of the checkout and it helps the user keep track of their products by offering feedback during configuration and showing total costs, as well as extra information.

Goal: increase “CombiVoordeel” deals and increase channel share.

Issue: The lack of an overview and the display of too much content makes the user not complete their task of finishing the checkout process and thus prefer to call support or not complete the order at all. Main reward was the “CombiVoordeel” benefits which were not offering enough information. Previous user interviews were showing that the users didn’t completely understood what “Combivoordeel” is and needed more information to make the purchase.

Hypothesys: By offering a better overview and extra explanatory information when needed, there will be an uplift in “CombiVoordeel” deals, less overall checkout drops and less calls to customer support.

Before

After

Solution: Group products in the kassabon as follows: product / extras / combivoordeel benefit / monthly costs ( before and after promotion ) / one time costs such as activation or setup. Each item becomes a collapsible element that shows extra explanatory information regarding that specific cost. Transparency in expences is a very important value that the company shares with the clients.

All the information provided here has been carefully selected based on feedback from customer support, user interviews and A/B testing. The user is offered all the information needed to make the purchase with no surprise costs. The collapsible elements help displaying information on different levels thus not overwhelming the user with information but still make it accesible if needed.

Beside the functionality the online digital sales team considered feedback from customer support in an effort to provide the answers to the most concerning questions a user might have during configuration.

A/B testing:We tested this solution and the results where showing more orders being made as well as an uplift in “CombiVoordeel” deals, which was one of the main goals that supported this redesign.
Future user interviews showed that the solution worked and therefore was extended to other flows. We even implemented a solution with collapsible elements to other sections of the website in order to better handle the content, especially on a mobile device.

Product/s Page

The appropriate solution, tested and data confirmed, is to show the products by comparison. Telfort’s persona is very interested in getting the best quality at an affordable price. The products are therefore displayed as a comparison table making accessible at one glance all the benefits. At this stage the user is still orientating and it was interested to find out from user interviews that visitors tend to scroll when looking for information and how important it is to have the right content at the right section. For the returning visitors quick actions are provided so they can complete the checkout faster.

For the redesign we kept in mind that certain sections should be re-used across the website, so we designed them as components that can later be personalized rather than customized. This was very usefull for content managers and it also improved consistency across the pages in the shop.

Mobile Optimization

The challenge on mobile devices was to find a better solution for displaying a lot of content. Focus was on reducing the scrolling on checkout pages and make the explanatory information accessible only when needed. To achieve this we designed and tested several improvements as follows:

  1. Collapsible elements
  2. Read more links
  3. Scroll to next step once a task/configuration is completed
  4. Improve content based on findings from research, user interviews and feedback from customers

Design System

Design System

Mediatic is a web agency based in Cluj-Napoca. They craft tailored websites, visual identities and offer digital solutions through effective design.

With a background of over 10 years of working in the digital business, we designed and built a template to be used for our clients as a set of deliverables, containing rules, style guides and utilities. More than just a Sketch library or Zeplin links it holds together all the components needed to start development, maintain and evolve any digital product.

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems are a method to translate a consistent experience and visual language across a product when working on different touch-points.” – UX Planet.

Another aspect of a design system is sharing and accepting a way of designing and developing digital, by making a product scalable and consistent. We consider consistency to be a brand value that we teach our clients to embrace it.

Below a few screens from the developed Design System.

Typography

The typography is directly implemented when creating the design system, thus giving the first applied specifications. It also can be viewed as the first preview in its most basic form: typography and spacing.

Components

All the content needs a place to be displayed and components offer the layout, the styling and the rules to do so, in such a manner that it’s consistent across devices and platforms. This can also be extended outside the digital world such as print.

The Design System includes prototypes to make sure the functionality is correctly implemented.

Styleguide

Jobus

Orientation pages

Jobus is where both companies and candidates have the opportunity to create and personalize a profile as proof of their value & strengths.

Company

Custom Company Profile: Jobus offers an opportunity to create an image that you talk about and to convince potential employees that are ideal for their career development.


Custom jobs adds Jobus offers an opportunity to create an image that talks about your company and to convince potential employees that you are ideal for their career development.

Choosing a custom design will increase the visibility of your profile and attract the best candidates. Adding personalization is one unique offer to the market for jobs with the aim to make each campaign a success recruiting guaranteed.

Candidate

Create CV, Export PDF CV,Company Ratings: Each part from your background is relevant to your future employer. Help him to meet you, creating a profile and a full CV, to highlight your experience. You can post a review of the company in which you work, and contribute to building a community based on transparency and professionalism.

CinemaRX

Possessing a vast database of movies, actors, directors and others involved in the film world, CinemaRX offers daily fresh information from the world of film: news, trailers, box office, reviews and previews, editorials, special articles tops and much more.

Online presence

The client wanted an updated version of their old logo, one that would be more appealing to the user. The logo was just the starting point in creating their online presence, new layouts, icons, improved UI/UX were all build from scratch.


Challenge of this project was to find ways to display a lot of content, thus we worked a lot on formatting the typography. We choose a condensed font that didn’t affect legibility.

Modular sections

In order to have a consistent layout we separated the content in sections and design each of them much as a puzzle, in order to mix and match them across the platform.