I started re-designing the Steam iOS app for fun

by jf-reddit. Posted on Jun 30, 2020    256    33


I work as an iOS software engineer, and I'm trying to gain some experience into UI design.

The Steam app on iOS, while encouraged for some tasks (e.g. Steam Guard) is in need of some love to get it to feel really great to use.

So I set out to try re-designing it to fit the iOS style while still feeling distinctly "Steam."

I haven't done every single part of the app, but I've done enough to get a feel for the vibe, and I'm interested to see what comments / criticism the community might have.

Have a look and let me know!

Log in

I wanted to go for a simple lock screen and log in screen, with not too much embellishment. I envisioned the top part having a rotating video of different games on it.

Steam Guard

The thing that really got me to start this project was the flow for setting up Steam guard. I tried to go for something easy to follow with a consistent style that guides you through the process.

​

Here's the normal Steam Guard screen. I merged the Steam Guard and the community market confirmations screens into one tab, since they both have a similar purpose and fit well together.

For the confirmations screen, I tried to solve some of the pain points people experience.for example, instead of having to tap to check everything in the list, there's a \"select all\" button at the top, handy for when you're selling tons and tons of trading cards!

Store

For the store front, I again tried to keep the style of the regular Steam Store, while still giving it that iOS flair. The color for the \"special offer\" badge, for example, matches the one used on the desktop app. Having the search bar front and center in the usual place was important to me as well, as it allows you to quickly look up something on the go. Perfect for the last day of the sales!

Library

I love that the Library tab on the desktop app evokes that \"real game case\" vibe, so I tried to replicate that in the app as well. The app can also directly link into the Steam Link app, so you can get straight into any games you might have installed on your PC. Technically this might break App Store guidelines, but I don't care!

That's all I've done for now, the next ones I will do will probably be the Store page for an individual app and the friends list.

Please let me know what you think! Thanks!


Comments

DankMemer1018

Take this to steam

BarT131

This is just awesome

BeGe01

this is dope lmao

GucciDonger

Valve should hire you. The original IOS app is dog sht. You cant even change your profile picture lol

Shadow_hive 1

Valve, hire this guy

Rabbit_butt 1

Maybe steam can actually use this and change their app, cuz their kinda sucks. This looks awesome

NEO2889 1

I fucking love it lmao

12eriks 1

Steam app is terrible. So just send them Your work and maybe they will hire You and tham You can make app that nice like in pics.

AndaPlays 1

Valve should just hire you.

Daniferd 1

That's probably his plan.

HelloThere00F 1

They gotta hire u for the mobile redesign

Killbro 1

i mean wow

it’s literally just like the iOS app store (which is a very very good thing btw)

they should hire u ngl

PrimaCora 1

You put Valve to shame

RySundae 1

This is really good! The current app looks dated and clunky, but nonetheless runs fine. Yours however looks really great and modern. Hope you get hired or sumthn. Kudos!

98Thunder98 1

It's a shame there is no alternate app, like apollo for reddit...

sdtchu 1

I didn’t know I needed this so much

aniforprez 2

I think of all the redesigns I've seen, this one is most faithful to the actual functions of the app, closest to the website design and is actually functional on top of looking pretty decent. Great job!

  jf-reddit 2

Thanks!

That’s really what I was going for – a lot of these concepts go for fancy aesthetics for the sake of aesthetics, whereas I tried to go for something that would actually make sense in context.

Plus being an iOS developer myself, I know the boundaries of the OS and what is and isn’t possible.

aniforprez 2

Yeah I can definitely see the developer perspective on this, especially since instead of using random assets for the games it seems to me you actually pulled some assets from Steam for the box art and the slideshows on the store page You've actually thought about purposing existing assets instead of creating concepts

33Mastermine 2

Take my upvote this is remarkable work. I hate clicking on the Steam app just because of how clunky it feels. This looks way more fluid and mobile compatible.

CrispyPie5222 2

your concept is top notch! The only thing I would change is the store page. idk what it is but it just doesn’t feel like it really fits the steam design. imo i’d keep it as close to the original app but just clean it up/optimize it more. this is just my opinion and everything else about the app is amazing

FireshockFiZe 2

God this looks fucking good! Great job!

Gomes3321 2

It's like, perfect

freedai 2

Wow nice job

Spyromaniac31 7

Nice work! I do UI design in my spare time and I was thinking of doing a Steam iOS design. Your concept is great!

lemanifij 4

It looks fantastic and far, far better than the current app. Great job!

soffagrisen2 20

The current ios app is god awful

Wish they could just make a pure authenticator app now that Steam Chat is a separate app

CottonCandyShork 4

> Wish they could just make a pure authenticator app now that Steam Chat is a separate app.

They already announced this is their plan.

noobatanything 5

You have a link of that with more details?

Houderebaese 55

Nice

The official app is horrible. It usually takes me five minutes to find my wishlist. It’s a usability nightmare

  jf-reddit 34

The official app isn’t really an “App”, it’s mainly just a web browser for the normal steam website.

Since the website is designed around mouse pointer input, it can – as you say – lead to navigation issues on a touch screen.

V3rtigo44 62

You looking for a job? Damn.