UI and UX development of Seshi, a digital file sharing solution

2016, the story so far

I joined Seshi Ltd as an UI/UX Developer in early 2016, shortly after coming back from North America. I met a ethical hacker/software engineer in Newcastle University at a computer science postgraduate open day. His name is Christopher Simpson. He demonstrated the app to me and the functionality was really impressive, but required much needed UI and UX revamp.

I wanted to get the working MVP off the ground and see what happens. What kind of feedback would it get from users? Will it get traction? I wanted to find out.

What is Seshi? It is a simple digital file sharing web application without having users uploading their files to a server.

The potential? very low cost scalability and niche, growing technology (webrtc)

Targeted market - millennials who are familiar with file sharing like limewire or napster.

Business to business - our low cost operating cost means small IT enterprises and non-profit organisations can use our file sharing solution. No more vendor lock-in and inflated license fees.

It is currently optimised for Chrome, Firefix and Android.

You can try Seshi today with a friend

I will now share my design process to get from design to launch.

Wireframe - UX Design

There is a lot technical design involved in rebuilding an existing app. Firstly, the user experience (UX) always come first. The first action we want a user to do is to add some files to their file list. Next is the sharing of the url connection key. I had to figure out what the user would do and how it would save them time.

Instead of using design tools such as Balsamiq, I used the old school way with a sharpie pen and paper. It was enough to communicate my ideas to Chris. I also used Slack, which made it easy to send photos of the wireframes and most importantly to update on our progress.

I took a bit of inspiration from former file transfer software like Napster and Limewire. In the mockup, I used arrows to indicate the sending and pulling of files.
The concept was to send any files to another person. Two way file transfer is the core feature. Person A can send a file to person B and vice versa. Person A can pull files from person B and vice versa.

Before a two file exchange can take place, person A shares a url connection link to a person B. Person could be a friend or anyone. He/she clicks the link and a connection is established. Both can freely share their digital files with each other.

The user can generate a url key and send it someone via email or social network sites like Twitter or Facebook, so both can start sending each other digital files.

UI Engineering

Most of the code is client side. What is that? Not only I have to make the web app pretty, I used tools to build the UI to help me maintain the front end code in the future. A bigger startup would usually have a separate UX Designer and Front End Engineer to spread the workload.

Gulp and Sass Workfow

Sass is a CSS preprocessor. It helped me organise my stylesheets and helped me write code faster.
Gulp itself is a build tool that does a lot of things from minifying JS files to compiling Sass into CSS.
One of the key workflow is to convert and concats a bunch sass files to one css file for deployment. This separate the development and production code.

Vanilla Javascript/No frameworks

Chris had already written a large majority of the web app in javascript. I contributed to the code base by integrating a media player (plyr), which allow users to playback their audio and video files from their file list. I had to adapt the media player to different devices from desktop to mobile and also to different mimetypes i.e audio and video file formats. Here's a demo of the player:

Two-way file transfer

The first version had a two file lists one for the user and the peer.

I did some user testing and got some useful feedback. Some users weren't sure what to do after they added their files. It was just guess work. After taking a step back, it was clear there were some distracting issues.
A notable change was moving the generate url "Send" button to the right hand side. It would hide when the peer's files appear. On mobile, the user wouldn't have to scroll back up like before.

The lighter colour scheme is now more easy on the eyes.

File transfer in action:

Constantly Iterating

Build, test, evaluate, and repeat. My job is to cycle through this process constantly. By taking account of qualitative user feedback, I make changes and may introduce new features to make user interaction and experience flow easier.

We are currently in our third iteration.

The web app is still a work in progress, so I would appreciate any feedback.

Email your feedback at [email protected]