Boosting website redesign.

Project overview.

Boosting website redesign
  • The product: A cross-platform e-commerce boosting website of World of Warcraft services.
  • The problem: An old-fashioned website that needs to be redesigned.
  • The goal: Design a responsive e-commerce website. The main aim is to put e-commerce and gaming domains together, so the website was attractive and easy to use.
  • My role: UX/UI designer, UX researcher
  • Responsibilities: Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User research: summary.

I conducted interviews and created an affinity map from interviews and surveys to better understand the users I’m designing for and their needs. Different groups were interviewed but through research, I came to know busy professionals who don’t have time to level up or gain some achievements in the World of Warcraft game want an easy and trustworthy service to level up their in-game characters for them to participate in special in-game events.

Pain points.

Boosting website redesign


Boosting website redesign Boosting website redesign Boosting website redesign

User journey map.

Mapping users’ journeys revealed how helpful it would be for users to have access to a dedicated e-commerce boosting website.

Boosting website redesign

Competitive audit.

Goal: Compare the user experience of each competitor’s website.

Boosting website redesign

Starting the design.

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Paper wireframes.

As this website is mostly used by gamers, it was decided to make it desktop-first. Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

Boosting website redesign

Digital wireframes.

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user need to address in the designs in addition to equipping the website with the possibility to create a personal account.

Boosting website redesign

Low-fidelity prototype.

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering service so the prototype could be used in a usability study.

Boosting website redesign

Usability study: findings.

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Boosting website redesign

The design.

  • Mockups
  • High-fidelity prototype
  • Accessibility


Boosting website redesign

High-fidelity prototype.

The final high-fidelity prototype presented cleaner user flows looking for the service needed and also has a customized profile with the possibility to see the purchases.

Boosting website redesign

Try the prototype.

Please note that this is only a prototype and may not have the full functionality of the final website.

Adaptive design.

It was decided to create pages for all possible screen sizes.

Boosting website redesign


Further, I started to work on the logo, customized Icons, and banners for items

Boosting website redesign

Final design with adaptation to other devices

Boosting website redesign

Accessibility considerations

Boosting website redesign

The whole work took 3 months.


Ways to contact me.

If you have any questions, suggestions or ideas that you’d like to share with me, I’d love to hear from you. I’ll do my best to respond to your message as soon as possible.

    By clicking on the button, I agree to the privacy policy