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.
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
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.
The components created “mobile first” extended nicely on larger screens, thus keeping it consistent and easy to maintain.
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.
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.
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.
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.
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:
- Collapsible elements
- Read more links
- Scroll to next step once a task/configuration is completed
- Improve content based on findings from research, user interviews and feedback from customers
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.
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.
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.
Gamification applies typical elements of game playing to other areas of activity to encourage engagement with the product.
Hypothesis was that due to the lack of engagement the app wasn’t used by employees on a larger scale. The app had some users on a daily basis, but overall the usage has dropped in the last quarter. In order to find out what was keeping the users away from the app we organized user interviews.
After looking at the data one of the issues that surfaced was the lack of engagement, therefore we proposed “gamification” as a solution. Based on events triggered in the app we came up with badges.
Certain badges have 3 levels. Those are easy to get at level 1 but get harder to obtain for higher levels. Badges are ways to reward the user for using the application and keep them engaged.