© 2014 by Roi Himan. Proudly created with Wix.com

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. 

 

Main issues:

  • 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 🎉

Profile goals

  • 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)

Starting Wireframes 

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.

Edit Mode

After approving the wireframe with Key stakeholder we moved to solve how to edit this page. I came up with two solutions:

  1.  going to a model that allows you to add/remove/re-order sections

  2. 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 

Design System

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

More projects...