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.
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
ENCOMPASSES ALL ASPECTS OF THE END-USER'S INTERACTION WITH THE COMPANY, ITS SERVICES, AND ITS PRODUCTS
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.
The project's informational infrastructure came to being upon research and evaluations conducted on the components of Users, Business/Context and Content.
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.
The world's largest biotech company
The global leader in cancer treatments
extraordinary workplaceDoing now what patients need next!
BUSINESS OBJECTIVE SEXISTING PROJECTS
Focus on patients
Access to healthcare
Personalised HealthcareGreat number of product websites!
Free access case studies
20,000 graphics and animations
Medical educationLegal process, Regulation!
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.
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.
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.
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.
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.
STAY ALIVE & ITERATIVE PROCESS
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
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.
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.
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.
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.
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.
- 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.
- 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.
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.
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.
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.
"GREAT DESIGN MAKES THINGS BE GOOD. NOT JUST LOOK GOOD."
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.
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.
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.
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.
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.
USER ACTIVITY TIMELINE
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.
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.
All the screens were designed in alignment with the visual concept, staying true to the UX which was created in accordance with mobile habits.
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.