Categories:> , ,

Redesigning of Desygner’s editor UI/UX Case study

As we reached a milestone of 1 million users, we started receiving a lot more support tickets on some of the tools and features. The editor was designed in the early 1.0 beta stage and was never changed instead kept on adding so many features. So we embarked on redesigning of the interface.

My role was to help the CMO to carry out research, create wireframes and final visual design.

I use Design Thinking model as my process as it helps me understand my users and systematically apply these techniques to solve problems in a creative and innovative way.

Defining the Goals

We shortlisted all of our goals for the project. Our primary goal was to redesign the editor to make it easy for any user to use. Some secondary goals were

• Increase the response speed
• Make it easy to add new features in the future.

Research

Before jumping on board designing for a new interface, we wanted to know what issues are users facing. So we talked to ten users and sent out a survey to more than 20 users.

Survey Questions

• Tell us your name
• Tell us your age
• What type of device do you use for Desygner
• How did you find out about Desygner
• How long have you been using Desygner for
• What do you usually use Desygner for
• What features of Desygner do you like
• What elements of Desygner do you not like?
• Have you tried premium version?
• How can we improve Desygner?

desygner, editor, dashboard, ui/ux, shremal, uidesign, portfolio, design

Planning

Talking to our users helped us gain useful insight into what they like and dislike on the editor. We made an affinity diagram with everything we collected and started prioritising and combine items. We decided to work with one problem at a time.

Top Toolbar

This is the most common type of toolbar our users interact with similar to software such as Microsoft applications to design software. To make it easy for the user, we placed identical functions that are the top such as File, Save, project name, undo, redo, download, share, print and close.

Side Toolbar

This particular panel had major issues.

• First, we had noticed the search function was not functioning correctly, and it was not easily accessible. So we decided to put a search bar on all the functions and users could narrow their search options from stock, company and library.
• My Library function was moved inside as a sub-function as it would allow users to access and organise their objects.
• The import function was shifted inside well as a sub-function which would enable us to show users their previous imports. The import function now allowed users to easily import elements from multiple services and also prompt them to use our premium feature.
Change icon and colour style to match the new brand identity.

Elements Toolbar

This was the most problematic element for our users. It would block objects, so we placed it below the top toolbar. Each toolbar is tailored to the selected object you’re working on, and therefore, cognitive overhead is decreased significantly.  You don’t have to learn which icons are available and which are disabled for each particular scenario.

Wireframes

Wireframes gave me an idea of how things would look like and a rough representation of concepts that help to validate those concepts early on in the design process.

Visual Design

For the UI design, we wanted to create a clean and easy to navigate interface. Users loved the dark interface style, so we decided to maintain that and only change the shades to match the new brand identity.

Handover

While my teammates started implementing, I compiled all the elements and palettes in formats like SVG, JPEG, and PNG. So, they don’t have to wait for the elements to start working. I also took time to create the UI guide so that the developers could easily refer back to the guidelines for each of the elements. That helped me a lot because for once I would not be asked to open the file again to send a particular element.

Working on a project like this for the first time was challenging and exciting to see how everything fits together. In the starting, I was overwhelmed with how I would go about creating the interface, but my walks helped me gain control over that. Process help you move faster if you follow them. The second thing that I found out was always sketching your ideas helps to reduce overall time spent on designing and testing. For each of the function writing down the essential features helped me shape my interface as I would know what needs to be easily accessible and have more priority.