A one day project in-which my colleague and myself had to choose an existing app and re-design four frames following an heuristic analysis. We choose the Steam iOS App. A video game platform for purchasing, playing, discussing and creating video games

'SHOP'

We re-designed the the nav bar icons as we felt the previous ones were not representative of their function. We also removed the last icon, the burger menu and made a totally new icon/page, 'Chat' (I will cover that later)

We found that the current shop icon was confusing, it felt like a pen or an arrow. Only after carefully inspecting it we saw it was a price tag. If it takes this amount of time to understand an icon then the icon isnt user friendly and needs to change. So we decided on a shopping cart.

Other changes to the 'SHOP' page were as follows;

1. Profile image and shape / position
2. Bigger icons
3. Removed the Steam word from the search bar
4. More breathing space for images

'STEAM GUARD'

We kept the colours of the app the same as we felt it worked well as a design decision based on the users demographic.

The existing app needed a more up to date UI so we gave all the boxes/frames a corner radius. Looking at the competitors we felt that adding the radius lends the app to a more personal and safer notion. It brakes up the hard geometric lines and gives a much more inviting feeling.

One of the biggest issues for us was the misleading and confusing avatar image and the green tick. Both of these graphics had no explanation and were not hyperlinks. Is the image of the women an avatar? Is that the current location of the user? Is this a video game character? And what does the green tick mean? There is no call to action, as a user we need to understand instantly what is being asked of us. So we decided to remove it entirely and allow the user to understand the process at a later stage.

PROFILE PAGE

When the user clicks on the current profile image they are redirected to another page. We found this to be inflexible and decided that a side menu which comes in from the left as an overlay is a much more user centred approach. We also removed any unnecessary UI, instead adding a new feature where the user can change their current state, from Online,Away,Do not disturb and Offline.

We also moved the notifications from the burger menu tab to the profile page. When the user gets a new notification a green bell icon appears next to their profile image. You can also access and read them here.

Other changes to the 'PROFILE' page were as follows;

1. Modern feel and more user friendly
2. Small touches of colour to personalise the UI

CHAT Burger menu icon change to Chat icon Removed shortcuts / content Prioritize the ‘Chat’ function. Designed a ‘live chat’ feature. Can now be used to engage with friends who are playing / microphone function

You can see from the screenshot above just the tip of the iceberg how complicated the app is. We had the feeling that the app was a sort of miniature version of the website / program. As if the developers had tried to condense all that information into a tiny space. We felt it was just too overwhelming and complicated.

Heuristic analysis With a heuristic analysis we could really brake down section by section which areas of the app were cosmetic issues, minor / major usability issues and those which were CATASTROPHIC! Heuristics gives you a framework for this analysis.The two major issues we had were related to: Consistency and standards & Flexibility and efficiency of use.

I find it really useful to always make quick hand drawn wireframes before doing anything in Figma. It takes minutes and I can solve any issues quickly, cheaply and without being overly attached to the design. This is vital. You need to be prepared to let go of your ideas if they are bad ideas. It also lets my team mate and I communicate visually what we are thinking. After we both draw our frames we combined the elements which worked and removed the elements that didn't.