panda webstudio

design / code / wordpress

Overview.

Panda Webstudio is the website of my sister Anda, a full stack developer. The website stared out as a showcase of her programming work, but in past years has been more focused on selling her custom-made Magento extensions, rather than on contracting new work.

The problem

There were several problems we identified with the old website, the main one was that the original purpose of the website - to showcase Anda’s work and help her get freelancing projects was no longer valid, as she shifted her focus to building and selling Magento extensions over the years. So the profile of the site changed from portfolio to online shop.

The visual design was also quite outdated and affected feeling of trust and security needed when making online purchases. The website was also not mobile friendly, inconveniencing mobile users and hurting google search rankings.

Since the website was not build on a CMS, my ever procrastinating sister found it hard to update and post new content/extensions on the website, postponing potential revenue (and free beers for me).

old website The old website.

The goal

We identified the following goals for the new redesigned website:

Website Goals

  • Update visual style to a more modern approach
  • Make the new website mobile friendly
  • Move the website to a heavily customised Wordpress backend to make posting new extensions as effortless as possible
  • Move focus from portfolio to online shop

Research

To better understand what works and what doesn't on the Magento extensions marketplace, I did some research of competitor websites. What became clear is that most competitor websites are very busy, with poor overall usability and fail to build product confidence and trust. So for us to succeed, we just needed to take the opposite approach.

Various competitor websites

User Profiles / Personas

We also started to better define our target user groups, what goals they need to accomplish on the new website and what features would make those goals easier to achieve.

User Group: Magento Developers

Developers or product owners who need to extend Magento basic functionality.

Needs and goals:

  • find custom Magento extensions to help speed up development time
  • modify existing Magento functionality

Pain points:

  • code security
  • well documented code
  • fast and personalized support

Visual Design

After clarifying the user goals, it was time to move on to the design stage.

Color Scheme

As total departure from the previous version of the website, we both felt that a cleaner, more modern approach was needed this time. Anda suggested the general light tone and primary colors and I complemented it with the base and accent colors. The result is an overall light color scheme with occasional restrained bursts of color.

Typography

For the typographic treatment, I selected a modern sans-serif that was used at different weights throughout the website.

Final Outcome

Below is the final result of the design process.

Home page.

Development

The website was built on a Wordpress backend, heavily customized for increased ease of use so posting a new extension is just a matter of minutes. It's also built on a custom responsive framework based on Bootstrap to speed up development time.

Final Thoughts

It's always challenging working on projects together with family, the extra pressure to deliver something awesome can make the process often frustrating. This was no different. It took several tries and different approaches until I identified the right style I had to go for, but once done, I'm really happy with the way this one turned out.

Let’s work together! Get in touch.