OVERVIEW
Disclaimer
Please note that the design deliverables included in this case study are for reference only and may not match the final designs used by Sismo.
Additionally, none of the information, deliverables, or design decisions presented in this case study represent the views or opinions of Sismo.
Information
Recently, I have written an introductory piece on Sismo which you can find here ↗.
PROJECT INFO
Scope — Partially collaborative design exercise
Platforms — Interactive prototype of a web app
Timeframe — Dec 2022
INTRODUCTION
As a part of a partially collaborative design exercise with Sismo ↗, a Web3 product that focuses on digital identity and privacy-preserving solutions, I was given a prompt to provide an interactive prototype of how their app's next version, Sismo App v2, would look like.
At the very beginning of this assignment, I decided on three general design principles:
  • The continuity of the user flow is signaled by both functionality and visuals.
  • With this version, the Sismo app would move from a one-directional product to a multi-directional product. This means that users would be able to interact with elements as many as they desire, without any limitations, at any point in their user experience.
  • Considering the landscape and Sismo's plans for the future, design scalability is to be taken into consideration with every single design decision.
OBJECTIVES
The primary objectives of this assignment, per the prompt, were:
  • Merging the Playground and Curated environments into the same environment (i.e., merging two different user flows into one single user flow),
  • Making the app's user experience much more interactive,
  • Displaying what badges the user is eligible for, and
  • Displaying badge data in a user-friendly way.
WORK
Design system
Even though I was provided a very light design system with few components, it was extremely limited, especially considering the scope of this assignment (an upgrade of the app, not only in terms of design but also in terms of functionality) and the very little time I had provided to complete it (one week, to be exact).
As I have noticed that most of my time working on this assignment would be spent on creating a much more extensive design system to ensure that the time spent on design is reduced and that a more efficient handoff at the end would be ensured; I have started to work on a design system, so minimal that no components of that I would not use for this assignment would not be created at the first place.
BADGE VIEW
It is accurate to say that Badges are atomic units of the whole Sismo product, and the way badge information is displayed is truly important for the ideal user experience.
When a user clicks on a badge on the current app, v1, a new page that displays the badge's information opens. As one of the core design principles I chose to follow for this assignment is to ensure the continuity of user experience, so that unless necessary, it is not disrupted, I have decided to make use of overlays to give users the sensation of a one-page app.
In fact, I strongly considered going even further and adding a tab view as below. The purpose of this tab view would be (1) to improve this continuity even further, and (2) to obtain a higher level of design scalability. Yet, per the team's feedback, we gave up on this idea; though, I personally still think that it is an idea at least worth exploring.
NEW MAIN PAGE
I was asked to design a new main page: Per the prompt, this page would have a table view consisting of two different kinds of badges, Curated, and Non-Curated ones, which had their own different user flows in two different environments. In addition, some statistics considering these badges and new interactions, such as selecting multiple badges, hover states, etc., were added to improve this page's visual design and functionality.
As the current version of the Sismo app does not allow its users to interact with multiple elements, one of the highest priority tasks was to create a delightful experience that enables users to interact with multiple elements, including selecting multiple badges and minting them only with a few clicks.