CASE STUDY

Session

UI/UX, User Research, Visual Design

Overview

THE CLIENT

The Loki Project is a blockchain enforced mixnet that allows users to securely transmit and receive data and cryptographic tokens without malicious actors having insight into user data or activity. It is a registered Australian nonprofit that believes digital privacy and freedom of speech are fundamental human rights. This case study specifically centers around the redesign of their messaging application built from blockchain technology, Session. An application that differentiates itself from its competition via decentralized service node protocol, the app ensures a higher degree of privacy in its end-to-end encryption, as well as a higher resistance to hacking and other potential vulnerabilities found in other centralized service models.

THE CHALLENGE
  • Craft a unique visual identity for Loki’s messaging application Session and work to create a living UI style guide to promote visual consistency across the brand and its subsidiary applications.
  • Create a scalable design system for multi-platform use including desktop, mobile (iOS & Android), tablet, and web.
  • Improve the usability by enhancing the onboarding process, while promoting the app’s value proposition to first time users
  • Improve experience for existing beta users by introducing useful and relevant features, as well as a thrilling, indulgent, and redefined visual experience
THE GOAL

Promote growth of the application through intentional and research driven design, ideally setting up the application for widespread adoption.

OUTCOMe

A completely redesigned user interface that sets Session apart from other encrypted messaging platforms, appeals to varying user types, all while exemplifying the company’s value proposition.

LENGTH OF PROJECT

4 months

ROLE

Contract UI/UX Designer (

Research

ECOSYSTEM ANALYSIS

Prior to design, it is important to consider the purpose and context of the application. The main goal of an ecosystem analysis is to uncover potential motivations and examine where Session fits into a user’s overall flow of virtual communication, the different potential uses, as well as the societal context of the application. This acts as an anchor for the scope of the project. I chose to list out six different ‘WH’ questions (who, why, what, where, how, and when) and prioritized them by taking a hybrid approach from the User Centered Design Model and the Genius Model. 

RESEARCH GOALS 
  • Identify primary demographic of users most likely to adopt Session
  • Uncover user motivations for turning to encrypted and decentralized messaging systems as a primary means of communication
  • Examine current landscape of message encryption and identify any holes that may currently exist
Secondary Research
Market Research

Based on market research, the three primary risks associated with performing any task on the internet include exposure to cybercriminals, the resale of information, or the risk of being unknowingly monitored by one’s own government or anyone who has access to the server where their data is being kept. While end-to-end encryption has risen as a potential solution, there are still vulnerabilities that may be exploited and it is still not a foolproof option for fully anonymous messaging or interactions. Along with an application that utilizes E2EE methods, a decentralized server would also serve to increase the integrity of the security protocols already in place. This coupled with lack of metadata collection would also be a selling point for demographics of users that have reported feeling watched by the government or an external presence, who feel that their information may be at risk, and who actively search for ways to increase their online privacy.

Competitive Analysis

The competitive analysis examined what Loki Session’s direct and indirect competition is doing, and helped ideate what features the company could incorporate that would set it apart from its competition in a significant way, while further capitalizing on its value proposition. Reviews from the app store were also taken into consideration. My competitive analysis produced the following insights:

Pains

  • Lack of Decentralized Security Protocols
  • Lack of anonymous Sign Up options
  • Stored metadata
  • Confusing and unattractive UI’s
  • Inability to alter availability status
  • Problematic onboarding
  • Deceptive subscription models
  • Lack of auto encryption

Pleasures

  • Two factor authentication
  • App Integration
  • Cryptowallet functionality
  • Full file sharing capabilities
  • Enhanced group chat and channel functionality
  • Zero cost
Primary Research 

Stakeholder Interviews

To fully understand the scope of the project, it is essential to conduct stakeholder interviews in order to minimize assumptions, provide clarity in terms of the ideal project outcome, and narrow the scope of the project. The stakeholder interview is also beneficial in ensuring that all necessary and governing parties are on the same page as to what is being created. Below are the recurring themes taken from the major stakeholders involved (CTO, CEO, CMO, and the Lead Mobile Developer).

Value Proposition

  • Complete privacy, virtual freedom, and safety without threat of leaked metadata
  • Completely secure connection as well as decentralized security protocols
  • Zero censorship
  • Zero personal information required to sign up = nothing that could be personally identifying to the user if they do not want it to be
  • Peace of mind
  • No numbers, no data breaches, not footprints
  • Not in bed with large corporations, the company has no incentive or reason to want to sell information
  • Loki is built by the people for the people

Project Vision

  • Mass adoption
  • The standard/go-to application for all encrypted communications
  • Allow for the user to have complete freedom in their virtual communications without worrying about leakage of personal information
  • Mobile, fluid, and easily accessible interface
  • Clear onboarding experience
  • Establish habitual usage

Design and Branding

  • Minimal design, limited options, stress free experience
  • Compelling
  • Memorable and unique
  • Friendly, welcoming, engaging, happy
  • Capitalize on security and privacy
  • Having privacy can be easy

User Goals

  • People who currently value online privacy
  • Digitally savvy
  • Aware of the vulnerability of virtual interactions
  • Early adopters

Feedback from Beta Users

Prior to the release of Session, its predecessor from which it was adapted, Loki Messenger, had a forum that allowed users to provide feedback in real time to the Session development team. This early feedback was critical to understanding what current users valued the most, and where they felt the app could improve. The biggest complaints were related to the apps usability, visual design, lack of clarity as to how to add contacts, and its obvious resemblance to Signal (the codebase from which it was originally forked from). 

Final Personas

 In this case, personas helped to further think critically about the future and longevity of the product, as well as identify potential groups with whom the product may resonate with. Personas also helped to expost potential edge cases that may not have been previously accounted for.

Ideate

During the ideation stage, my priorities were to generate innovative ideas, identify necessary features for the initial MVP, and ensure consistency between stakeholder, development, and user expectations.

STEP 1: CLEARLY IDENTIFY GOALS

STEP 2: USER FLOW

One priority when I was brought onto the Loki team was improving their on-boarding process. I wanted to keep this as simple and straightforward as possible while also explaining what a public key and seed were. These are terminologies and phrases that are unique to the blockchain and crypto community that they hoped would be translatable to the average user, so I wanted to keep the flow as minimalistic and simple as possible. 

STEP 3: IDENTIFY MVP FEATURES

Based on business goals, user goals, and technical/usability goals, I created a spreadsheet that outlined necessary features for the initial MVP, features that would be nice to incorporate, and future features that would help improve the application’s overall customer experience while taking into account specific user groups needs, start to finish. The spreadsheet can be viewed HERE.

Information Architecture

Prior to sketching out initial prototype ideas, I decided to combine the idea of a site map with a Jobs to Be Done worksheet. Given that I was tasked with redesigning the app versus building it from the ground up, I was essentially reorganizing and clarifying information rather than thinking about what information had to be included at all. It was less of a challenge viewing what needed to be on each page and more of a challenge brainstorming how to visually convey task flows in a way that displayed hierarchy versus disorganized and scattered icons that conveyed a medley of different things. By creating a Task Analysis worksheet of the primary, secondary, and tertiary tasks I intended for the user to complete on any given page, it set the stage for low fidelity wireframing.

SAMPLE: 

LOW FIDELITY WIREFRAMES

After establishing a clear hierarchy of information, I began to brainstorm ways in which blocks of information could be visually conveyed by sketching my initial ideas out on paper. These are my initial, low-fidelity wireframes in their barest form.

Design

VISUAL RESEARCH

In terms of my design process, I tend to put my visual research last so my designs are not influenced by superficial design decisions. What I hoped to gain by creating an inspiration board was inspiration from other messenger UI’s in order to brainstorm how I wanted to scale the mobile app’s ui into a desktop application. 

DARK MODE

A design choice I very deliberately chose to incorporate for Session 1.0’s release, dark mode felt, not only enticing and mysterious, but also an embodiment of everything the app stood for: privacy, security, peace of mind. Given the redacted nature of the application’s branding, and the desire to capitalize on the brand’s primary value proposition of being a fully anonymous, decentralized messenger, I felt a dark mode would be fitting for the app’s initial release, while a light mode would be a delightful feature that would accompany the app’s evolution from 1.0 into 2.0. Dark mode being the application’s primary palette symbolized discretion, subtlety, and modernity, which are all qualities that the Loki Project hoped to convey with the release of Session.

QUICK AND DIRTY DESIGN
Given the nature of the contract and the time at which I was brought onto the team at Session, time was of the essence. I had one month from hire in which I had to conduct preliminary user research, create a design scalable design system for Session’s mobile and desktop UI, have these deliverables ready to ship to development and eventually, implementation in order to meet the desired release date of mid-January to early February. I used my task analysis worksheet to guide the design and wireframes, and opted for a “Quick and Dirty Design” strategy, in which I freehand designed the pages based on my sketched wireframes, sent to developers and essential stakeholders for feedback, before iterating and improving on these designs. Below you can see some examples of the evolution of the design between initial ideation and final stage execution.
FINAL DESIGN
OnBoarding Experience
A major concern amongst stakeholders from day one was the challenge of explaining the technology behind the app in a way that is accessible to a user without any prior crypto or blockchain experience. In order for the product to succeed on the market, it is essential that there are no barriers to entry and the onboarding experience is quick and straightforward, while equipping the user with the proper information needed in order to move forward. Below you can follow the sequence of events from the splash screen that conveys the technology behind the app, to the explanation of what a user’s seed and public key is.
INTERACTION DESIGN
 
Not to be forgotten, the microinteractions of the application were some of the most important in regards to tying the entire application together and creating a truly fluid and beautiful user experience. An example of an interaction I custom created for the application is below, where the send status of the message is concealed behind a partial swipe. A user can continue to swipe all the way in order to generate a reply. In this sense it is not only building upon the expected swipe to reply behavior, but also offering a level of privacy in which it quells a voyeuristic or intrusive feeling to see the constant status of your messages (i.e. whether they have been sent, received, or read) displayed. 

Analysis

UNEXPECTED CHALLENGES

I would say the hardest challenge when it came to this project was bringing together the ideas that every essential stakeholder had in order to craft a user experience that was clear, provided direct functionality, and also didn’t compromise when it came to properly explaining the technology behind the application. Part of the challenge was taking an application that had a very clear demographic of users with prior blockchain experience, and turning it into an app that would have the capability to appeal to the masses. This included rethinking the original design, swapping out iconography, and remaining receptive to criticism along the way (a designer’s biggest Achilles heel).

final thoughts
After having established a clear design system for Session, giving the application a solid foot to stand on, as well as the ability to grow into its full potential, I left Loki feeling positive and excited for the future of the application. During my time as a UI/UX designer, I felt that the opportunity allowed me to increase my understanding of blockchain technology, deepen and hone my animation skills, and become a champion when it came to prioritizing an organized design system.