UX UI DESIGN PROJECT

UGLYSHOES

MAGENTO E-COMMERCE

ABOUT:

Uglyshoes.ro is a Romanian e-commerce website with high-end fashion products from top luxury brands, primarily dealing with shoes. During the projects duration I collaborated closely with the stakeholders , giving bi-weekly status updates and helping them make informed decisions. I lead the project from start to finish, having multiple design roles and tackling everything by myself with the exception of development.

REFERENCE: Suceveanu Ramona

ROLE: UX UI Designer / Product Designer / Graphic Designer / SEO specialist / Project Lead

TECHNOLOGY: Magento

TOOLS: Axure, Photoshop, Facebook, Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

PROJECT INFORMATION

GOAL:

The goal was to launch an e-commerce website aimed at people who enjoy high quality products

MAIN PROBLEM:

Their website & branding was handled by a different company using a custom platform and they weren’t satisfied with the end result and it’s progress. After analyzing it suffered from severe usability issues, lack of features, complex flows, placeholder images and in the end it would have costed them more to fix those issues then starting from scratch and as a result I proposed using Magento in order for them to avoid using similar issues since they will be able to find new developers due to it being popular and open source.
– click to view a larger image –

MY UX APPROACH:

I STARTED BY DOING A WEBSITE ANALYSIS IN ORDER TO GET AN IDEA OF THE STATE, FLOW AND FEATURES OF THE EXISTING WEBSITE

however due to the severity of the issues in terms of missing features, flow problems, placeholder images and so on the stakeholders agreed that it would be better to start from scratch since it would have costed them a lot more to fix those issues and they would have missed the shopping seasons. This was mostly due to the previous company using a custom in-house platform and thus a whole development team would have been needed to go through all the code, analyze it and understand it  then see how they could approach the project.

I’VE SETUP A NEW PLATFORM, HOSTING AND REDIRECTED THE NEW DOMAIN AND INSTRUCTED THE STAKEHOLDERS HOW TO USE IT

I proposed multiple platform, so they won’t face similar problems due to having most of the features already built in and they will always find developers avoiding what happened with the previous company
After presenting them with multiple platforms and informing the pro’s and cons of each, they chose Magento. I then went ahead and set it up, performed database setup and configuration, company e-mail setup and redirects as well as back-end translation to make it easier for them to understand. I then instructed them on how to add products, setup offers, send newsletters and other similar tasks, so they could start adding products, descriptions, quantity and so on, while I would tackle the design

I WROTE A PROJECT WHITE PAPER AND ROADMAP SO THEY WOULD KNOW WHAT I WILL BE DOING, DELIVERY TIME AND COSTS FOR EACH PHASE

This helped the stakeholders know when the product will be ready, what costs are optional and which are necessary as well as track the progress and plan accordingly

I THEN PERFORMED A MARKET AND COMPETITOR RESEARCH

as a way to identify key traits in the niche, understand how people arrive on those website, analyzing the layout too see design patterns and to ensure visitors of those websites will also feel familiar and comfortable on the new website and not be greeted by a completely strange experience that they wouldn’t be familiar or feel overwhelmed by the design

REBRANDING EARLY HELPED DEFINE THE BRAND COLORS, STYLE AND BUILD A SOCIAL PRESENCE

This phase involved an actual rebranding not just a simple logo design, by consulting with stakeholders on the look of their social media profile, the brand colors, the tone of voice, what content will be displayed all the way to the how they ship their products and if they should include a small thank you note for each purchase

WHICH ALSO HELPED BUILD THE CORE BRAND VALUES THAT LEAD TO GETTING A BETTER IDEA FOR WHO I WILL BE DESIGNING BY MAKING SOME EARLY ASSUMPTIONS

defining the brand values helped get an initial idea regarding who the website was targeting by making some early assumption such as who will buy the products, their age group, their income and their job. All these factors helped get an initial idea of the users who I will be designing the UX for.

USING THE BRAND VALUES I’VE LAUNCHED A FACEBOOK CAMPAIGN TO GATHER MORE USER DATA AND CLEARLY DEFINE THE AUDIENCE BY TARGETING USERS MEETING THOSE BRAND VALUES

as a way too see who was interacting with the page and thus see who I was actually designing for by finding out the age group, gender, the time they are online, where they access the website which informed that a responsive version was needed

BASED ON THIS I WAS ABLE TO CONDUCT INTERVIEWS WITH USERS MATCHING THE DATA AND BUILT AN AFFINITY MAP WHICH HELPED ME CREATE THE USER PERSONAS

I did this in order to determine what are the users problems, what product information and website would they want displayed, what their goals are on the website (look around, shop, bargain hunting, etc ), what influences their decision to buy a product, what are some red flags for e-commerce websites that make them leave. This helped better understand the niche and their users thus ensuring their needs are met and that they are faced with a design that they feel comfortable with and by building the personas I was able to get into the mindset of the user and better understand how they would use and interact with the website

SKETCHING A SERIES OF STORYBOARDS HELPED EXPLAIN HOW USERS WOULD INTERACT WITH THE WEBSITE

This helped showcase to the stakeholders the user’s journey and how clients will shop and interact with their website

CREATING MULTIPLE WEBSITE FLOWS HELPED ENVISION CERTAIN STAKEHOLDER REQUIREMENTS

constantly iterating and refining the flow and process, while also experimenting with features requested by the stakeholders such as integrating social features to make it more engaging and take a viral approach to selling

TACKLED THE WIREFRAMES WITH CONVERSIONS IN MIND

I worked closely with the client to ensure their needs are met as well as implement features mentioned by the users or certain solutions to user problems. These influenced the design by creating larger image grids, quick add to cart, having a section informing user about the brand, having a way to quickly select brands they wanted and the list can go on. While using a mix between my marketing, seo and online conversion skills helped create a design that is both SEO friendly and optimized for conversion

AND THEN THE VISUAL DESIGN BY BUILDING AROUND THE BRANDING, COLORS AND USING DESIGN STYLES TAILORED TO THE AUDIENCE

thus having built the branding early helped with setting up their social presence, running social campaigns, building the visual design around the brand logo and the brand colors, instead of the other way around which would have produced inconsistencies and required multiple iterations to the website and online presence

AFTER LAUNCH I PERFORMED A SEO CAMPAIGN WHICH HELPED WITH CARD SORTING BY IDENTIFYING ADDITIONAL NICHE TERMS

performing a quick seo analysis during the initial phases of the project helped identify user patterns by seeing how often and when people search more for certain products. This influenced the layout by pointing out that there needs a way to inform users of certain seasonal item, thus a three banner areas were introduced just below the fold. It also helped identify specific niche terms and similarities between certain niche terms, which helped with the card sorting later on by more accurately grouping categories together.
During the link building  phase of the SEO I was helped by a colleague to get it done faster, without sacrificing quality, since the delivery date got pushed forward due to the stakeholders schedule

USING THESE NICHE KEYWORDS FOUND DURING SEO I WAS ABLE TO CREATE A MORE ACCURATE CARD SORTING WITH THE HELP OF USERS

SEO helped come up with roughly 800 keywords, after sorting them I found out that there were similar terms for the same product type as well as product types that I’ve missed due to not having access to the product stock. Letting users perform a card sorting helped determine the best categories for the products, how to group them as well as choose the best term for the products that have multiple ones associated with them. Thus I was able to create categories that are intuitive, reducing the need to guess where they are

WROTE A SOCIAL GUIDE INFORMING THEM HOW TO USE SOCIAL MEDIA TO THEIR ADVANTAGE

Since social media was a key component, I wrote a brief guide on how they should the major social networks to build trust, informing them what type of content they should post on each network, how often and at what time of day

AFTER THEY OPENED THEIR PHYSICAL STORE I DESIGNED A SERIES OF ADVERTISING DESIGNS

this helped build brand awareness and brand trust by displaying them in shopping malls and other high profile areas as a way to drive sales both online and in their new store

RESULTS

Their website was up in just a few months so they could benefit from the winter shopping season, meeting the milestone and budget. By tackling SEO after launch I was able to monitor the impact and as a result  it reached the top of the search engine results for 8 targeted keywords and boosted website traffic by 300%, showcasing my ability to launch a product from it’s initial idea all the way to SEO, while keeping to milestones, budget and collaborating closely with clients and as a result of a successful partnership the client referred me to other people looking to start their online ventures.
Here are some sketches from

MY UX PROCESS

Here’s how I’ve solved some of the

SMALLER UX PROBLEMS

1. the stakeholders had difficulties remembering where certain features are in the back-end area, this was solved by creating a separate user account that they would use on a daily basis and choosing to display only certain sections of the control panel to make it less intimidating and easier to use. I also did a translation of the back-end control panel to ensure the stakeholders would find things easier and training them during the whole time I was working on the project ensured that by the time I’ve finished the project they would be more then comfortable managing it
2. some users would take extra time to identify under which category a certain product might be, this was solved by using my seo skills to generate additional keywords and niche terms, while doing a card sorting session with the users helped better group the products
3.in order to make it intuitive for users to find products tailored for that season, providing a series of banners near the fold helped easily browse products that are appropriate for that seasons, reducing the need to search under different categories to find the appropriate products
4. in order for users to see the latest products, placing the most recent products on the home page ensured they would easily find the latest additions without having to go to social media, browse multiple categories and so on
5. when shopping for multiple products users were required to go to the checkout page or do an additional interaction to bring up the checkout drop down, this issue was solved by displaying the total price directly at the top of the page and also making the checkout section found in the upper right corner of the page a bright color in order to stand out and easily identify how many products they’ve added and the total price
6. in case users were experiencing errors, the website was in maintenance or they would want to find out about discounts and other similar things, the business phone number was displayed on the front page thus making it easy for users to get in touch, which was used multiple times for business related inquiries as well as bulk orders
7. in order to avoid users having to go all the way to the top when wanting to switch categories, these were added in the footer area so users could quickly swap between categories
8. since users were interested in browsing by certain brands, a simple drop down sorting feature was added however due to the increase number of brands added after launch and user testing it was swapped with a sorting features that’s permanent visible reducing the need to perform extra interactions
9. How to identify who the audience is when no data was provided ? solved by talking the stakeholders to get an initial idea of who they’ve sold their products too in the past, then doing a market and competitor research and then defining the brand values and market position which helped get an initial idea towards who I was designing for
10. How to identify the user groups when there’s not a clear idea of who will be using the products? solved by identifying the brand values to have an initial idea who the users might be then running a Facebook pre launch campaign, posting product images as teasers and seeing who interacts with the page and with the help of the Facebook analytics I was able to get a better idea regarding who the users are

THE IMPACT

Design wise:
  • identified over 50 user experience issues in the existing platform which led to redesigning their website on a future proof platform, generating revenue in three months and eliminated the time, as well as the costs needed to hire entire teams to fix and go through the code
  • surpassed 20 UX challenges and proactively solved multiple problems during the website redesign
  • overcame the lack of user information by identifying brand values and launching a Facebook pre launch campaign to gather user data, building accurate user personas, identifying who the users are, while creating detailed storyboards to highlight their interactions
  • performed ethnographic research, market and competitor research which led to avoiding user confusion due to the layout differences
  • offered stakeholder platform training as a way to have the products ready for launch, thus launching on time and further eliminating their confusion by creating a separate basic admin account for every day use
  • used my seo analysis to identify new card sorting terms, reducing the need for users to guess which category hosts the products
  • designed outdoor advertising and their social presence that made them stand out from the competitors
Project management wise:
  • surpassed stakeholders expectation by the way I handled the project from inception to completion, by handling almost everything, offering bi-weekly status reports and collaborating in key project decision making, informing them of potential issues, risks and priorities, which led to praising me multiple times by saying “you will get far in the industry and we will be proud to say we worked with you”
  • eliminated extra unplanned costs by providing an upfront detailed 20 page project roadmap which led to reaching every single milestone within budget and allocated time
  • met a 3 month milestone so they could benefit from the shopping season by working weekends and evenings
  • boosted traffic by 300% by doing a full SEO campaign that led to them reaching the first and second page of Google
  • generated new leads by offering local search exposure via Google Maps, ensuring a stronger launch
  • sought out by stakeholders to give feedback regarding new hires and their performance
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps