Status SuperApp

This post is an attempt to revisit and reimagine what the Status app could or should be. For the record, this concept ‘is’ and ‘has been’ one of the many ideas of @jarradhope which I spent time to visualized. I was also inspired in part by past iterations from @maciej

*Please note that I have no intention of discrediting what has been designed to date by the Product Design Team. This is an exploration and should be treated as such. The beauty of working at Status is being able to constantly challenge (update) a system makes for a better system…This has always been the way here, so don’t get comfortable :pirate_flag:

By definition a super-app or superapp is a mobile application that provides multiple services including payment and financial transaction processing, effectively becoming an all-encompassing self-contained commerce and communication online platform that embraces many aspects of personal and commercial life.

Some common examples of super-apps are the Apple Store, WeChat, and Alipay. We believe Status has always been a super-app but never correctly executed and fell victim over time to becoming fashionable and chasing standalone applications such as messengers, group chats and wallets. This has been a result in the past of product design and marketing teams needing to make a unique claim quickly. Rightfully so, as marketing teams talk about features and Product teams design them.

I have spent countless hours with @jarradhope and @carl discussing what could be. I feel I can say these things confidently as I have been with Status since 2017 watching the app design process slowly paint itself in a corner becoming more and more irrelevant.

When we step back and look at Status as a whole and analyze our original intention, ideology and future intentions it could be sensible to offer a product (or platform) that aligns with our decentralized stack and what a user (or community) might need in a ‘not so distant’ stateless network. This is why I feel it’s important to address this now. Products and features are not as important as platforms ENABLING communities and networks. I would suggest all aspects of design in our space to think first about modularity, portability and quick scaling solutions.

We believe a super app can be all these services in one application or platform. It would just be an exercise in time and functional design without any present constraints. What ever the ‘user’ decides is relevant (or not relevant) to them by choice in the UX/UI. Meaning as a user; I should be able to decide what I want, when I want it and how it looks.

This is essentially how an OS or OS Launchers function, the user can customize their own experience. This is how we would like to approach building this super app. You can think of this like calling in modules or ‘widgets’. As an experienced user or developer I may only want a search query. As a n00b I may opt for the pre-configured widget theme. Whatever your level of experience, it would be your choice.

With three example user types in mind, We explore the following UI/UX options:

Grey Beard Mode - A minimal 'calling' function in the 'search' query  
Regular Mode - A 'feed' mode based on a users selected modules
N00b Mode - A 'widget' mode based on a users selected modules, this could be pre-installed themes

In order to achieve this we would investigate and design for the following concepts:

  • A modular grid system that allows for customization

  • Minimized to expanded designs of all ‘widget’ modules

  • A UI that allows the user to chose for viewing as many or as few options as they wish

  • A way to edit, delete or modify modules

  • A dynamic feed mode which is constantly updated

  • A static ‘widget’ mode which a user can pin an app

  • A very strong ‘search’ query function

  • A ‘one-screen’ sign in / on-boarding

For this exercise I have adapted a generic version of the Evergreen UI component kit, guidelines and symbols. You can investigate the full Figma file here.

Modular Grid System

The grid system is modular which allows for a number of user customization options.

Screen Shot 2021-11-20 at 6.02.56 AM

Fixed (widget) Mode

Here is an example of the fixed widget modules similar to any mobile OS. A user profile, search query with filter and customization tab. Below this you also have a tabs view for all modules and additionally the visualization of the fixed widgets below.

*Please note I have only used colour here to differentiate modules.

Screen Shot 2021-11-20 at 6.05.35 AM

Dynamic Feed Mode

The dynamic feed mode is functioning like Twitter updating the newest content into your feed. It could also be an option to ‘pin’ certain modules. Depending on your view type the modules could be maximized or minimized. Lastly, You could by default use only the ‘search’ query which is actually doing all of the lifting for this type of application.

Screen Shot 2021-11-20 at 6.11.01 AM

Arrangement and Customization Filters

Below is an example of how a user could arrange and add modules to their feed. Create labels or add new modules. These then also appear as a ‘tab’

Screen Shot 2021-11-20 at 6.18.22 AM

Screen Shot 2021-11-20 at 6.39.38 AM

Notifications and Smart Search

The notifications could be a simple banner alert at the top of the application window.

Smart search reveals ‘recent’ queries and essentially should be able to search ‘everywhere.’

Screen Shot 2021-11-20 at 6.26.35 AM

Messages and Communities Feed

The messages can be accessed via the ‘messages’ tab or by querying for ‘messages’. The same functions for communities or any other module.

Screen Shot 2021-11-20 at 6.29.51 AM

Wallet and Transaction History

Screen Shot 2021-11-20 at 6.33.11 AM

Community Messages & Community Search

Screen Shot 2021-11-20 at 6.34.50 AM

Contacts and Messaging

Screen Shot 2021-11-20 at 6.36.47 AM

Latest Feed Example

Screen Shot 2021-11-20 at 6.37.47 AM

Dark Mode

Screen Shot 2021-11-20 at 6.42.30 AM

Fast Login

I also really like the idea of being able to sign in super fast by selecting a few key profile filters which could determine the level of the user, pre-installed modules or themes.

Screen Shot 2021-11-20 at 6.45.30 AM

Conclusion

I realize there is many more levels of details and clarification needed to make this a functioning design system. I also understand that the designers at Status do not always have the luxury of time to explore these ideas and would very much like to if given the chance. So I hope I have added some new perspectives or ideas in your efforts moving forwards. Thanks for looking and thanks @jarradhope for spending so much time articulating the future.

11 Likes

Wow this is amazing stuff @Ned! You’ve nailed a lot of the concepts of the ideal Status app.

Would love to get more people involved in helping flesh these ideas out and working towards this vision :slight_smile:

Hey Ned,

super interesting vision and ideas here. The flexibility, scalability customization options are definitely apparent in those concept designs.

As you said, there’s a lot of clarification needed for certain areas. Ironically, I find the whole messages+communities story most unclear from these screen designs…

Few questions:

  1. How is the messaging feed supposed to work? Will I see all unread one-to-one + group chat messages in one feedback? Will it be just unread messages or also read ones?
  2. How is this going to play out, given that communities have channel categories as well?
  3. Not really a question but: I’m curious how these ideas translate to a desktop interface (or more generally, how do does all of this behave in a responsive environment)?
1 Like

Please consider a “suggested loadout” option so users can select a preconfigured/recommended loadout to get started quickly with options to customize later.

Hey Ned,

thank you for the post, interesting ideas, I’ve been developing and using our app for a few years, and also gathering feedback from other users, and I agree tabs layout doesn’t work well, I’ve been suggesting making tabs flexible, but didn’t know how to implement case when a user wants lots of tabs. So a horizontally scrollable list of “screens” looks interesting, because currently, for example, it’s hard to find how to share your chat key, or where are contacts (they are in profile currently) we could have “preinstalled” “tabs” for that. Also, many users say they don’t use a wallet (they are not interested in crypto) or they don’t use chat they are interested in the wallet, we could have templates for that. That is a pretty simple change in the app, but it should improve UX I guess a lot

Also, I’ve been suggesting fast login as well, without passwords, etc, the app should give access to the main functionality as quickly as possible, if the user is interested in the wallet we should just open the wallet quickly for him without asking him a name, notifications, passwords, etc. Or open community he wants to join

regarding grid i have concerns, it may be cool but it doesn’t give much value for the user but it requires a lot of effort to implement it properly, IMHO

so fast login in pair with “advanced navigation” looks really promising

2 Likes

Hey Pascal, Haven’t spoke or seen you in ages. Hi friend! :wave:

Yes, confirmed there are many loose concepts that can be tightened up with the help of product design. So to try to answer your questions;

1. How is the messaging feed supposed to work? Will I see all unread one-to-one + group chat messages in one feedback? Will it be just unread messages or also read ones?

I believe this could be a choice the user can customize in how they would like the queries to return or ‘show me’ specific types of messages, it could also be a ‘tab’ that is created for read, unread, or new messages.

How is this going to play out, given that communities have channel categories as well?

I would imagine that a user will add, search or pin a specific community and then enter to join/see the group conversation probably similar to Discord.

Additionally, individual conversations would also have notifications or possibly pin / favorite a contact / conversation.

Not really a question but: I’m curious how these ideas translate to a desktop interface (or more generally, how do does all of this behave in a responsive environment)?

Good question, I don’t know. We would need the help of everyone here to crack this. I believe the hardest working feature of the entire super-app would be the search functionality and its ability to call / customize information.

Hey Andrey! I know you are one of the OGs here working on the app and always had great ideas and implementation. Thanks for responding here. I guess what this UI would do is service 3 things:

  1. a user that know exactly what they want to see by typing it in a search
  2. a user that wants to see everything visually and know where to access it
  3. a user that wants a mix of both

One user may elect to search ‘contacts’ and their contacts are displayed where another may want a module to click each time for contacts. Its super difficult building these ‘one solution’ fits all within the application especially since we have such a diverse amount of users with different focuses / use cases.

I guess I see our application more like a customizable OS where we could also pin or call up DApps or anything really. As we grow I would imagine this platform needs to be generic or flexible enough for communities to fork quickly and build or customize everything.

Also, I’ve been suggesting fast login as well, without passwords, etc, the app should give access to the main functionality as quickly as possible, if the user is interested in the wallet we should just open the wallet quickly for him without asking him a name, notifications, passwords, etc. Or open community he wants to join Definitely this :+1:

1 Like

This is how the Toutiao (Today’s Headlines in English) app works. It’s two sets of feeds. A vertical feed with news, videos, social posts, or whatever was selected in the category at the top. The horizontal feed switches you between categories and functions.

Here’s a video showcasing the 2-axis feed system on Toutiao: https://311-backup-1.oss-us-west-1.aliyuncs.com/Screen_Recording_20211128-185417_Toutiao.mp4

I really like this concept, and would love to see Status go in this direction. I am working on a private fork of the real app to make this into a reality, and using your Figma concepts along with Toutiao’s execution of the concept to turn it into a reality for Status.