top of page
Richard Park is a Product Designer based in New York.
iottie Website
Redesign
Digital glow up
iOttie is mostly known for its best selling car phone mounts. A few years ago, company executives decided that they wanted to evolve and expand iOttie's product lineup. As a result, iOttie started selling wireless chargers and recently entered the connected device space.
​
While iOttie the company grew and evolved, its e-commerce website remained largely the same since the company's inception 10 years ago. This had to change.
The Challenge
update the website to reflect
the company today
iOttie has drastically changed over the last few years. It has grown in size and branched out its product offerings beyond standard car phone mounts. Our overall goal was to make sure the website reflected iOttie's new and improved look.
Our high level goals:
-
Communicate iOttie's current brand effectively
-
Update the information architecture to accommodate the new categories of products
-
Create new features that can promote a "community" for iOttie's expanding customer base
-
Improve how customers contact iOttie for help
-
Improve overall usability
My Role
I led the design of the project, which included my assuming the following duties:
​
-
Research and synthesis
-
Content strategy
-
Copywriting
-
Wireframing and prototyping
-
Usability testing
​
​
My team was composed of the following members:
​
-
A graphic designer
-
A developer
-
A marketing manager
-
An e-commerce manager
-
The support team
The Research
Gathering information
Before I could actually start making any changes to the website, I had to first understand what changes needed to be made. This entailed my conducting research utilizing the following methods:
​
-
Stakeholder Interviews - to obtain business goals and website related pain points that the departments had
​
-
Competitive Analysis - to see what the competitors did right/wrong so we can learn from them
​​
-
User Interviews - to understand the customers and how to cater the website towards them
​
-
Usability Tests - to discover what the customer pain points are when using the current website
​
-
Information Architecture - to understand how products are currently organized
​
-
Card Sorting - to reorganize the products based on customers' expectation of where to find them
Understanding what the company needs
(stakeholder interviews)
I began my research by first interviewing the stakeholders within the company. I wanted to understand the overall scope and timeframe of the project, specific requirements, any website related issues departments had, and technical constraints. I interviewed the following:
​
-
Company Director
-
​The director asked that the website have brand presence, improved customer support, a community section, and updated content management.
-
I received a list of direct competitors.
-
He was unsure of what exactly the company's brand was, so I kept that in mind during other stakeholder and customer interviews.
-
​
-
Marketing Department
-
​They wanted to improve brand presence specifically about showing the company's values and origin.
-
They believed the company's brand was based in high-quality products and innovation.
-
They wanted a way to advertise promotions.
-
They wanted a portal where press/influencers can use to contact the company.
-
They also emphasized the need for explaining the products better.​​​
-
​
-
E-Commerce/Customer Support Department
-
There is a message board where users submit their questions, but it is not maintained​.
-
There are multiple ways customers can contact customer support, which is confusing to both the customer and department.
-
Customers contact the wrong department and the messages have to be forwarded to the correct department, which wastes time.
-
​
-
Engineering Department
-
​I wanted to learn about their capacity both in terms of technical experience and availability to code a website on their own.
-
They said that coding it on their own would take longer than the time allotted so the better option would be to customize a website on Shopify.
-
I created transcripts of all the stakeholder interivews and organized them into a folder in Google Docs.
Learning from the competition
(competitive analysis)
I conducted competitive analysis for the following purposes:
​
-
To gain an understanding of how competitors brand themselves so that when promoting our brand we make sure we distinguish ourselves.
-
To discover if competitors have a community page and if so learn what aspects of it may be effective for our website.
-
To learn how competitors implement promotions.
-
To observe how competitors' overall websites are set up and organized (homepage, navigation, PDP, etc.) so we can save time learning what works/doesn't work.
A section of the spreadsheet I used for Competitive Analysis.
Build it and they will come
(creating a research participant recruiting program)
Being a company's first and only Product Designer comes with its challenges. In addition to wearing many hats, you have to also create guidelines, programs, and procedures that do not currently exist.
In order to conduct user interviews, usability tests, and card sorting studies, I had to first figure out a way to find the right people to interview and test, as well as give them a good incentive to participate.
Finding the right participants
I chose to interview, conduct usability tests, and card sorting on potential customers (that have not visited iOttie's website) and current customers.
​
Potential customers
I cast a wide net when looking for potential customers by recruiting coworkers, friends, and family who have:
​​
-
a wireless charger and/or
-
a smartphone and drive a car.
My reasoning for looking for these types of participants was that a person with the aforementioned characteristics would be more likely to visit iOttie's website so the website should be optimized for them.
​
Current Customers
In order to find current customers, I asked the e-commerce department to provide me a list of customers who fit the following criteria:
​
-
Consented to receive promotional emails and
-
Purchased more than 1 product from:
i. the iOttie website
ii. within the last year
​
Since these customers actually visit the website I wanted to tailor the website to them as well. Also, because they are already familiar with the website, they would be able to provide detailed information about their experiences.
I worked with the e-commerce department to produce a spreadsheet with the aforementioned criteria. This image is a section of the spreadsheet. We couldn't find anyone from NYC.
​
*"# of" refers to the number of products purchased.
Ideally, I would have liked to observe the current customers in the office. However, using the aforementioned criteria, we could not find enough local participants. Therefore, the interviews and usability tests had to be conducted over the phone and online.
What's the incentive?
Now that I knew who to get, I had to figure out how to get them. Often times, working at a startup means working with a humble budget. As such, I had to brainstorm a budget-friendly way to incentivize people to participate.
​
Since I couldn't offer actual money to the participants, I thought of offering discounts for some of the company's products.
I worked with the marketing and e-commerce departments to come up with a promotion where participants would receive 75% off any one item, if they qualified for and participated in a study.
The promo ad I designed and wrote the copy for. For consistency, I used the promo ad guidelines graphic design department provided.
Getting to know the customers
(user interviews)
From the interviews, I wanted to understand who the customers (potential/current) were and their perceptions of iOttie, including its website.
​
I asked questions that helped me develop the correct brand presence on the site as well as tailor the overall website to the correct audience, such as:
-
Describe your relationship with technology?
-
Describe the process you go through when deciding on a product to buy?
-
(Current Customers) What is your perception of iOttie's brand? Why?
-
(Current Customers) What made you choose to buy an iOttie product over other competitors?
-
Why did you buy from iOttie's website?
-
If you bought iOttie products from other websites, how was that experience compared to the website?
-
From your memory, what was your experience like using iOttie's website? (first impressions, pain points, delightfulness)
Part of the script I used when interviewing the participants.
What are customers' experiences with the site like?
(usability testing)
I conducted usability tests of the current website immediately after the interview. In particular, I wanted to see what pain points customers experienced using the website.
I had the participants complete multiple tasks and asked them to walk me through their thought process. Specifically, I wanted to know the customers' thoughts and experience doing the following on the website:
​
-
Learning about iOttie's brand.
-
What is their perception of the brand? Why?​
-
-
Looking for a specific product that fits their needs.​​
-
Purchasing a product from add to cart to checkout.
-
Learning how to use a product.
-
Returning a product.
-
Figuring out if the product is under warranty.​
-
Starting the return process
-
Part of the script I used when conducting usability testing.
figuring which category products go under
(information architecture and Card Sorting)
Even before I started to synthesize the data I collected from research, I knew from both stakeholders and users that product categories were confusing and needed reorganizing. I essentially had to create a new information architecture for the products.
First I created a graphic of the current product information architecture to better understand how everything was currently organized.
Just a small section of the graphic I made that depicts the product information architecture of the current website.
Then I created an open card sorting study. I took pictures of products with their associated description and asked participants to put them into groups they could label themselves.
Here are the two categories I separated the studies into.
​
(Notice each folder has 2 studies. This is because each study was limited to 10 participants so in order to include more I had to be creative and created a second case study!)
I had participants drag products into common groups that they named themselves.
The synthesis
gaining insights
All the the time I spent on conducting research resulted in an abundance of data. However, this data had to be organized in a logical way to make sense. In order to do so, I utilized affinity mapping, OptimalSort card sorting software, personas, and journey mapping, which gave me the insights I needed to drive my designs.
Affinity Mapping
After interviewing and usability testing, I ended up with an entire folder of transcripts. I assigned a unique color to represent each unique participant. Then, from each individual's transcript, I took statements and put them on sticky notes.
I used affinity mapping to group statements gathered from user interviews and usability testing into common themes. Each color represents an individual user.
Next, I grouped sticky notes that shared a theme into boxes and labeled it based on the shared theme. The labels on the boxes represented the insights I gained. Other than branding, the insights from both potential customers and current customers were similar.
​
The following are the insights I gained from the affinity mapping:
current customers understood the brand
from the products, not the website
Potential customers couldn't opine on the brand because they were not familiar with the product.
​
However, current customers who have purchased more than one iOttie product generally described iOttie as a company that produces high-quality/durable mounts and wireless chargers, with good design and innovative features.
"iOttie is a company that sells sturdy, durable, and well-designed car mounts."
Both potential and current customers could not describe what the iOttie brand was based on the website alone, other than being a somewhat outdated company that sells regular car phone mounts.
customers were confused by the
Navigation Product categories
The navigation bar has a category labeled "Smartphone Mounts" and another category next to it labeled "Wireless Chargers."
The original navigation bar. People expected to see "wireless charging smartphone mounts" when they clicked this link.
"I think I'm in the wrong place because I clicked Wireless Chargers, but see wireless chargers for desks."
Customers assumed that if you clicked "Wireless Chargers" in the navigation bar you would see car phone mounts that could also wirelessly charge phones (1-below left). They were confused when they saw wireless chargers for desks instead (2-below right).
(1) A car phone mount that could also wirelessly charge your phone.
(2) A wireless charging pad for your desk at home.
Customers assumed that if you clicked "Wireless Chargers" in the navigation bar you would see car phone mounts that could also wirelessly charge phones (1-below left). They were confused when they saw wireless chargers for desks instead (2-below right).
customers had difficulty understanding
what distinguished each product
Other than the physical appearance of the products, customers had a hard time understanding why certain products shared product line names and what features each product had.
This led to further confusion when trying to pick one product over the other.
This is the product listing page that appears after "Smartphone Mounts" is clicked in the Navigation Bar.
When looking at the Smartphone Mounts product listing page, customers were frustrated trying to figure out the difference between each of the product lines (ex. Easy One Touch 5, Easy One Touch 2 Wireless, Auto Sense).
They found the product line descriptions unclear and lengthy resulting in their having to click each product to learn more.
"I read the paragraph and scrolled through all the features, and I'm still not sure what Auto Sense is."
Customers attempted to understand the products by reading the descriptions, but they found the latter confusing and dense, and eventually gave up.
This led the customer to either abandon the website in frustration or return the product after purchasing the wrong one.
The Auto Sense Product Description Page.
The correct description of the Auto Sense is a car phone mount that wirelessly charges your phone and clamps that automatically open and close to secure your phone.
None of the customers I interviewed knew what the Auto Sense could do. They found the title description confusing. Many thought "Automatic Wireless Charging" meant that the wireless charging was automatic, which is how wireless charging obviously works.
In addition, almost all customers gave up reading the description due to the long length, before they can learn what the Auto Sense did.
customers needed help finding...help
Customers had difficulty navigating the Support sections. One of the difficult tasks for the customers was trying to figure out how to return a product.
"I feel frustrated that I can't find the option to actually request a warranty on the Warranty Page."
When tasked with trying to return a product, customers:​
​
-
Were confused as to whether they should click "Warranty Request" or "Contact Us" on the Support Page.​
​
-
Were confused as to why a customer service email was an option, when a General Support Form already existed.
​
-
Took a long time to find the hidden Warranty Info page.
​
-
Once on the Warranty Info page, they could not figure out how to get to the Warranty Form page because no link existed.
Analyzing the card sorting results
Next, I used OptimalSort's data analysis software to gain insights from the open card sorting studies previously mentioned in research section.
A section of the analysis produced by OptimalSort that shows how participants categorized each product.
Participants put products into much different categories than what was currently on the website. Since the card sorting was open, new categories appeared such as "Home & Office."
OptimalSort's data analysis software showed the frequency that participants placed the products into specific categories. Using that information, I placed the products in updated categories I created below:
-
Car Phone Mounts
-
Standard Mounts​
-
Wireless Charging Mounts
-
-
Wireless Charging Devices
-
Car Mounts
-
Home & Office
-
On the Go
-
-
Connected Devices
-
Car Phone Mounts
-
Dash Cams
-
The Design
Creating solutions
through design
After compiling stakeholder requirements and synthesizing the researched information into insights, I was now ready to use that knowledge to drive my designs.
In order to validate my designs, I conducted usability tests utilizing a lo-fi prototype I created on Adobe XD. Due to budget and time constraints, I conducted usability tests on 10 participants (5 potential and 5 current customers).
A few wireframes from the Lo-Fi Prototype I created on Adobe XD.
To save time, I simultaneously started working on hi-fi wireframes with the graphic design team and implementing the designs with the developers.
communicate the updated brand
Company stakeholders requested that the website have improved communication of the company's updated brand. Customers also couldn't tell what the company's brand was from looking at the website.
As a design solution, I suggested an updated logo/company color, icons illustrating the company's core values, and an About Us page.
creation of a New Logo
One of the most important representations of a company's brand is the company logo. The company logo is often seen first and most frequently by customers.
I decided to start with the company logo first as it would set the direction and tone of the website's redesign.
The original iOttie logo. Customers felt this logo was outdated and didn't represent a company that made high-quality, innovative products with great design.
Other than innovative, the company director wasn't entirely clear on what specifically iOttie's brand was or should be. Therefore, I provided him with the brand research I collected from my interviews and he agreed with what the results.
From my interviews, current customers also viewed iOttie as a company that produced reliable products with clean, sleek designs. This was the opposite of what potential and current customers thought of the logo and website.
I relayed the brand research to the graphic design team and asked them to create a logo inspired by that information. After multiple iterations, the company's employees and I felt that the logo below best represented what iOttie stood for.
The new iOttie logo and color. The new logo and color is meant to convey feelings of high-quality, sleekness, and innovation.
Explaining the company's Tenets
As great as logos can be in symbolically representing a company, you also need to explicitly show customers what the company represents.
After synthesizing the interviews and taking into consideration the direction the company is moving in, I came up with the brand trifecta of: Quality, Design, Innovation.
The illustrations and copy found on the homepage that explain iOttie's values and brand.
To explicitly and easily communicate the brand trifecta to customers, I had the graphic design team come up with illustrations, accompanied by copy I wrote. I placed the illustrations and copy towards the bottom third of the homepage so customers would find it easily.
If customers wanted to learn more they could click the banner and would be brought to the "About Us" page, which contained an expanded versions of the values, with longer copy and additional illustrations and pictures.
help customers easily find the product they want
Customers had a very difficult time figuring out where products were and what products did.
​
As a design solution, I created a reorganized navigation bar, new product listing pages (information architecture), and a clearer and more concise product preview/description page format.
Fixing the navigation bar
Customers were confused by the navigation bar product categories. They found the categories vague and not representative of the products found under them.
For example, since most customers associated iOttie with a car phone mount brand, they assumed that the "Wireless Chargers" category would contain car phone mounts that wirelessly charge their phone. However, the "Wireless Chargers" category also contained wireless chargers for the home and travel.
Navigation Bar - Before
As a design solution, I first created a primary hierarchy of "shop," "community," and "support" since those were the top three areas the stakeholders wanted to emphasize on the website.
I also created a drop-down overlay menu for the navigation bar. The main reason I decided to take this design approach is to show the customer an overview of all the categories.
​
By seeing an overview of all the categories, the customer will understand that iOttie's brand is no longer just a car phone mount company, but rather a company that is expanding into areas such as wireless charging for the home and travel, as well as connected devices.
Navigation Bar - After
In addition, customers would be able to better understand how the categories are organized and how each category differs from each other. For example, by seeing the subcategories, they will now know that the "Wireless Charging" category encompasses more than just car phone mounts, but also wireless charging devices for home and travel. Customers could also learn the special features that each Product Series offers.
Customers will also be able to quickly and directly navigate to the category of their choice instead of sifting though multiple categories to get to their desired area. ​
Creating new Product listing Pages
Originally products were just randomly placed on the product listing pages with lengthy descriptions and unnecessary details like SKU. As a result, customers had difficulty understanding what features products had and how products were grouped. This led to a negative experience when looking for a particular product.​
​
As a solution, I created product listing pages based off the main categories and their respective sub categories, as seen in the navigation bar drop-down overlay. I also replaced lengthy product descriptions with a new easy to read format and consolidated the different mounting options into small thumbnails.
​
Below are before and after images of the Car Phone Mount Product Listing Page.
Car Phone Mounts PLP - Before
Car Phone Mounts PLP - After
Fixing the PRoduct Description page
Auto Sense PDP - Before
support
Combining Warranty and Returns
Customers had difficulty figuring out how to return products. They could not find out if their product was covered under warranty and/or know how to submit a return request.
This was because both the Warranty information and Return Request form were located on different hidden pages that were difficult to find. In addition, once customers were on the warranty page they could not go the Return Request page because no link existed.​
​
As a design solution I combined both the Warranty and Return Request into one page.
Warranty Page - Before
Return Request - Before
Warranty and Return Request Page - After
Outcome and Reflections
The hi-fi designs are currently in the process of being developed. During development, the developer assigned to the project had difficulty implementing the designs into Shopify.
​
Originally, the development team thought that customizing a Shopify template would be faster, however, due to the difficulty the assigned developer had, this was not the case. Since then, the assigned developer left the company and the project has been put on pause with priority given to app development since an outside vendor is providing developers for that project. In the end, portions of the designs did end up going live. However, some important pieces like the navigation still need to be updated.
As the company's sole and first UX Designer, I found myself not only learning to implement UX programs that did not exist, but also advocating for UX when the company was not used. Although challenging, I learned how to take initiative in the area of UX and also how to show stakeholders and colleagues the value of UX in the overall design of a product.
bottom of page