View the concept here.

iPhone X preview of the Store page

Note: This is not done by the official Valve team. This is just a concept by me.

Foreword

I would like to thank Rahul Harikumar, Anto Jose, Kerala Designers Collaborative, Anand A., Jeffy Zachariah, Kaushal P. Mirji, Aravind Babu Rajan, Navaneeth Ms, Jerin John for helping me with this project for, without their critical feedback and suggestions, I wouldn’t be able to complete this project.

The Problem

Being an avid platform user myself, the app, in my opinion, has an outdated user interface. I felt that they didn’t put much thought into making the application.

After doing some research, I found out that it was not just me but other users felt the same too. There were lots of bugs and issues.

Source: Google Play

In most of the reviews I found, the common requests/issues were:

  1. It was time for Steam to release a new interface design update.

2. Move away from web application style.

3. Bring mobile-exclusive features.

4. Make options and menus that were hard to reach more accessible than keeping them hidden away in other options.

5. Current UI is outdated and the is bad.

Users & Audience

The target users of this app are the people who use Steam!

From a little bit of research, I found out the average age was 38 and the age group was anywhere from 13–55.

Moving from the Steam desktop application environment to a new mobile environment meant people had to learn and adapt to the latter.

Right now, the Steam app uses a web-like application style and I totally understand why they did that — same across all platforms. But what I believe would be better is — make an application from ground-up closely following even the tiniest details from the Steam desktop platform because the desktop app is the main userbase. That is why I stuck to the official Steam design guidelines because I wanted the user to be consistent.

Design Process

The design process was quite simple. I wanted user feedback every step of the way, just to make sure I was on the right path.

Source: My whiteboard

When/Why do people use the Steam Mobile app?

1. To get Steam Guard Code for logging into the computer

2. Chatting with Steam friends

3. Check for sales

4. Notifications alerting the user to accept trade/friends requests

5. Other notifications like comments on the profile, etc.

With this information, I was able to prioritize the options users needed the most and make a user an interface flow diagram.

User Interface flow diagram

A challenge I faced was when making this project, I hit a lot of design limitations (like following a color scheme). I found out that the color scheme used on their official website was confusing. So, I had to pick the best color among similar ones. Before starting work on the mockups, I made a mood board that contained core principles and ideas to remind me what I was doing whenever I was confused.

Source: My whiteboard

Design

Before working on the layouts, I had to fix on certain guidelines like colors, box style and typeface.

Navigation Bar rough sketch and behaviour details on click | Source: My book
Final Concept — Navigation Bar
Tab Bar rough sketch and behaviour details on click | Source: My book
FInal Concept -Tab Bar

You can see how I implemented the idle/active behavior with a slight color change on clicking — to show the current page.

Now, the reason I put Guard as the landing page was because of the reason that almost 95% of the people who launch the app use it to get the Steam Guard code for logging into the computer. I also decided to show main notification on the same Guard Page — comments, new items in inventory, invites, and gifts. The activity monitor — remote music player and also current game being played, friends activity will be shown on the landing page.

Why I didn’t go for the hamburger style navigation was mainly because of two reasons:

  1. As a menu solely for navigation, it should’nt obstruct the content the user is viewing. It just takes up 3/4th of the screen which was in opinion, not a good experience. Either make use of the whole screen, or don’t.
  2. I chose to use the tab bar because this was more suiting for this application. There were too many options in the Steam app and people complained about how they were hidden away in other menus. Bringing a tab menu takes this out of the equation. Now, content was displayed in a You can see how I implemented the idle/active behaviour with a slight color change on clicking — to show the current page.

Now, the reason I put Guard as the landing page was because of the reason that almost 95% of the people who launch the app use it to get the Steam Guard code for logging into the computer. I also decided to show main notification on the same Guard Page — comments, new items in inventory, invites and gifts. The activity monitor — remote music player and also current game, friends activity will be shown on the landing page.

I did a bit of searching online to find their brand colors but couldn’t. So, I took a screenshot of the Steam Store webpage and started deriving the color codes using a macOS tool called Digital Color Meter.

Screenshot of the Steam Store webpage

I wrote down the colors and added it to the Photoshop color palette.

The reason I picked Apple San Fransico as the typeface was that of the easy readablity at all sizes and since I was designing for iPhones, it goes perfectly with the iOS family. The font styles I used were Regular, Semi-bold, and Medium.

A peculiar thing I noticed while going through their website was their use of conventional rectangle box rather than sticking with the trendy round rectangles.

Sign In form — Offical Steam website

I worked on the wireframes with the information I collected and analysed.

Wireframes — Sketch App

Start Screen

Most of the application on iOS placed their logo at centre of the start screen — for a perfect symmetry. But, I felt it as a strain to move my eyes and look at the centre. It was more like a voluntary action; forcing my eyes to look at the centre.

Source: Google

I placed the logo at eye-level which is the first thing they see without any issue when they open up the application.

Source: My book
Rough sketch > Wireframe > Final
My final concept vs. Official start screen

As simple it may look; to get to the final image concept, I had to do a lot of revisions taking a lot of feedback into consideration.

Early animated version of the start screen

Let’s take a look at this (early) version for an example. When I made this one, I thought it was perfect; the background was good too, being the official one which was used almost everywhere on their website.

But after some thinking and some bad feedback, I decided to make it more simpler.

Why?

Let’s take a look at the bigger picture. Almost everyone who uses Steam uses the Steam Mobile and not everyone has good phones.

Including an animation is jsut gonna make the start time slower.

When the Steam link app was released, I was surprised to find them following the same approach — a simpler start screen.

Welcome Screen

Rather than jumping to the Sign In screen after the Start screen was a bit uninviting as a first time user. I wanted users to know that there was a major redesign in place to enhance the whole experience and that they were officialy welcomed.

Source: My book

I had a clear idea on how the welcome screen should like — from placement to the original “Continue” box shape.

Final Concept — Welcome Page

Note: Since, Steam Mobile currently does’nt have a welcome screen, I have nothing to compare this to.

Giving a plain background to this would make it boring and dull. When users saw this screen, I wanted them to feel like/make aware that they were part of the biggest gaming platform on this universe. So, I decided to add a Steam Store image listing all the popular games. Not too visible but at the same time, not the alternative.

After they click on continue, it will take them on a small journey that introduced them to the new features and changes.

Sign In

This was one hard screen to get right. It went through a lot of little revisions based on user feedback.

Source: My book

Getting the colors right were one of the hardest challenged I faced when making this screen.

Some of the earlier versions

The first one had a moving background and was too color-intense. The third one was okay but a user complained that the text visiblity was very low. Second one was the only one I liked among the three, so I decided to improve upon it.

Animated screen of an earlier version

There were so many things wrong with this one. At the time I made it, it looked perfectly alright! But as days passed, the design started to look more and more bad (to me).

I knew I wanted to create designs that would age well with time rather than going out of fashion too soon.

The main problem with this version was that there were so many things happening at once — behavioural color changes.

I drew inspiration from the Google Sign In form. How they displayed all text in a linear way, all left-aligned looked much more clean.

Gmail Login Form

After many revisions, I finalised on this one with the help of some good feedback.

Final Concept — Sign In Page

User Feedback: This was a visual treat for the eyes! Perfect colors and placement.

I had not put the Steam logo on the initial version. But, then I felt that adding the logo just makes it more credible and a proof of security. The logo is not overpowering, but its there. I brought down the opacity to 75%.

Official Steam Mobile vs Desktop app vs My final concept

“Sign In” and “to an existing Steam account” are both in the Regular font. I did this because these two had to be read in a flow rather than reading with a pause in between. Working on this screen’s animation was actually fun. This time, I stuck to less color changes in animation. Less is more! 🙂

Idle: #9099a1

On click: #ffffff — white

Animated final concept

Store

The current (official) store page was uninviting in my opinion and also for many others. It was not pleasant and the colors were dull and more importantly, not optimised for mobile, following the same old webapp style.

Offical Steam Store page

How could I make this better? There was no way I was going to tweak this design to make it look better. I had to start from ground-up but closely following the Steam guidelines.

Official Steam Store desktop applicaiton

One thing I liked about the above screen was how they prioritised content and also seamlessly adding the price box and other details to the content (image). It did’nt feel out of place and that’s the beauty!

I drew inspiration from the Spotify mobile app. It displayed content in the best way possible. The colors were not too bright but perfect; in perfect harmony.

Spotify mobile app
Source: My book
Early version

This was one of the earlier version which I stopped half way between. It was too similar to the Apple App Store experience. The colors felt out of place too.

Considering the real estate, I wanted to display more items in a more intuitive way. This one card just occupied most of the screen and users had to to scroll way down to veiw the highlighted content.

Earlier version with small sized text

Another version which was close to final had an issue — the text was not readable at all as pointed out by a user which I gave for review.

Now, why did I make the text small? It was intentional actually; I wanted all the text in the page to be of same size (consistency) which forced me to reduce the size of the highlighted tile to size of the text from the small tile.

Happy to be proved wrong!

Animated final concept

This just uses the space available more efficiently. Just the important contents are displayed straight away rather than filling up the whole page with less important text. If users want to know more, they can just tap a tile and get it.

This is something called Progressive Disclosure.

Capital heading for dispalying special content — Official Steam

I noticed how they used Capital heading to show special content. I incorporated the same into my design.

Rough sketch > Wireframe > Final Concept

I gave this for user review, and the feedback was a positive response!

Now, lets do a comparison with the official version.

Official vs My concept

Like I pointed out earlier, the official version was following a webapp style, not properly optimised for mobile.

Final concept — Steam Store

Inventory

Before starting, lets take a look at the official design, shall we?

Offical Steam mobile inventory page

Right of the bat, as a user pointed out — it looked dull and uninviting. Not to mention, the webapp style. All the options are just scattered throughout the screen; not properly placed. Colors looks confusing too.

Source: My book

The initial versions are too bad to show here.

Concerned Viewer: But this is a , aren’t you supposed to show everything?

I actually deleted it, a couple of days after making it. Too bad 😉

Official vs Final concept
Upclose -an item tile

There is a color border around every tile showing the item quality. Every type of item has a specific color in Steam. There are different quality items — Rare, Common, Uncommon, etc.

By adding that color border and matching the text “Arcana” with the quality color — to categorise easily and users can easily find out which item is a rare one by just looking at the colors and identifiying.

Final Concept — Inventory

Conclusion

To be honest, writing the case study was harder than making the concept itself and since, this was my first case study I included everything rather than refining out specific things. Sorry for that!

Overall, the designs were well recieved by everyone. This was part of a learning process for me. I never thought I would reach this point because everyday I woke up and thought about how I could make the design better — never though I would see an end to that!

Making a small change caused some things to go out of place which I had to fix. I have enhanced myself in understanding the broad spectrum of design, thinking about the limitations and asking right questions. The most important lesson I learned was to analyse things from an objective point of view; you be the judge first. Asking yourself the right questions can significantly enhance the creative process.

I’ll look back the designs for this project soon with a fresh set of eyes as nothing is ever perfect. There is always room for improvement.

Thank you all for reading!

Source: Google

View the concept here.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here