Take a (well informed) cookie!

I use cookies to look at the way you use my website (and improve it). Take a look at my short, easy to read Privacy page for more info.
I consent to your cookies
Back to cases

Case Study

Mobile App Redesign

Redesigning The Apps

The ArtStation mobile apps let users continue their experience of the platform across devices. While the apps and website had a similar feature set, the experience didn’t feel the same across the board. The bulky UI library also made releasing new features a long and arduous process.
We overhauled our approach to designing the apps, implemented new processes for decision making, and integrated analytics so we could make informed choices with more data. To get users on-board with the redesign we included some new, highly requested features and reworked high-traffic screens within the release.

Role

Product Management, UX Research, UX & UI Design, Analytics Integration

Team

Ayrat Safiullin, Dmitry Kosarev - Android Development
Pavel Feklistov, Oleg Pavlichenkov - iOS Development
Chingiz Halikov - QA

Process & Products

Restructuring
Research
Feature Redesign
Results

Problems

Slow development / feature release

No design system
or process
Kept rebuilding the same UI elements
This slowed down developers and didn’t allow an agile release cycle.

Inconsistent
interfaces

Multiple iterations of the same UI component
Too much variety in similar-action user-flows
Users had to “rediscover” how to use the app all the time.

No way to track
release success

Bare-bones Google Analytics setup
No data to make decisions before & after releases
Stuck trying to figure out feature success from qualitative feedback.

Solutions

If we create a structured design system, UI kit, and development process we can provide users with new features faster. If we integrate good analytics, we can improve those features using data instead of conjecture.

UI Kit & Design Process

Creating a UI kit that matched what I had in my design software with what was in the developers’ code was a top priority.

We went through the apps screen by screen, documenting every iteration of a bar, button, field, etc. Once we had audited everything, we went to work unifying and rebuilding elements. The goal was to have “one of each” with different behavior and display options to cover every possible use case.
How did we know if we had a good enough reason to add or change an element? We talked about it.

Platform native components

Speaking of those elements, we decided that the best way to keep the code streamlined and the user experience consistent was to follow platform-specific guidelines (Google’s Material Design and Apple’s Human Interface Guidelines) unless we really had a reason to change something.

iOS “More” Menu

Android “More” Menu

Advanced analytics

So we released a feature! Awesome! Now how do we know if users like it? I guess we just ask them.
‍
How do we know how many projects a user opens before liking one? We don't.
‍
We were tired of relying on biased opinions and incomplete data to direct our development, so we overhauled our Google Analytics setup. We can now track every screen view, button press, and upload - and use this information to guide our product decisions.

Fix / Improve high-value features

When restructuring our internal processes for efficiency we knew that faster feature delivery would make our users happy, but we also wanted to delight them within the context of this new release.
‍
We knew that a bunch of our in-app features were not living up to the ArtStation web experience, so we did some research, made some spreadsheets, and prioritized getting the highest value features built.

Here's a run-through of what we did and how we did it:

Pre-redesign user research

We jumped on calls with users to find out which features they want added and improved, then confirmed that qualitative data with a broader survey and analytics data.

1. Defining methods and users

2. Discovery Interviews

3. Validation by Survey

Choosing a user type

Now, the seemingly intuitive thing to do would be to target active app users, but we wanted to include the detractors as well. We already had plenty of feedback from those active users via direct comments, play/app store reviews, and messages sent to our support portal.
‍
We wanted to find out why people weren’t downloading the app.Or if they were downloading the app and then deleting it, what were we doing wrong?

Active User

Currently use the app.
‍
These users could tell us their basic likes/dislikes and which features they want added or improved.

Ex-User

Previously used or tried to use the app but stopped using it.
‍
These users could tell us what about the app was so unfavorable that they left.

Non-User

Use the website but have never downloaded the app.
‍
These users could tell us why they’ve never tried it, what motivation is missing.
Important distinction: “Ex-users” and “non-users” implies that they do not use the ArtStation mobile apps but DO use the website.

Interviews

We sent out a public announcement to all ArtStation users on the website asking them to participate in an interview. We then sorted each participant into one of three user types (outlined in the block above) by the answers they gave on the call appointment form (like “When was the last time you used the app?”)

In our interviews we wanted to find out:

1. What they used the app for

Were they using it primarily for entertainment - viewing artwork, reading blog posts? Or were they posting, commenting, and interacting in other ways?

2. Which features they prioritized

Which existing features did they think were integral to the app experience? Which web features, missing from the app, should be added next? Would they really ever buy digital or physical goods from the app? Do they ever post artwork from the app?

3. If they weren’t using the app - why not?

Do we market the app enough on the ArtStation website? Is onboarding too difficult (did we need to redesign our sign in)? Are there important web features missing?
After the interviews, we went through our transcripts and made “issue groups”, sorted by frequency (how often a user mentioned this type of issue). Here are a few of them:
Confusing/uncomfortable interface or process
Need to add a web feature (challenges, blogs, etc.)
Technical issue
(speed, bugs, etc.)

Survey

After conducting our interviews and creating a preliminary feature/fix list, we wanted to confirm our findings across a wider sample size of users.
‍
We sent out a survey asking users how and when they used the apps along with open form questions about which features they would prioritize.

Results: Prioritized feature list

Using a prioritization matrix (a frankensteined RICE scoring, severity rating, and quadrant ranking system with some adaptation), we scored each feature and fix request, calculated the results, and used that list as our roadmap.
Reach
How many users will this affect?
Is it exclusively a Pro account feature?
Will it only be used by marketplace sellers?
Impact
How often will this affect each user?
Is it a one-time issue like creating an account or do they encounter it every day?
Value
How much will this affect each user?
How many people have asked for/complained about this feature?
Future-proofing
If we build/fix this right now will it save time later?
This is usually a question for developers and has to do with architecture, code quality, etc.
Effort
How long will this take us to build?
Calculated in Sprints (two-week periods of pre-planned tasks)

What we built

A better activity feed

The activity feed lets users discover new art based on the content their network is interacting with. The feed is a chronological list of “events”, - what the users you follow publish, like, comment on, etc.
‍
The existing activity feed included a description and comment section under every post. The assumption was - if users see other users engaging with content, they are more likely to interact with it themselves. This wasn’t happening.
‍
Users didn’t spend much time on the feed at all, because it was overcrowded with useless information that took up more space than the primary content - images. ArtStation is a visual-first platform, and this interface was not holding true to that.

Old Activity Feed

New Activity Feed

To give artwork more room on the screen, we slimmed down the top header and moved most non-visual info about the project (description and comment section) to the project page itself.

New asset carousel

Simplifying the activity feed was just one step in the right direction,
we still had issues with how some projects were displayed on the feed.
A subset of our users (mainly those who created character art) kept bringing up an issue.
When creating project thumbnails for the feed, we automatically cropped to the center of an image.
This resulted in some awkward limb amputations and decapitations.
We went through a few design iterations while brainstorming a fix for this:

1st Attempt
Single Img Thumbnail

Show user-selected thumbnail in natural aspect ratio with number of assets overlay.
Less distracting but users had to click through to project to see all assets.

2nd Attempt
Stepper Carousel

Show all project assets in incremental carousel, center image on increment.
Either had to cut off edges of wider assets or resize the element (and everything else on the screen) to retain natural aspect ratio.

Final Design Scroll Carousel

Show all project assets inline. Carousel stops where user stops scrolling.
Allowed users to quickly scroll through entire project, retained natural aspect ratios without cropping.

Final Carousel

Updated collections

In our survey users kept asking for an “Add to Collection” button on the feed.
‍
We checked our analytics data and were surprised to learn that collections were a very popular feature on the apps.
‍
We integrated “Add to Collection” as an "activity feed action", reworked the old collections UI, and added the option to create private collections.

Sorted notifications

Notifications, like the activity feed, work though an “event system” so each time a user you follow interacts with content or any user interacts with your account it is shown to you in chronological order.
‍
The app version presented an unsorted list of events, but users kept asking for the notifications to be separated by type (like on web) so they don’t have to dig through a mountain of project likes to see if anyone followed them.

Re-prioritized navigation

In our research, we found out that users use the ArtStation website and mobile app in very different ways. Mainly, the website is for building a professional portfolio, while the app is for entertainment and communication.

Results

For Users

Redesigns are infamous for inciting outrage in a product's existing user base, so although our UX&UI changes were small and intentional we were still worried.
‍
As soon as the updated apps went live we were inundated with positive feedback.Our Activity, Browse, and Profile screen engagement grew significantly and we saw a meaningful spike in Collections use.
‍
The "big-ticket" features we released with the redesign or shortly after (new feed, blogs) were well received and probably contributed to the positive reception of the redesign (just like we'd planned).
‍
Important: The version of the app design currently on the stores is not mine. My design was up from September 2019 to April 2020!

For the dev team

The app redesign brought about radical changes in the way our team communicated. The collaborative methods we used to restructure the app helped us "speak the same language" - we all knew which component did what and how it was supposed to work.
‍
We spent less time creating new components, debating user intent, and trying to correct misunderstood design requirements. We cut our development time down to a third of what it was (and released blogs on Android in 1 WEEK!)

What i learned

With this project I fell in love with mobile design. Having limited screen space is a UI challenge that encourages intense prioritization. Trying to tweak existing user-flows without disrupting comfortable UX patterns (so users don't have to re-learn your app) is an awesome exercise in empathetic design.
‍
I had never designed such a complex product across platforms. Leaning into native patterns allowed me to better understand how and why iOS and Android are so different.
‍
From a managerial standpoint, undertaking this redesign was a learning experience. We made decisions that we knew were right, even when they went against the guidelines of how we were "supposed to" work (we broke A LOT of Scrum rules while building this thing). Everything was for the greater good of the team and the product. I think it paid off.
‍
I love this team and am grateful to have had the opportunity to work with such motivated, talented, and empathetic developers. ♥
Asset credit: Jaemin Kim, Scott Gadille, Michal Motulewicz, Florent Auguy, Tomas Honz, Benjamin Bardou, Ivan Solyaev, DOFRESH, Riyahd Cassiem, Jan Urschel

Next Case

Checkout

 Back to Project Index