E-commerce site re-design
Paintballshop.ua is paintball equipment retailer and distributor located in Lviv, Ukraine. My task was re-design and creating high fidelity clickable prototype of new e-commerce site.
Defining problem
For this project i didn't get any brief, so i had to identify main problems by myself. Since I used to work for this company, I had knowledge and insights about the business, was familiar with the main pain points of the site and company in general. Nevertheless, the first thing i've done was interview with head of the company and then - with employees. This helped me to identify main problems and set the goals.
Here I faced my first challenge: effective communication online. Since I live in different country we didn’t have chance to meet face to face so all of the communication was via skype, viber, e-mails. This, together with the fact that all employees had tight schedule and were not proactive, required good communication skills for getting information and cooperation i needed along with keeping good relationships and positive approach.
After the interview I’ve summarized all the insights and defined 2 main problems and goals to achieve with the help of new design:
​
Research
To get as much useful information s possible, i broke down my research into 4 categories:
​
​
​
​
​
​
UX audit
To conduct UX audit I tried to complete few tasks, (place the order, register, search for specific item, etc) and went through all the pages. As result I got long list of pain points.
Market and competitor research
The aim of market and competitor research was to update my knowledge about the industry and it's specifics, as well as monitor main competitors. After checking their websites i highlighted for myself what i liked and disliked about it.
User research
Before i started my user research I faced another challenge: I couldn't meet users face to face (as I've mentioned I live in different country, and had lot of time limitations). So i broke user research down into 3 categories:
1. Online interview with real users.
After sales manager provided me few contacts of users, willing to take part in interview, i've contacted them online. Despite of many limitations (like, I couldn’t really see how the users interact with page, or time constrains) I managed to collect lot of information, like how users use the site, why don't they place order online, what are the main task they usually perform, what are the pain points, what do they like about it, what would they change etc. Also, I asked to describe how they use competitors sites.
2. Survey.
I prepared few questions and asked manager to send it to customers. Here I was interested the most in main purposes why people go to site and what do they like and dislike about it. Unfortunately it failed as manager couldn’t collect enough information.
3. Live interviews.
I conducted interview with few people I could meet in person. I showed them web-page and asked what they think about it. Then I asked to perform few tasks on the site. Although they were not actual users I got lot of useful insights.
Google analytics
At this point I already got a lot of information, but decided to study the problem from one more, different angel – Google Analytics. After running few most relevant reports I created table with key results, their interpretation and conclusions that could impact new design. The problem here was that GA was not set up properly, so many useful reports couldn't be run (like e-commerce reports or internal search report). Nevertheless i still managed to get many insights from it.
​
​
User flows
Based on user interviews I’ve created few user flows to visualize how users behave on current site and on competitors sites. Points where user gets confused / frustrated i highlighted in red. Here are few of them:
​
​
User flow examples
​​
Mind mapping
After collecting so much information from different sources, I needed to somehow group it and generate ideas so nothing is lost during the process. So I’ve printed out all research results, put them in front of me and created mind map:
Mind mapping process
​​
Sitemap
The next step in my process was creating sitemap. Based on takeaways from research i added few changes to existing sitemap. Here how it looks like now:
Sitemap
​​
Mobile wireframes and testing
Having so much useful information on my hands i started to create wireframes. Of course, I followed “mobile first” approach. Here are examples of the first wireframes, made with pen and paper:
Pen and paper wireframes
After choosing the best layout I've created "nicer" wireframes in Adobe Illustrator, so i could show them to test users:
Digital wireframes
Testing raised up few questions about page layout, which i took it into consideration when was creating Low-Fi prototype.
​​
New logo and corporate colors
As existing logo of the company was much outdated it needed to be changed. But the biggest problem with corporate style were colors - red and black. Red is very aggressive and in combination with photos of paintball markers or “guns” it may resemble blood. That is exactly what should be avoided, as paintball positions itself as peaceful sport, not a “war game”. There's even rule in this industry, that no one manufactures paintballs with red filling, so it doesn't look like blood.
Back to the topic - after lot of brainstorming and sketching I've created new logo and new corporate colors (orange, black, grey):
Old vs. new logo
​​
Mobile Low-fi prototypes and testing
Based on updated wireframes I've created Low-Fi prototype (few screens) and tested it.
Creating prototype in Figma
Using mindmap through out the process helped me to keep in mind key problems to be solved and features that would increase usability. Here're some of them:
Usability features in Low-fi prototype
The main testing takeaways:
1. Main page - not enough items shown for each category
2. Main page - recommended items should go to the top
3. Menu should be as wide as the screen
4. Price range - make slide
5. Item description should be unfolded (don't hide it)
6. "Compare" option is missing
7. Price should go under the product name
​
​
Mobile High-fi prototypes and testing
Before i started to create Hi-Fi prototypes i needed to come up with idea of interface style. And that was real challenge for me: I wanted to create clean, minimalist, yet not too “calm” (as this is very dynamic sport) UI.
I’ve created “moodboard” bookmarks folder to find some inspiration – saved some interfaces I found appealing and appropriate for the site. While checking similar sites I’ve noticed most of them have dark interface and many large paintball banners, taking most space of page – exactly what I wanted to avoid, and now had another reason for it – distinguish from competitors. After filtering out few ideas I came up with the final variant and created High-Fi prototype in Illustrator and Figma.
Once I've collected testing results (both - in person and online) I've summarized all pain points and made changes to the final design. Some of the most common pain points were:
1. Search bar is not outstanding enough
2. Name of products should be bit bigger
3. Font is not good
4. More products should be shown below item description
​
​
Desktop wireframes and prototyping
After design of mobile version was approved I've sketched wireframes for desktop version, tested it and changed it - number of times of course :-), and created prototype. Basically, followed the same process as with mobile version.
Here are few wireframes:
Pen and paper desktop wireframes
Prototyping process:
Creating desktop prototype in Figma
Final design
After numerous changes based on testing results, the final design was submitted for both - desktop and mobile versions. Not all screens were designed, my deliverable was clickable prototype that would demonstrate main processes: placing order, searching, reading "about" section, contacting manager. Per agreement with the company, i can't publish prototype or detailed views yet, but here are some before vs. after screens preview.
​
Mobile version:
​
Desktop version:
​
Conclusion
This project biggest challenges were:
​
1. Effective online communication with company's employees and test users.
The main difficulty was that employees were working in tight schedule and cooperating with me was not their priority. To get the most of our communication i maintained friendly relationship and always explained why certain steps were important for the process, keeping in mind their time limitations.
2. Creating clear and simple but action UI.
Once i came up with this visual design concept, i spent many hours of brainstorming and sketching till found the right solution: used dynamic paintball photo as background but grayscaled and lightened it so it's not disturbing. Also i limited site colors to grey, white and bright orange.
As new web site is not launched yet, it's hard to evaluate effectiveness or meeting the goals. But based on testing results, it's safe to assume that new design solved many usability problems and met company's expectations.
During the project I've got a lot of new experience and got a chance to use theoretical knowledge in practice. Of course, some failures took place but lessons were learned and I take it as great contribution to my skills improvement.
​