ROCHE

MEDIKAYNAK ONE PORTAL

USER EXPERIENCE & VISUAL DESIGN

World's leading pharmaceutical company Roche now presents healthcare providers with a medical platform that is endowed with the kind of extensive medical information that every physician needs.

The platform, which enables physicians to access a tremendous amount of information related to their field of interest with ease, can be seen as a milestone and a reference point in terms of medical information.

roche
Online medikaynak.com long-termed APRIL, 2015
Roche

BRIEF SUMMARY

One-stop-shop for Roche brand and scientific content...
Moving to a single affiliate HCP portal will create a platform to accompany

Single reference for content and services
Personalized content according to target profile and brand drivers

USER EXPERIENCE

ENCOMPASSES ALL ASPECTS OF THE END-USER'S INTERACTION WITH THE COMPANY, ITS SERVICES, AND ITS PRODUCTS

DISCOVERY

THE DISCOVERY PHASE OCCURS RIGHT AT THE START OF A PROJECT BEFORE ANY DESIGN OR DEVELOPMENT WORK HAS BEGUN AND INVOLVES FINDING OUT ANY KEY INFORMATION THAT WILL HELP FORM THE BASIS OF THE PROJECT DESIGN STRATEGY, AS WELL AS BEING A KEY POINT OF REFERENCE TO SUPPORT DESIGN DECISIONS ONCE THE PROJECT HAS COMMENCED.

INFORMATION ARCHITECTURE

The project's informational infrastructure came to being upon research and evaluations conducted on the components of Users, Business/Context and Content.

INSIGHTS PERSONAS AWARENESS HABITS
Roche

BUSINESS / CONTEXT

Through collaborating on workshops with our client, we aimed to come up with a roadmap that stuck to the brand's overall strategy, digital awareness and perception, the status of its current projects and long term business goals.

POLITICS RESOURCES

The world's largest biotech company

The global leader in cancer treatments

extraordinary workplace

Doing now what patients need next!

BUSINESS OBJECTIVE SEXISTING PROJECTS

Focus on patients

Access to healthcare

Personalised Healthcare

Great number of product websites!

OFFERS CONSTRAINTS

Free access case studies

20,000 graphics and animations

Medical education

Legal process, Regulation!

CONTENT

It was vital that the content providing module, which was the cornerstone of the project itself, would be successfully passed on to the users via the right structure. By utilising a content map, page template documents were prepared to aid the software firm's content management infrastructure.

Roche
Roche
Roche

SOLUTION & STRATEGY

UPON THE COMPLETION OF THE DISCOVERY PHASE, ALL THE REQUIRED ASSETS ARE READY. A STRATEGY IS THEN DEVISED IN LINE WITH THE BRAND'S DIGITAL POSITIONING THROUGH EXTENSIVE EVALUATION, AND THE PROJECT'S OUTLINES ARE THUS DETERMINED.

INSPIRATION

Physicians, who are the target audience, are always busy and have limited time to spend on the internet.

They prefer to do their research by using global sources and do so via mobile.

Apple's simple and product/feature oriented design approach.

IDEATION

Enabling the brand to stay in touch with its target audience by assuming the role of content provider and guide, and coupling that role with the brand's global prestige and trustworthy image.

Optimized, fast and easy user experience via all mobile and desktop devices.

Simple and content oriented approach.

PRODUCT STRUCTURE

The question as to which platforms and what sort of technology the product should feature was resolved. The model most suitable to ensure the continuity of the platform in terms of content and features was selected.

Roche

STAY ALIVE & ITERATIVE PROCESS

Roche

USER SCENARIOS AND ESTIMATED PREMISES WERE CREATED IN A MANNER BEST SUITED TO THE PRINCIPLES OF EASE-OF-USE AND CONTENT ORIENTED COMMUNICATION. ROADMAPS WERE CREATED TO ENSURE THE LIVIDITY AND THE ROOM-FOR-IMPROVEMENT FACTOR OF THE PRODUCT IN THE LONG RUN.

USER
JOURNEY
TASK
FLOWS
ROADMAP
TIMEPLAN

SKETCHES

The project started taking shape via hand drawn sketches in the first stages.
The sketches provided ample guidance in the following steps of the project.

Roche

PROTOTYPING

Prototypes are models of the system to bring the information architecture to life. Thus enabling users, client and other members of the project team to comment on the architecture.

WIREFRAME

Two types of wireframes were prepared: low and high. While the overall system architecture revolved around low-level wireframes, the high-level ones provided insight into the visual designs that the end-users would be provided with.

LOW FIDELITY WIREFRAME

In order to quickly outline all aspects of the project, low-level wireframes were prepared for the key screens, without design-related concerns.

Roche
Roche
Roche
Roche
Roche

HIGH FIDELITY WIREFRAME

The high-fidelity wireframes were made for all screens, including mobile, and an html-clickable prototype was then prepared. The prototype provided a view into the finalized product and also acted as a guide for visual design steps to come.

Roche
Roche
Roche
Roche

INTERACTION DESIGN

As the structure of the project screens became clear, the user journey and task flows paved the way to planning all the actions and use-cases related to the users.

Roche
  • 1 Users' top 10 most visited pages are tracked by the system and featured on this page.
  • 2 Users' top 10 most visited pages are tracked by the system and featured on this page.
  • 3 The users can bookmark certain content that they would like revisit later, by using the "remind me later" feature. They can view the content that they tagged as such through here and edit it as they like. After a certain tagged content has been revisited, its tag changes to "viewed".
  • 4 The "my favorites" feature is also user-controlled. The user can access and edit all their favorites from here.
Roche
  • 1 If there is a live stream, the info and redirection features displayed. In other cases, the soonest event and its details are displayed.
  • 2 If there is more than one event in a month, the soonest available ones can be viewed via a slider.
  • 3 If there is a live feed, a "watch now" button is displayed. In other cases, the button reads "join in".
  • 4 If there is a soonest available event, a countdown is also displayed.

MOTION DESIGN

The motion techniques and animations were planned in line with the wireframe screens. The animations were kept to a certain standard that would not affect the user's attention, in accordance with the initial idea of providing a fast and easy user experience.

Roche

A timer that displays the amount of time that the user spent on the site would add to the overall vital look.

We aim to create awareness towards the idea that the pages and the modules are related to the concept of time.

The "My Time" application presents the users with the idea that they can navigate the site based on time available.

Roche

Each section contains a circular indicator and as the page is scrolled down, the indicator follows the line along with the scrolling movement, and would flip over the headline of the content displayed in the safe area.

VISUAL DESIGN

"GREAT DESIGN MAKES THINGS BE GOOD. NOT JUST LOOK GOOD."

BRANDING

A typographical language is formed by paying close attention to the digital focus of the brand and this was done so in line with the theme and colours of their logo and their concept of simplicity.

PRIMARY COLOURS & TYPEOGRAPHY

A color palette in line with the primary brand colors and an easy-to-read font was selected and therefore the palette and typographical standards of the projects were laid out.

Roche

USER INTERFACE

The visual design of the interfaces that make-up the product structure are done in light of the digital guides, which are outlined during the globally accepted branding and user experience processes, all of which are directly derived from the prototypes.

WEB DESIGN

The website, which was the main communication hub of the brand was designed in accordance with the brand's simple and clean content-first approach, while keeping up with the latest design trends.

Roche
Roche
Roche

We made sure that the users' mobile experience of the site lived up to the desktop performance.
The existing design concept was the guideline in preparing the most suitable interfaces tailored to fit the needs of different platforms, while bearing in mind the user habits of each one.

Roche

When the visual design phase for a screen is complete, it is printed out and reviewed on the board.
Upon the review stage, its suitability with the overall strategy is thoroughly checked and necessary updates are made.

Roche

USER ACTIVITY TIMELINE

Roche
Roche

The easy-to-use, simple and swift approach was employed in every aspect of the visual design process.
The platform was prepared to work in full harmony with each browser type, providing the same user experience each time.

Roche
Roche
Roche
Roche

The "My Time" and "Search" modules, which are essential to the project were specifically designed to have a modular structure. When the users take the actions necessary to use these modules, they launch in full screen and enable the users to fully experience the specially designed layout and architecture in full focus.

Roche

All the screens were designed in alignment with the visual concept, staying true to the UX which was created in accordance with mobile habits.

Roche

The Medikaynak project, the UX and visual design work of which was undertaken by us, was brought to life in a collaborative effort including the brand and other third parties.