Electronica Rasero
Complete responsive redesign of a local Madrid-based electronic components e-commerce. This project highlights the importance of not only good UI but also the structure and information architecture of a website.
User Research | Usability Testing | Information Architecture
Atomic Design | High-Fidelity UI Prototype
Made using Figma and Figjam.
Context
The goal of this project was to completely redesign the information architecture, UX, and UI of a local e-commerce. Making the shopping experience accessible and fluid was also on the top of our to-do list.
Time Frame: 2 weeks to work with Electronica Rasero through Ironhack in order to achieve their various goals.
My Role: The redesign was completed as a team of 3 members, we all divided the work and I focused on UX research, information architecture, branding, and UI design.
Problem Statement
Electronica Rasero is a prominent electronic components e-commerce based out of Madrid, with a wide selection of items. However, according to users, the way the website is structured is confusing and scattered. This has led to a loss in sales and has driven their traffic away to big retailers such as Amazon and Digi-Key. Electronica Rasero prides itself on having the newest products on the market but their website does not reflect that. Their dated interface, which has gone more than 10 years without being updated, has significantly fallen behind their competitors.
Project Goals
1. To redesign and restructure the current website to be more user friendly
2. To help customers have an easier time finding products
3. To create a mobile version of their website
4. To increase sales and traffic by 50%
Phase One: Research
Original Website
Electronica Rasero has been servicing Madrid and Spain since 2010. Their team is comprised of experts in the electronic component sector, specializing in robotics, prototype development, and innovation in education.
Since Electronica Rasero doesn't have a physical location, they struggle to compete against larger retailers such as Amazon, Digi-Key, MediaMarkt, and Worten. What sets Electronica Rasero apart is that they offer personalized expert assistance, something other big retailers cannot provide. However, due to their current structure and design of their e-commerce, they are actively losing customers to retailers whose websites are easier to navigate.
My group and I set out to conduct surveys and several interviews in order to gage users' behaviors, habits and feelings. We also conducted a SWOT analysis and a competitive analysis to check. the scope of the market and any opportunities Electronica Rasero might be missing out on.
Findings
The surveys and interviews that we conducted reached about 30 people worldwide. We spoke to locals, people on specialty forums, and experts in the sector. Our data shows that a majority of users value a wide selection of products, ease of search and purchase, organization, price and quality, and reliability.
A usabiltiy test conducted of the current website brought up a few pain points:
-
Users could not find the products they needed quickly
-
Users got easily confused or lost because of the magnitude of categories and sub-categories the website had
-
Users could not navigate the website on their mobile phones
-
Users could not filter their searches
We also had to do quite a bit of research on electronic components. I would say our biggest challenge was getting familiar with the products. My team and I had no knowledge of electronic components so there was quite a steep learning curve. Luckily, one of our teammates had a connection with a robotics professor at a university so we had an expert to get insights from.
Another challenge was the immense amount of products available on the website. Thousands and thousands of items were going to prove to be a big obstacle in our restructuring of the site. We knew that we would have to spend a lot of time on the information architecture of the site.
With the knowledge aquired from our research, insights, and data, we were able to empathize with the user as well as have a better idea of what the possible solutions we would implement in the redesign.
SWOT/DAFO Analysis
Part of our Competetive Analysis
Lean UX Canvas
Phase Two: Defining the Problem
User Persona
User Journey
User Persona
With all of the data compiled and collected, we created our User Persona, Max. Creating a user persona allowed us to further empathize and put ourselves in the shoes of the past, present, and future users of Electronica Rasero.
Max is a robotics professor at a university in Madrid. He frequently purchases electronic components online for his classes and is quite knowledgeable in his field. Max would like to support local merchants but has a difficult time navigating through the websites of various local electronic component stores based in the area.
Main Pain Points:
-
Max needs to buy a lot of materials for his robotics class and he's short on time.
-
He wants to shop local but the website is old and outdated. Many of the pictures of the products are generic and low-resolution.
-
Max can't place an order instantly because he must ask for a quote frist. This frustrates him because he needs the items as soon as possible.
-
Because it's a small company, they take over 48 hours to respond and give Max his quote. He gives up and goes to a big retailer instead.
Phase Three: Ideation
Finding Solutions
After understanding all of our data and analyses, we were ready to start ideating. One thing I really like about working collaboratively is that you have a wealth of knowledge from each person to tap into. If any of us were stuck on something or needed help, we could rely on our team to get us out of whatever hole we were digging ourselves into.
For our ideation sessions, my team and I used affinity diagrams, brainstorming, mindmaps, and card sorting to ground our data and make it into more tangible solutions.
One of the most important tools we used during our ideation phase was card sorting. Because of the nature of the product, and how complex it could get, it was difficult to make heads or tails out of it. We gained so many insights from experts and knowledgeable people in the field. From the insights gained from doing this exercise, we were able to consolidate product categories and categorize everything in a more efficient and simple way.
Card Sorting
Brainstorming Session
Affinity Diagram
After getting the site's products categorized, we moved on to building the site map and constructing a user flow. Since it was so difficult to search for an item on the current website, based on the data, we decided to put at least 2 ways of searching, filtering, and finding an item.
User Flow
Site Map
Phase Four: Prototyping
Wireframes
Problems
After showing our first mid-fidelity prototype, we ran into some design and structure problems. The stakeholders told our team that the homepage of the website left a lot to be desired and we were not using the space to the best of our abilities. Our initial solution, live chat assistance, to help with personalized shopping, was shot down as the cost did not make it feasible.
While this was not what our team wanted to hear, we took it in stride. We went back to the drawing board, conducted another competitive analysis, and interviewed more customers and experts in the field. Through usability testing, we were able to identify what elements needed to be changed or updated in our next iteration. We were glad for this much-needed learning experience. It taught us that design has its ups and downs just like any other role. It's important to not take feedback personally and to remember that you're designing for the user, not for yourself.
The UI
Colors
Tone
Shapes
Colors
Mood Board
After a few more mid-fidelity iterations and testing, we were ready to move onto high-fidelity iterations of the new and redesigned product. Because the website hadn't been updated in over a decade, the brand's attributes had to be overhauled. To do this, we created a Mood Board. Through the mood board, we were able to think of ways to make the website seem more modern and visually competitive.
We then interviewed the Electronica Rasero team, various users, and experts about the brand's attributes. Through the data collected, the brand should evoke feelings of efficiency, being taken care of, and wisdom. These attributes were then validated by 12 users.
From there, we moved on to colors and typography. We knew that users wanted an updated interface, but at the same time, didn't want to stray away from the brand's initial color palette.
Style Tile
For the colors, we decided not to stray too far from the blues and purples from the original palette. We did choose to add green to the palette in order to freshen up the page. The green was chosen after completing a color theory study.
As for the typography, we chose Avenir for the website's main font. This font resonated with us because, in French, Avenir means the "future". Because we wanted to pull Electronica Rasero into the future, this choice of font fit well into our brand attributes.
Space, Shadows, & Alignment
For the layout itself, we decided to work using an 8px grid. This would allow us to give the website a more modern look and feel. We also went with rounded corners to balance all of the sharp edges found in the electrical components themselves.
Solutions
Homepage
Redesign
Electronica Rasero got a facelift. After a logo update and being propelled into this decade, the homepage was given a much cleaner and visual redesign.
With plenty of call-to-action buttons, users now had many options to view products they needed and make streamlined purchases.
The categorization of the products was also simplified by unifying similar product categories. A filtration system was also added, which was non-existent on the original website.
As the user continues to scroll on the homepage, they are met with sales, and with product categories displayed in a more visual manner.
The user is also met with the option to use a virtual assistant, the "Configurador Virtual", who will provide personalized shopping assistance.
Product
Descriptions
Being able to view products with updated and high-resolution photographs was one of the main things users valued, according to our data. When our team redesigned the product page, we made sure to use updated and high-resolution photos on neutral backdrops.
Another pain point that our redesign addresses were the lack of technical information and reviews on the product page. On the updated page, users are able to view all of the technical specs of an item, as well as browse through the reviews. Stock availability is also visible, something that was not present before on the original site.
In the redesign, users are also able to directly access the virtual assistant in case they need to. Another feature added to the product page is the related products section. This allows users to view similar items and directly add them to their shopping carts if they wish.
Virtual Assistant
In order to address user's more personalized needs and to go along with the brand attributes, we included a virtual assistant within the structure of the website.
You can access the virtual assistant through the homepage, and any product detail page. The virtual assistant is there to help users find electronic components that are compatible with a product. About 85% of users are not just buying one electronic component at a time. A majority of users are buying 10+ electronic components at a time. Users are able to see exactly what other electronic components are compatible with the products that they need.
Once chosen, in 3 easy steps, the user is able to make a purchase, without having to leave the virtual assistant. This streamlines purchases, increases the UPT and conversion rates of sales.
Responsive Design
Making this website responsive was one of the top things to do on our list. As mobile shopping keeps growing, it is important the Electronica Rasero no longer is held back by this missing functionality.
The mobile version of the website was condensed, but without taking away information. Instead of an infinite scroll of items, horizontal scrolling was added in order to be able to fit as many products as there is on the desktop version.
It was also important to maintain the clean and minimal look of the desktop version and avoid cluttered screens. Instead of keeping the category menu on the left, it was put inside a hamburger menu on the top left corner.
High-Fidelity Prototype
Conclusions
After two weeks of intensive research, a crash course about electronic components, and many design sprints, I am very proud of our final product. I never thought I could get excited about something like electronic components, but here we are. It was definitely a learning experience. This project taught me that I pretty much can do anything that is thrown at me. Our bootcamp could've easily given us a common e-commerce, like a clothing store or an online supermarket. But that would've been too easy! At first, I was a bit uneasy about taking on something I know nothing about, but I'm glad my team and I were able to get through this challenge.
Two more things we had to work on for this project were setting up an atomic design structure and fleshing out a design system. Having these two things documented is really helpful to have if we choose to work on this project in the future. I really enjoyed creating a design system. You see the colors, typography, spacing, components, etc. right in front of you. If anyone new would join our team, I'm confident the design system we created would help them become experts in no time.
I leave this project with a sense of accomplishment. My team and I were able to handle a bunch of deliverables on time, while not skimping out on quality. Especially about something that we didn't know anything about. I hope to take the new skills I've learned during this challenge to my next stop on my journey as a UX/UI Designer.