DeviantArt profile page redesign
UX // Design // Mobile // 2019
What is DeviantArt?
DeviantArt is the world's largest online social community for artists and art enthusiasts, allowing people to connect through the creation and sharing of art.
Challenges and problems
The DeviantArt art profile is alive for more than 18 years and didn't change a lot in the term in Ux and design over the years.
New features where added and add more complexity to the profile.
Layout and hierarchy (too much customization)
Complex adding and removing sections
Outdated design (not if you like the retro look)
CSS customization - designer nightmare, users can do what they want with the page if they know how to code
Profile migration- what to do with the current users and legacy.
What is out there?
I stared my process by checking what is out there and see how they present the user profile to visitors and profile owner view.
+ Different approaches to profile editing.
Define the goal and feature list for phase one
Worked closely with the product manager to define the goal of this redesign.
What are the must-have features, what our success metrics and what is the scope.
then we estimate how much time will take the UX team from wireframes to handover to development.
After approval from management and Dev, we were good to go 🎉
Allow migration of old users content
Easy to use and understand
Increase overall profile engagement (Watch/ notes/ Deviations views)
Art in the center
Allow flexibility and customization (but with rules)
Our solution was to create a fluid layout with some fixed sections (hero image, stats and about me) We decided to have customizable two columns layout when the more visual items on the left and the textual items on the right.
This layout will allow us to migrate all the existing content from the old site and give us room to grow as a platform.
After approving the wireframe with Key stakeholder we moved to solve how to edit this page. I came up with two solutions:
going to a model that allows you to add/remove/re-order sections
Editing on the page itself, allowing users to add a relevant section in the correct location edit and reorder them
We did a prototype of the two options and in house usability.
We came to a conclusion that 2nd option - on page editing works much better
When diving into a project so big we know that we have to create a design system right from the start, this will allow us to be consistent deliver faster and make changes in the feature. So we put a lot of effort into building a design system right from the start.
Final design- Dark&Lights themes
(Profile part at 1:16)
Getting User Feedback
After opening the new profile page we got tons of users feedbacks on different platforms.
We conducted user interviews
Why gathered user feedback from a "give us feedback" form
Getting users to feedback through site comments on changes log
Seeing users uploading videos to youtube regarding the change
Following twitter tweets regarding the change
We are gathering all feedback from the community and keeping improving the site to match there needs.
Making changes based on Feedback
One of the biggest users' concerns was regarding profile customizations and the lack of custom box - custom box allows any user with a basic understanding of Html and CSS to do whatever he wants with is profile.
From the user's point of view, this allows him to express himself in the best possible way.
From the platform point of view, this damages our site structure, design, hierarchy, and the experience the user visitor is getting when he needs to learn a new profile layout every time.
Introducing New Custom Box
No Html/ Css skill required :)
this product led by me to find a solution to users to express themself without knowing how to code.
We research the custom box users needs to find a suitable solution that will allow them to create a custom box using a simple WYSIWYG editor.
Some users responses to the new custom box
Thank for watching