Portfolio: Luke Dowding – UX/UI Designer

Introduction

My portfolio was designed to simply show my work in a short and sweet manner with a quick glimpse into the process, problems and solutions.

Portfolio update is currently in progress.

Project: App Signup & Onboarding

Challenges & Problems

Some of the biggest challenges with this design where limitation to the product or specific ideas which I do not feel where good for the user being used. But as with most things we do the best with what we have, that's part of UX Design. So the challenge for me here was designing a flow that made sense to the user while having the requirement to go to the home page and use a popup to get the user back into the flow. The flow starts like this, Welcome page, Create account page, Homepage. The homepage was the hub for selecting media and discovering new entertainment. The user would default to a trial of samples, so 30-second clips of music for example unless they chose a media type and entered a Credit-Card. Once the user hits that home page they get a popup, which welcomed the user and asked them to select a membership to get the full 30 days free trial. You had the option to say "Not Now" or Continue to the Membership selection page. The membership page was a challenge because it had so many options in such a small space and needed to be as easy to understand as possible. The Membership selection page had to offer the Full Membership for All Media types as well as, Music, Games, Movies, Books, Audiobooks and the Family plan which had 4 different levels. The next page was the Credit- Card followed by a Receipt page before leading back to the Homepage where you could start enjoying the full content.

My Role & Solutions

My role was to design each step of this onboarding signup flow, with that Homepage popup requirement. My main focus for this flow was simplicity and consistency. The Create account page has two groups of options, the social media buttons and the email registration below. It is subtle but the grouping is easy enough to know it is not part of the same thing, it was also important to show loading icons or grey-out the continue button if the process was loading. If you look a the flow you can see the green confirm button is always in the same place, so is the title and other elements. This is important to keep the users focused on the content that is changing and keeps them moving forward. The Membership table went through about 4 different design ideas and variations before we settled on the 2 options drop-down within the design. This made it clear we have lots of options to suit your needs but also that they were grouped for clarity and so you can see it all on one screen. Credit-Card also had some neat validation where if you start to type in your Credit-Card we would show the logo icon of the type of card, this served as nice confirmation things where going well. We also incorporated green lock icon, which we tested and it proved to increase conversions based on the feeling it was secure and safe. The receipt page was the final page before we let them loose, so it was a good place to welcome them again, as well as let them know some of our features, content and remind them of the good deal they just got.

Reflection

There was a lot of limitations and requirements for this design process, as well as the difference in design for iOS and Android was a learning curve but I learned a lot. Making users feel confident in their decision to buy and safe will always increase the conversion rate. The overall conversion rate on the new flow was more than double that of the old flow, so the design was a huge sucess.

Project: App Welcome Screen Intro

Challenges & Problems

Before the redesign of the welcome screen, the first thing you would see when you downloaded the app was login/signup buttons with a singular image background of a girl wearing headphones enjoying some music. It didn't look that bad but it never served a purpose and never answered any questions users would have. We saw from statistics that people would land on this screen, not understand what the app is or what they were signing up for and leave. The app was an entertainment app for people who enjoy music, movies, audiobooks, books and games. Our users were people who were new to the idea of subscription and streaming services or current users of apps like Netflix, Audible, Scribd and Spotify. People downloading the app could be coming from the app store search, a blog post, Facebook or Google Ad, word of mouth, radio ad and many more avenues. To reduce the drop rate on this screen I had to design something to communicate our service to a wide possibility of user brand awareness to our product and convince them that signing up and trying the app was a good idea. One of the biggest challenges for our product over the years was selling all these media types in one package, compared to Netflix who just do movies or Spotify who only have music.

My Role & Solutions

Firstly I conducted research to see what our competitors are doing and how we can improve upon what they have. The main things we want our users to do is to understand what our product is, then they can signup or if they are existing users log in. One of the key design decisions made was to let them know that we had a free trial for the first month, instead of writing this into the main copy we went in a different direction. The signup button would double up as a powerful CTA with: "Start Your Free Month", which gave us room to inform the users about our service more with the main screen copy. We had tested this and other copy variations hundreds of times via landing pages and other signup flows and this always came out on top. Because we wanted to keep the text down to a minimum we opted for slides with a progression indicator, the sliders were optional but clearly there for those who needed more information. Each slide would represent a part of our product which was a unique offering in the market.

Reflection

The result of this new design resulted in a big increase in people moving onto the registration form and ultimately taking the free trial. This product has always been a challenge to sell because it's an all-in-one product but giving the users who are unaware of the brand the slider with more details really helped their confidence. Using your CTA as a powerful sales convincer is a good strategy and it goes to show that copy should be a part of UX Design as early as it can be for a successful design.

Project: Game Inventory UX/UI Improvement

Challenges & Problems

The game Guild Wars 2 is a vast MMORPG game I used to play a lot of, nowadays I'd be lucky to get an hour or two in. But in one of their recent updates, they added keys to the inventory wallet, this was a big deal! Because keys always used to take up valuable inventory place, the wallet was reserved for your hundreds of various currencies. As good as this change was because it freed up a lot of inventory space it added quite a cumbersome experience to the users when looking for these keys. It wasn't until they added even more stuff into the wallet that the poor experience was noticed. For example, if I wanted to know how many of a specific key I had, I would press "I" for the inventory, click the wallet icon in the bottom left when I would be presented with a huge scrolling list of all kinds of currencies, items, keys and who knows what else. You can then filter the results with a drop down bar at the top to see just keys, dungeons currencies, map currencies, etc. Not only is this pretty cumbersome and annoying (a lot of clicks) in the heat of a battle or trying to control 2 things at once while looking for your keys is a horrible experience and downright frustrating.

My Role & Solutions

The steps to get the information you need had to be a lot quicker. After looking at the current interface and sketching out a few ideas for simplifying the process I figured it would be good to move that original drop-down menu straight onto the bottom of the inventory window. After some initial mockups, the idea of a dropdown wasn't looking very optimal for a good and fast experience. So moving the drop-down menu items onto the actual bottom of the inventory, next to the wallet icon looked like a good solution. I used well-known icons to show what each item would be, as most users in the game would be very used to the icons and what they mean. The end result meant that when you wanted to look at your keys quickly, we managed to go from a 4 click process to a 2 click process, improving the user experience and making life that little bit easier. 

Reflection

This was a fun challenge because I experienced the frustration of myself, I understood the user needs completely because I was that user. Getting into the mind of the user is so critical to a successful product, this is a good reminder to me that user research is a huge asset to any design process.

Project: My Own UX Design Portfolio

Challenges & Problems

The current portfolio does now show off my UX Design skills, process or thought and planning behind the final product. As my expected users would be potential employers, clients and recruiters. It is very important to show my UX Design process and not just a pretty picture. I needed to design room to talk and express the problems, challenges, solutions and my role in that project. I also understand that my typical users are probably in a rush and don't have time to go through pages of my portfolio, so it has to be lightweight, easy to read and simple.

My Role & Solutions

First, I need to understand what my users want to see from a UX Design portfolio. Then I need to focus on my goals to figure out what I want to show them. I know my users want to see my understanding of user needs, so it has to meet their needs otherwise it would be a bit ironic as a UX Designer to have a crap portfolio experience. I decided to keep it all on one page, short and sweet for people who don't have a lot of time to look at portfolios. The main point here is to show my working and process, not the fancy images, I have a Dribbble account for that. But sometimes two images won't cut it, so I need to have the ability to link out to more images if needed. A small button right under the two default images was a good spot.

Reflection

This is a pretty good experiment for a UX Designer, designing the very thing you need to show off your designs. It’s not something a UX Designer should struggle with if you apply your normal process to your own portfolio. I see a lot of designers go a bit crazy on their own websites, using weird interactions and poor usability. Just keep it simple, focus on what your users want to see, then make it as pretty as possible.

Dribbble Shots: