​TL;DR: Redesigned ZenMate VPN's user account pages for improved usability, working as the sole designer on the project. Conducted research to understand user needs and identified issues like accidental subscription upgrades and confusion over account status. Collaborated with stakeholders to ensure flexibility for future changes. ​

Created low-fidelity wireframes and interactive prototypes,​ testing with colleagues and friends. Developed UI updates and animations and ensured responsive design, with a focus on desktop but considering mobile. The project was implemented successfully, serving as a valuable learning experience despite some post-departure adjustments.

---

Intro

Timeline: Mar. 2018 - Jun. 2018 ​
My role: Usability testing / low to high fidelity wireframing / prototyping / information architecture/ UI design

I was the only designer on this project but worked closely with a project manager and in constant contact with tech team. ZenMate is an online security company focusing on the VPN market. The account dashboard is the part of the website where the user makes all their account and subscription related settings, and where the transaction and log in history are displayed. 

Disclaimer
​​I took on this project before my formal UX training, while I was working in the ZenMate customer support team. I worked on it on my spare time and though I made many mistakes and didn't always follow a clear process, it's a project I'm very proud of and I learned a lot from. 

Stage 1 
Understand

To understand the user pint of view, we studied support issue reports in combination with results from servery made via the website. We also had one on ones with the main stakeholders to understand the need of the company. 

User reported issues

Below are the most notable issues from the support team and user survey. 

Issue (I)

Result (R)

I: Users accidentally upgrade their subscription when intending to cancel. This update dosn't show anywhere on the dashboard and teh subscription appears to be cancelled until they are charged.  ​

R: The users requests costly refunds and charge-backs while also sharing their negative experience on social media and ratings. 

---

I: ​The user can't see what account status they have ​

R: ​Creates friction and confusion. 

---

I: ​Users get confused by the free trial and worry they will be charged. ​

R: The user thinks that we upgraded them and will change them without their consent, resulting in bad reviews on social platforms and loss of trust.

---

I: ​Subscriptions bought via the app stores don't how on the website and users are told they don't have a subscription. 

R: ​Users get's pissed off and thinks we are just taking their money without giving them the product. Or they think they don't have a subscription and don't cancel it on time, resulting in charge-backs and loss of trust. 

---

Stakeholder feedback

Feedback
In one-on-ones with stake holders, we learned that there was a plan to add new and more flexible payment options, as well as settings for new product features.

Takeaway
The dashboard needs to be flexible. It should be easy to place in new settings and information without reinventing the design. 

The problem

The page's originally design intended for just two settings (email and password) and the user's transaction history lacks organisation and flexibility to support new settings and information that have been or will be added. 

Old dashboard with the tab design.

Stage 2 
Ideate

After the initial research, and in between each testing session, I met with the project manager to discuss our findings and what we needed to change. 

Learning from others

As I started to design the page, I looked at other dashboards, such as Spotify and Facebook, to learn how they sorted information and general layout ideas. 

Discussion

For this project, a lot was building on the back and fourth between me and the project manager. At the end of the discussion, I would have a clear idea of what needed to be changed and some thoughts about what to do next.

The Beta house cafe [source tripadvisor.com]

Stage 3
Design

I started with sketching out some ideas on paper, but quickly moved into Sketch.  Information architecture(did wrong), Navigation, wireframes. 

Layout & Navigation

I designed many different low fidelity versions of the page layout and navigation which was then tested on their own. For each iteration, the flow became more and more initiative and clear. 

The end result was satisfactory, but it took time. Today, I would have gone into user flows and task analysis and made a site map to guide the navigation and layout. 

Wireframes

Settings 1

Settings 2

Settings 3

Prototyping

It the early stages, the designs were presented on paper, but as the fidelity rose, the screens were moved into InVision to create an interactive prototype. You can find a link to the final prototype (remade in Adobe XD) at the bottom of this page. 

Stage 4 
Test

As we didn't have a budget we tested with colleagues as well as friends and family. We tested between each version and also made sure to test with one developer each time to make sure the designs were implementable.

Preference test

While still in the paper prototype stage, the test participant were first presented with three versions of the navigation/layout and asked to say which one they were most drawn to. 

Usability tests

For most tests, I was the moderator and the PM took notes. We selected test participants from the team who hadn't worked closely with the account dashboard but who still know what they might find there to simulate the average user. I asked open questions and gave them tasks to complete. 

The final look

Once the AI and layout was done, the plan was to hand over the project to our designer, but as he had a big backlog, I asked him for the current brand documentation and gave it a go myself. 

UI updates

Animations

Once the designs were all done, I moved over from Sketch to Adobe XD, and created the animations to illustrate the behaviour of the page to the dev. team.

Making it responsive

As most users were visiting the page via a desktop computer, I put my main focus on the desktop design while still keeping mobile in mind. Today, I would have adapted a mobile first approach as 
For the mobile version, I hid some previews items and the navigation was moved into the hamburger menu.

Hand-off

My designs were taken well and what the company decided to go with. For hand-off to the dev. team, I documented the design together with the project manager. 

UI elements

Final words

The final deign was implemented after I left the company and some changes were of course made, but I'm still very proud of the project and the feeling of seeing your design in use is just great. This was a project built on trial end error, both from a process and a design standpoint. Finally, I'm truly thankful to the ZenMate team for the support and for letting me try my wings.