Boosting website redesign.
Project overview.
- 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.
Personas.
User journey map.
Mapping users’ journeys revealed how helpful it would be for users to have access to a dedicated e-commerce boosting website.
Competitive audit.
Goal: Compare the user experience of each competitor’s website.
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.
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.
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.
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.
The design.
- Mockups
- High-fidelity prototype
- Accessibility
Mockups.
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.
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.
Media
Further, I started to work on the logo, customized Icons, and banners for items
Final design with adaptation to other devices
Accessibility considerations
The whole work took 3 months.
