Perfectly Translate Web Designs to Mobile App Designs — Medium.com: Case Study
Learn how to perfectly translate your website designs to mobile app designs and vice versa from a case study of medium.com.
Web services with a corresponding mobile app and mobile apps with a corresponding website have been becoming exceedingly common. The biggest apps: Twitter, Facebook, YouTube, Instagram, etc. — they all exist on both platforms: web as well as mobile (native apps). Even apps like WhatsApp and Shazam have corresponding websites just to provide a link to download the mobile app.
Web and app design are fundamentally two sides of the same coin but have some very crucial differences in practice. Consistency in design across the 2 platforms is essential for producing an air-tight synergic user experience as well as customer experience. At the same time, it is also very important to respect the two platforms’ uniquely distinguishable design requirements and conventions.
In this article, I am going to try to formulate some directives to abide by while attempting to translate web design to app design effectively, based on a case study of the translation of design from Medium’s website to the mobile apps.
Note: it is important to note that this article talks about the translation of website design to mobile app design, and NOT desktop website design to mobile website design.
Consistent Visual Design and Accent Colors — Use Design Systems
The foundation for consistent experience design can be laid with consistent visual design. Visual design involves the conscious as well as subconscious parts of the brain. Engaging and exploiting the power of the subconscious is the hardest and most important part of translating designs from one platform to another.
In Medium, both the platforms — mobile app as well as web — have a colour schematic of white (or black if you’re fancy) and green. This high-contrast consistent visual schematic across multiple platforms produces a sense of underlying commonality in function, running through the entire website as well as the app.
The white (and black in night mode) colour serves as the overarching (under-arching, rather) background colour of the app — the bottommost layer of the app, while the green colour serves as the accent colour. Accent colours have more to do with the subconscious part of the brain than the conscious. Users subconsciously recognise the accent colours in experiences and start to expect it at every turn. It is only fitting that the same accent colour schematic is used across all platforms of the same service.
The white (and black in night mode) colour serves as the overarching background colour of the app — the bottom-most layer of the app, while the green colour serves as the accent colour. Accent colours have more to do with the subconscious part of the brain than the conscious. Users subconsciously recognise the accent colours in experiences and start to expect it at every turn. It is only fitting that the same accent colour schematic is used across all platforms of the same service.
Screenshots of the notification tab and Vikas Raj Yadav’s account view on the iOS phone app have been included above, and screenshots of the notification table view and Sergio Rodríguez Sanz’s account view on the desktop website have been included below.
Observe the two screenshots shown above. The layout of the interfaces are very visibly different, but the common look and feel is undeniably existent. This is made possible by consistent visual design and visual elements across platforms.
The most efficient way to design and develop a visually consistent multi-platform service is by utilising Design Systems. A design system is a series of components that can be reused in different combinations. According to Inès Serizer, it is not only a classification of components but a whole process that is built and maintained by a company to help them develop superior user experiences and strengthen their brand.
While the presentation and the application of design system elements in the interface depend on the context and the platform, the design system itself should be consistent across platforms. You can read more about design systems here.
Design for a service, not just a platform.
Use the Same Contrasts to Indicate the Same Hierarchies
Hierarchies are important because they establish what goes where and how important what is in the interface. It helps users make sense of the interface and helps them prioritise and guide their attention.
Hierarchies lie in the part of UX design that deals with the subconscious mind. Users don’t explicitly recognise hierarchies and are guided through hierarchies without them realising. This is why it is so important to get hierarchies right — intuitive, clear and consistent. Controlling the subconscious mind requires a deep understanding of how the users might think and react, and designers can not afford to get this wrong unless they are willing to face bad reviews and low conversion rates.
When it comes to dealing with the subconscious part of the users’ mind, it is obvious that the same principles can be and should be applied across multiple platforms. This was the same logic we applied with accent colours being the same on multiple platforms.
Contrasts in design indicate hierarchies. Contrasts can be of many types: form, weight, space, texture, scale, value, colour, etc — based on the context.
This principle has been applied very aptly by the designers of Medium.com while designing the story cards on the home page: the typefaces and the typographic proportions are exactly the same in the website as well as the mobile app. The designs of the cards representing each story have exactly the same typographical hierarchies — with the same variations of typeface, style and font size.
The contrast between the card’s title typographic style, colour and point size and the description’s and the author’s typographic style, colour and point size is exactly the same in both of these cases.
In this manner, the same relative contrasts (indicators of hierarchy) help produce a familiar experience in that it complies with the users’ existent mental models and also exhibit visual resemblance with each other. This is in concert with one of the most important heuristics of usability design: recognition rather than recall.
This is also visible in the notification cards in the website as well as the app:
The contrast of text colour is exactly the same in both cases.
The presentation of these cards in tables is context based and platform-specific. It is different in the app and on the website:
Even the unread (“new”) notification indicator is the same on both platforms:
This is the epitome of translations from websites to mobile apps. Each single notification card — the cells — the fundamental units of the table is very similar on both the platforms (web and app), but the format of presentation (the table) of the cells in a table is different and suited for the platform. It occupies an entire tab in the top-level navigation in the iOS mobile app while the web designer has made the notifications screen a sort of drop-down or hover screen that makes it look like it is presenting secondary information.
From this example, we can see how Medium has managed to reproduce the look & feel of the website in the app while also making context-based platform-specific decisions.
Consider your designs as an amalgamation of problems rather than of solutions
The process of designing an experience involves multiple steps of taking design decisions regarding how to solve a micro-problem. Each design decision should be backed by a solid rationale as to how to solve the specific micro-problem. These solutions put together define the entire design of your service. These solutions are designs. They are context-based, and therefore your design solution to the same micro-problem will be different on different platforms, depending on the context and the nature of the platform and the problem.
To explain this point, I will use the example of the placement of the “Upgrade” (‘Become a Member’) Call To Action button in the app and the website, and how they differ. For clarity, the Upgrade button leads the users to a page which asks them to subscribe to the premium Medium stories for $5/year.
The micro-problem here is the same in both the platforms: placing the Upgrade CTA button in such a position that it is very noticeable, but is not the first thing the user notices so that the user can get a flavour of the service before being asked to pay money, which may annoy the user.
The design solution to this problem as we see in the website is placing the outlined button above the fold (noticeable), but keeping it black and white so as to not produce any striking visual contrast (not the first thing the user notices).
The design solution to this problem in the iOS mobile app is by placing the button directly in the last tab of the app (not the first thing the user notices), but making the “Become a Member” text green in colour so as to visually draw the user’s attention (noticeable). In the android app, this button is included directly under the hamburger menu list.
As you can see here, the solutions on all platforms are different and depend on the nature of the platforms and the context of the problem. If the mobile app were to use the same method of implementing this concept — an above the fold boxed black and white button on the first page of the app — then it would have the opposite effect — it would stand out rather than hiding in plain sight. Contrast draws attention, and since everything is so close together in a mobile app interface, if an interface element was designed so differently from the rest of the interface then that would be the first thing the user notices rather than the last.
If the designer refers solely to the website solution to this problem while designing the mobile app, he will end up designing an interface that doesn’t solve his problem. Thus, the designer should refer to the universal design problem rather than the particular platform-specific design solution (website solution), and take a conscious decision as to how to solve this problem in the context of a mobile app.
This can also be worded as treat designs as an amalgamation of universal concepts rather than of specific artifacts. Design is context-based, always.
Account for all states of interactions
Different platforms permit different states of interactions, and you should adapt your experiences to respond to those states. For example, the user can hover and click while using a desktop but can not do that on a mobile device. A user taps on a mobile device. It is important for you as a designer to design for these platform-specific forms of interaction.
This point has been manifested by the designers of Medium.com, but the best manifestation of this can be seen on Twitter’s website.
It is very evident that the desktop website of Twitter has been modelled after the mobile app. What sets it apart and provides for a richer user experience is how it has adapted to the different states of interaction that are unique to desktop interactions — namely, the hover state.
The website’s central pane is exactly like the phone app. The website designers have, however, attempted to make the website design more suited for the web platform. They did not just recreate the mobile app:
The resemblance can not be missed, but neither can the differences. The website has got an extended left and right pane. The left pane substitutes the tab bar in presenting the navigation menu, while the right pane has relevant suggestions and information. This produces a more web-like experience, where emphasis laid on presenting an exhaustive glimpse of content to users so that they can judge the scope and extent of the website all at once. Apps, on the other hand, do not present too much information at once because they are functionality-centric and provide the user only a few relevant functionalities at any given point of time in the experience. They do not and are not expected to present a myriad of content and information for the user as this may dilute the users’ attention and the app’s focus.
Integration with the underlying OS
Integrating your service with the OS it’s running on is an important point to keep in mind while translating designs from one platform to another.
The Medium mobile apps have properly integrated themselves with the underlying Operating Systems (iOS and Android), while still maintaining the individuality and recognisability of the Medium website.
The designers have achieved this in the iOS app by making use of iOS elements like the UISwitch and the iOS search glyph. Medium has also adapted the same UX principles (ex: spatial, visual consistency and fluidity) that run all across iOS (read more about that here).
Structurally, in keeping with the OS conventions, the iOS app has resorted to a tab-bar as the highest level of navigation while the Android app has resorted to a hamburger menu to display the highest-level options, thus making them feel like a secondary list rather than a primary list. The website’s top-level of navigation is presented as a drop-down list.
While succumbing to native OS conventions, the Medium apps have still managed to retain the aesthetic and look & feel from the website. The typefaces and the typographic proportions are exactly the same in the website as well as the iOS app, as we saw above. The designs of the cards representing each story have exactly the same typographical hierarchies — with the same variations of typeface, style and font size.
The difference between the cards in iOS and Android is illustrated below:
Notice how similar these two cards appear in terms of contrasts and layout, but also notice the different orientations of the “more” glyphs on the right ends of both the cards — the vertical orientation in Android and horizontal in iOS. This distinction is made deliberately in keeping with the underlying OS conventions. The menus that are revealed upon tapping on these “more” buttons also adhere to OS conventions:
The point is: use the same elements across platforms, the same contrasts to indicate hierarchies, but make accommodations for the OS to suit the user’s comfort zone, as we see in this card and menu example.
By adhering to OS conventions while designing the mobile apps, the designer produces an ideal touch of familiarity throughout the entire experience. Many designers make the mistake of making their interfaces look unstriking or boring by trying to conform to OS conventions more than is necessary. Some designers make the mistake of not conforming to OS conventions in an attempt to make their interface stand out as unique. Conforming to OS conventions is essential for usability reasons. Consistent design is intuitive design, and so if users find familiar interaction design in your app that is consistent with the underlying OS, the experience is more intuitive. This is an extremely important pillar of UX design.
That said, it is also important for your experience to stand out and have its own striking voice and memorable experience, in such a manner that the app and website feel like extensions of each other so as to provide a more complete user experience and for engagement reasons. You should strive to make your interface unique and individualistic with only a dash of conventionality.
Design is context-specific, always.
Process of Selection — Translating Footers
Like with every other properly designed website, Medium.com has got a footer. The footer contains 8 links:
Translating footer content from websites to apps is quite tricky. It is a multi-step process involving selection, categorization and translation.
Let us see how Medium achieved this in their mobile app.
Privacy, Terms of Use, and Help are included in the same section at the bottom of the “You” tab of the app — the options tab. These are essential sections for legal (“Terms of Service”) and usability reasons (“Help”). The rest of the links: Status, Writers, Blog, Careers and About didn’t make it into the mobile app. This is an important and deliberate decision and it is an example of an important point to remember while translating designs across platforms — not everything has to to be translated. Some things can be filtered if they don’t suit the nature or context of the platform.
When The Medium Corporation set out to architect the mobile app, they had a clear goal in mind — an app that extends the user’s experience and makes it convenient for them to read stories while on the go or in situations where a handheld device is more accessible. It is understood that anyone who downloads the app already knows a little bit about what Medium is, either from the website or from the App Store summary, or will at least figure it out from the first few introductory screens of the App. Keeping this in mind, the designers decided to omit the “About” link.
The designers’ decision to omit the links for Status, Writers, Blog, and Careers is a lot more deep-rooted than one would assume. This has to do with our fundamental understanding of why apps exist and why websites exist and how they fundamentally differ. Mobile apps exist to make it easier and more convenient to perform specific functionalities. Websites exist to provide information to users, along with some relevant functionalities. Apps are required to be more functionality-centric while websites are more content-centric.
In keeping with this essential principle, the designers of the Medium app decided not to translate the links for Status, Writers, Blog, and Careers, because these links purely convey information to readers, which most users are not interested in. Further, the Medium app is meant to be an extension of the Medium website, not a replacement. Users who are inclined to read about these topics can log onto the website to do so. Most users are not as interested in reading about these, which is why the designers chose to reduce visual clutter and not include these links in the app.
Websites and mobile are only a part of the wide spectrum of platforms that exist in today’s ecosystems. Though this review has focussed only on these two platforms and the relationship between designs on them, the principles you’ve learnt here can be extended to all the other platforms involved in your projects — be it TV apps or Xbox apps or VR experiences.
I think it is important to point out how if you as a designer can truly understand what it means for Design Thinking to be context-based, all of the pointers enlisted here will be extremely intuitive because, at its core, this principle is the fundamental basis of all of Design.
Design generally, implement specifically. Build holistic experiences for your customers.
