Open Source Libraries for Apps on iOS
The Origin
A while ago, I participated as a Lead Product Designer in a wholesale e-commerce “Qoovee” Start-Up. It was a wonderful experience where had the honor to work with a fascinating team of designers, developers, and sellers. Without going into detail, the team and founders of the company had a different point of view, and we literally left the project with the whole team after working a year and a half. We have finished and released the desktop part of the services but App was for 80% ready. The App, especially on the iOS platform never saw the light of day… It hurt me and the iOS Developer (who actually became my friend). The gestalt was formed and it didn't give us rest anymore.
The Action
We hadn’t any possibility to push or affect the release of App. So we decided to pick up the most innovative features that we made in App and by using a completely different approach in form cases and developing — create open-source libraries that anybody can touch and grab for their own projects.
On the developing side, shortly, we have decided to code simple and clean code as much as possible on the Swift UIKit with itemized documentation according to the guidelines. And that’s my best definition of what we were going to do by dev side 😂 . I hope, soon my teammate also will prepare his own storyline.
My approach was to design all selected features like parts of one product. So basically, they can be presented as a concept of any app visually. I came to the conclusion that I will do for a popular brand’s product, but which has not been released yet and will launch approximately when we planned to publish our libraries in the public domain at the same time. That product was an Apple TV+. All views will be our representation of how this application might look like with our invents.
The Cellular Number Mask
We have been building an ecosystem for wholesale products. It would be impractical to force users to register on each platform individually when they use several of our platforms. The most obvious way to create our own userbase system for gaining access via one account to all products, like Google Account.
The best practice in a registering method is signing by social media because it does not require additional authorization. But we had configured a difficult system that allows us to use only email or mobile phone number. Since the first iterations of the main service released in 2014, we had a serious group of customers who already had accounts. And based on it, we figured out that 72% of users use their phone number as a way to log in, and the rest 28% of their email addresses. 28% is a huge amount to ignore them and we cannot leave a mobile phone number as a single process. We must design both methods but we absolutely didn’t want to allocate two input forms in the registration window.
We had a challenge, how to combine two processes into one input form. Email forms don’t require any additional features than the usual text ones. However, the numbers basically more conveniently type into masks that include predefined country code and cells for other digits. According to the researches, only 0,009% of users in the world use the digit as the first symbol for an email address. My idea was to design input that had a default view in the idle state and will transform into a custom field with a cellular mask immediately after typing the first digit. During designing this feature we found similar decisions, even found an open-source library that almost contains our needs, and for saving time we have used that one with some list of customizations. And that point also motivates us now to create an open-source library with our vision in order to help other teams as we were.
Theoretically, our Cellular Number Mask can be useful for fintech projects where also exist serious security guidelines that also don’t allow the use of social networks during authorizing in the application.
The Collection View Layouts
The product “Market” was a fundamental project of the whole ecosystem. Based on users' behavior patterns, we have designed a proprietary system of subscriptions to sellers, industries, and other entities. That approach is more suitable for wholesale trading than the standard view of b2c e-commerce services. And this is another big story that worth its own article.
In fact when designing a behavior model, when users have their own feed based on subscriptions, as the simplest example of Instagram, a feature is providing for opening new items up to a system of recommendations from different entities of the service. Instagram has, in addition to the default posts, also stories, and videos from IGTV, as well as items for purchase. For that page, we have implemented the collections that present different entities from different angles. This is a quite common layout that is very popular in various types of applications. Especially considering that there are no practically worthwhile carousels with smooth and detailed animation in open-source.
The Long-press Context Menu
The list of items is a crucial moment in user interaction on e-commerce platforms. Actually, business is happening here. Call to action buttons on such layouts are the primary tools that connect sellers with customers. Usually, the options are pretty simple: we are taking “the adding to cart”, “moving to favorites” features, and putting them on a product form — period. But in our case for wholesale trading, these two buttons are not enough. There are no such obvious primary actions to make the deal.
In addition to clear actions in the form of ordering and moving to favorites, there is also a phone call and a written request to the customer. With large b2b sales volumes — is difficult to describe all possible details on the product card. From a business point of view, it is very important to be able to call and ask the seller directly. Also, the price depends strongly on the volume of the order and a call on this issue is not a way out. For a certain price, you need to send a written request indicating the quantity of the desired product and the delivery terms— this is important from the legal side.
In the end, we had a challenge — how to accommodate four buttons to the layout. After many iterations, we have realized that placing four buttons, even in the form of four small icons, is not the right decision on the part of ergonomics. The product feed is fundamentally different from the Instagram feed, for example, in our case we have to give the user a choice of how to display the content. This can be a full-width view with a photo of the product, a full-width view with more detailed information, or a form in the grid. We tried to leave only one of the most critical actions and hide the others in the selection menu. But once again there wasn't the most primary button that will cover the majority of the use cases. Also adding another step for calling that selection menu was a bad idea.
We were ready to implement some new behavior for users only if it will contain all actions as one general view. We all like Pinterest and their long-press context menu implemented in a glorious way. Pressing and instantly choosing the options that arranged in a radial from a point of touching is the best case for us. Yes, Pinterest is using that feature for showing pictures without any distractions — but for us, it's also the solution. This cost us a really serious effort, but we can say with confidence that we have developed a more versatile solution than Pinterest even did, and everyone can use our library to solve their problem.
The Showcase
Of course, we created these libraries for our techies' community and there is a basic case to upload our developments at the cloud and present them through cocoa-controls and dribbble. But there is nothing better to showcase designed and implemented features than tactile interaction without any technical knowledge even — just get it from App Store and interact with it on your device.
And inspired by the similar apps of our colleagues — Playground, Showroom, we are delighted to present you with the Masterpiece app where you can touch, explore, and grab them for your own development. We found it difficult to publish an app with logos and other things related to Apple TV+. But we think this will not prevent you from enjoying the fruits of our labors. Feel the level of our masterpiece.
