Embedded Files
Introduction
Introduction
— Siarzuk, did you make website designs before?
— Nope, only managed.
— It's okay. We have money only for a programmer, and we need to show him what we want from the new website.
This is how it started. 😊
Goal
Redesign the jewelry website marchelloandco.com.
My Role
UX Designer, Project Manager, QA Manual Tester.
Tools
Axure, Google Spreadsheets, Skype.
Users
current buyers of the offline store;
new buyers from future advertising campaigns;
anyone who tired from Amazon and eBay.
Outcomes
Mid-fidelity prototype, desktop, and mobile website in beta-version.
This project was entirely out of the rules of standard design thinking project because I didn't have design education in 2016.
I was working as an E-Commerce Manager in a small jewelry company. We were selling jewelry and watches on Amazon and eBay. The owner of the company wanted to have his website. And we needed someone who could visualize our requirements for the programmer in parallel with e-commerce tasks.
Empathize, Define, and Ideate
Empathize, Define, and Ideate
Today I understand that these stages have to be processed more deeply. But at that time, I skipped it as a general phase and went through them occasionally when I worked on each particular element.
I found the main competitors of the company and analyzed the best practices from all of them. We wanted to have amazon's ease of use, the luxury feelings of reeds.com [jewelry competitor], and the usability of jomashop.com [watches competitor].
Catalog page of reeds.com
Product page of jomashop.com
This research gave us the main aspects of the future prototype:
Focus on Reeds when finding a color scheme, fonts, and structure.
Focus on amazon's usability patterns.
Focus on Jomashop when searching for filters and attributes description;
Prototype. Desktop Version
Prototype. Desktop Version
Main Page
Besides the websites I mentioned above, I implemented the «Explore ...» section from jared.com because it shows all the main categories' child items.
I also added the «Catch ...» section for stimulating people to check our website regularly.
Catalog Page
Most of the elements I took from reeds.com. But I added a price filter here because the price range for jewelry is extensive.
Product Page
The most crucial page. I took the structure from Reeds and attributes from Jomashop.
Also, I added Sections «See More ...» for SEO H2-titles and cross-links between products.
I designed the «Recently Viewed» section with aspirations from amazon.
Prototype. Mobile Version
Prototype. Mobile Version
Main Page
Half of the user's come from mobile platforms, so I designed the mobile version also.
Catalog Page
Product Page
Also, I designed all of the internal pages and popups so the programmer would not be struggling to find out what it should look like. The whole structure of the prototype looks like this:
Test
Test
We had a lot of iterations testing both versions. I tested the website and created a spreadsheet for tracking the progress of fixing all of the bugs.
Here is the screenshot of the product page from the latest version:
Unfortunately, one of the crucial extensions we planned to use was updated by the developer to the newer version of Magento CMS. And we've got an enormous amount of bugs when we updated it for our website.
The company owner decided to focus on the other marketplaces such as Walmart, Sears, and Jet and return to the website later.
Key Learnings:
Key Learnings:
Be persistent with assigning the work to the proper specialists;
Prioritize the critical bugs.
Look at my other projects:
Look at my other projects:
Completed user research and designed the Rivulet App. This app gives busy people a way to organize their tasks with pleasure.
ux/ui ∙ research ∙ wireframing ∙ naming ∙ logo ∙ prototyping ∙ usability testing
Google Sites
Report abuse