Sisyphus is a proof-of-concept vertical slice created for a stakeholder of Long Lost Friends, the agency I worked with. The goal was to create a high-fidelity prototype of a minimum viable product to show what a complex app may look like if the stakeholder wishes to continue developing it.
The "super-app" name comes from the combination of features. The stakeholder suggested the app include:
Instagram-like feeds to show the activity of your friends, as well as Instagram's suite of social features
Communities that resemble Discord servers for chatting
An NFT marketplace similar to OpenSea that would allow users to find, buy, sell, and trade NFTs.
Because each source of inspiration is its own dedicated app, I had the difficult task of narrowing down the basics for this app. After consulting the stakeholder, the decision was made to get the user from the app start to successfully trading an NFT with another user.
Completing a trade
Going with the flow
Finding a user flow with the least friction
Due to time constraints, I opted out of conducting full user-research, forgoing the traditional tools of personas and surveys. I began with flows provided by the stakeholder and used those to narrow it down to a single user task.
The flow I created does not show every interaction a user can have on a given screen. The aim is to show an intuitive direction for the user to move in, starting with opening the app, and concluding with viewing a new NFT in their profile after a successful trade.
This flow assumes the user has completed onboarding tasks and is familiar with basic functionality. This is, again, a proof-of-concept and not a final product. There are some navigational redundancies.
I kept my workflow similar to the flowchat
Screening
From wireframes to hi-fi
A handful of (very) rough screens were built to test ideas and get a feel for the basic layout of each screen. Inspiration for the community channels came directly from Discord. Project and Community screens are built similar to a product list in a shopping app.
An idea I abandoned early on was using a top drawer for navigation. I was originally inspired to do this from the PlayStation app, but found for this design it removed one point of friction to have a global navbar at the bottom of the screen.
Wireframes, early prototypes
Drawers/top sheets have been instead utilized in the community section to show a list of channels and servers, and the userlist of a given community. The navigation can be access by dragging upward on the message box in the community section of the app. I have a suspicion that this could interfere with the "swipe up to return home" functions on both iOS and Android devices, but time constraints kept me from testing this.
Style, darling
The little things that make a big impact
The stakeholder brief asked for a dark mode. I kept it to kind-of-black (#121212) and mostly-white with grays for dividing elements, containers, and in gradient backgrounds. I selected a vibrant blue to highlight where a user should look first. This includes primary buttons, community and project cards, and smaller elements like following a user.
Typography is kept to a single font, Inria Sans, with varying weights. Inria gives a feel of modernity without sacrificing readability. While looking to many Web3 projects for inspiration, I found that many employed typography did not scale well and was difficult to read at smaller sizes.
A finer touch
Interactions should feel fluid
Another request on the design brief was to have a sense of fun and friendliness to the app. I achieved this through small interactions—an animated follow button, dissolves as screen transitions, a dynamic header on project pages. The dynamic header is a particularly important element as it maximizes screen space for viewing numerous gallery items or large chunks of information. Once the user begins scrolling, the header will quickly animate to a condensed version without imagery.
Header transitions on scroll
Navigation tabs
Offer toggle
Follow user
Going Forward
How the app and grow from this concept
If I were to continue designing this app, I would take a step back and immediately start with user testing. I have only validated my own thoughts with this proof of concept, trying to think as the user, but I am not the user in the end. It would be important to take user insights into consideration, particularly around any pain points uncovered during testing.
Navigational redundancies may prove to be confusing. Icons may need labeling. A greater distinction between a project and a community may need to be found. Given the time restriction in place (I was given three weeks while working on multiple projects for other stakeholders at the same time), I believe I have proved that the stakeholder's concept could work.
In addition to the above, I would work to address feature bloat with the stakeholder. Finding the leanest version of the end product would allow for expansion in the future without complicating the design process too much in the beginning.