Interface Development for Memberset

Client

Memberset is a chat platform with paid access (via subscription) to groups from and for the US. We have already told you how the client approached us to update the site. In this case we will talk about the development of the interface.

The target audience of the platform is group creators

The client identified three main categories among them:

1. Tech-savvy young, mobile users who are familiar with the Discord platform, passionate about life in social networks, want to earn from information.
2. Influencers who earn popularity and share knowledge from different fields, encourage communication between members within the group and become closer to the audience themselves.
3. Older users who are not as familiar with technology and are switching from communities on Facebook to communicate in a closed group.

What about Telegram?

The answer is it is not used in the US, so this is a vacant niche for creating and monetizing channels. The difference from competitors is the principle of "one window" — people pay for the subscription here on the platform, upon registration.

The objective

Initially, the client came with the task of refining the product's interface: they already had old design materials and a landing page. But it turned out that the application had a lot of technical limitations, so our partner approached the client with a proposal to develop the product from scratch. They did the backend and frontend, and we did the design. This created a huge block of work which we immediately got down to.

About the project

The only thing the client wanted to keep from the previous developments was the turquoise color.

Below you can see the original product interface.

 

During the development of the interface we did a little work on the logo and chose the Manrope font.

Application concept

When we started to develop the concept of the application, we took the most complex section and the main functionality which was the chat.

In our first version we suggested square icons and elements to the client, but they wanted to bring everything to a single style with rounded shapes (similar to the logo), so we abandoned the original idea.

The first and the final application concept

Application Features

Paid groups with text and video chats

The key feature of Memberset is paid groups and text chats. You create a community (with the goal of creating unique content in exchange for a subscription), invite people, they join your group and get access to the content.

For example, the Memberset platform can be used by people who can provide professional knowledge in some area.

Subscription management

Below you can see pages of the financial part of the product — subscription selection. You can add payment cards and change your subscription plan in the app.

Analytical Dashboard

We made an analytical dashboard for the creator of the group, where they can analyze all the data and manage the community in the best way to increase revenue.

Later we made a dashboard for super-admins of the app who will be able to look at the product analytics in general.

Mobile application

Almost all the functions are duplicated in the mobile application, so we were working on many tasks simultaneously.

The work was structured in this way:

• define the user-story to be developed;
• develop the desktop, working out all the details as much as possible;
• get the client’s approval on the section;
• adapt it for the mobile app.

This kind of work process allowed us to send the first designs to the frontend and backend early so that the developers could start implementing it simultaneously with us.

Project challenges

In the process of development we came across several difficulties.

Working with the Manrope font

The main issue was the font synchronization. It happened that some of the designers got certain Manrope font styles reset after working in the layout. For example, Bold would appear instead of Regular.

We assumed that the standard font program (macOS and Windows systems) was leaving traces. So we decided to delete the font from the computer completely and reinstall it. We used the FontExpert program in order to do this. However, reinstalling didn't help and we had to fix everything manually.

After a while, the Manrope font loaded as one of the standard fonts for selection in one of the Figma updates. As a result, the outlines were no longer displayed incorrectly, so our problem was solved :)

Synchronization of all design versions

Since the infrastructure of the project turned out to be quite large, we faced the difficulty of cleaning the mockups and transferring them to the layout.

We kept several separate mockups: the web app, the mobile app, the website, and the design library. We also had separate mockups for layout designers and for approvals. All of this was time-consuming, since we had to keep all the design versions in sync.

Project features

User Flow 

We had User Flow (user path) already at the start of the project. Everything is color-coded there so that it is clear which section belongs to which function.

Documentation

At the start of the project the client also provided us with the documentation that described the hierarchy of the sections and functions. There was information on what a particular section or function was for, who it was for, which User Flow is the base one, what filters should be used.

Structure

Based on User Flow, we created our own checklist and used it as an additional tool for numbering pages and tracking their readiness. We numbered all the sections and subsections, so nested components became clear to us.

We always specified the identification in the name of the task to show which product it referred to (there are three of them in the project: the website, web application, mobile application), so the designers could understand which layout and section to go to.

Regular meetings and roadmap

Project meetings were held twice a week. The client’s product manager, our project manager, and the developers’ manager participated in the meetings. At the meetings, we discussed the prepared layouts, exchanged ideas for improvements, and checked with the roadmap for the coming week.

Design Library

With this project we reached a new level of structuring the design library. From the beginning, we turned everything into components and grouped them by type and state. This allowed the designers and developers to navigate through the library faster.

Animations

We started with gif animations for emails: emails coming to users will contain attractive animated icons.

We did a lot of work in terms of lottie animation. We animated the icons, which made the interface more lively.

Media Kit

In addition, we prepared a presentation for the client that they can use to approach investors and influencers that Memberset will want to attract to its product.

The presentation was in the same visual style as the interface, the client was very happy.

The result

We developed the interface for the web and mobile application of Memberset, updated the logo and prepared the design library.

The project continues its development. Now we are waiting for the launch of the current version of the product and new design features which we have already partially begun to implement.