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
