Laze Apostolski

Manypixels

Graphic Design Management app

Project Overview

ManyPixels design management app which brings high-quality design to businesses all around the world in a fast and affordable way.

My Contributions
  • Conducted user research to understand requirements for new features
  • Organized brainstorming sessions with team members to figure out best solutions to the problems at hand
  • Created rough sketches of UI to gather feedback from team
  • Iterated based on feedback and created wireframes and mockups for features and additions to the product
  • Conducted user testing to validate designs.
  • Worked very closely with engineering team throughout the process and also I was involved in implementation of the designs
Role

UI/UX Designer

Timeline

January 2020 - October 2020

Tools
  • Figma
  • ReactJS
Team
  • 1 Junior Designer
  • 1 Product Manager
  • 3 Developers
Clickable prototype:

bit.ly/ManyPixels_prototype

The Discovery

Problem statement

  1. The main objective is to reflect updated business processes like business model and introducing new features. And of course, better experience of the platform as well as modern looking UI.
  2. From a visual point of view, there was a lot of inconsistency in UI design. The product grew, so new features and pages were introduced, but w/o clear design system, it’s getting worse and worse. So objective #2 was to develop a stable design system.
  3. Problem #3: old design because of not well-thought layout was hard to make that looks good on mobile.

Solution

Research methods we used here:

  • Competitor analysis Manypixels has two main (and biggest) competitors on the market:
    - penji.co
    - designpickle.com

    • So it’s important to check how do these guys are solving similar problems & what’s the difference in User Journey.

  • Stakeholders & expert panel: we’ve done six workshops with management team & customer support lead to clarify the main pain points. Such products are super customer-oriented because in this industry, there’s no uniqueness regarding process or value, so it’s super important to hear your customers and their obstacles.
  • Interviews: thanks to God, we have a couple of super loyal clients who found some free time to talk with us, so we could highlight the main Use-cases to be solved.

For example: mostly, all design requests are related to the one company/brand. So it’s painful for the client to upload the same materials (brandbook, illustrations, other brand materials) for each request without missing anything. So to help designers to have all materials from the beginning, we introduce Brand Profiles. Client (and designer after completing somedesign request) uploads everything he has to specific folder of Brand Profiles. So now, when he creates a request, there is no need to do the same work again & again, he just refers to the needed brand profile.

Solution

Wireframing

Before I started working on wireframes I gathered inspiration from other interfaces with functions that Manypixels can use. Analysed our two main competitors and started drawing some ideas that I have in my mind.

Then we spoke with the PM and made some modifications, something was added, something removed but in general we kept the initial idea.

Testing

Validating the designs

I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including a scenario asking the user to create a new request for all design options on desktop and mobile devices..

During the session, I observed how they interacted with the prototype and set up the request. The usability session revealed that it was less arduous to set up a new Request due to the grouping of related fields. It was easier for the user to identify which forms they had to fill, as advanced settings were now hidden under a collapsable toggle.

Final part

Working on UI and design elements

I created my high fidelity mockups in Figma and then imported them into Invision to allow the engineers to inspect the file and export the HTML and CSS code.

I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before it went live.