Re-designing an e-commerce website: My retrospective

Cole Hardware (SF) website re-design

By Gladia Castro


For my second project at General Assembly, the goal was to redesign an e-commerce website and put through an interactive prototype for a local hardware store in San Francisco called, Cole Hardware.


Solo Project- User Interviews, Contextual Inquiries, Competitive Analysis, Card sorting, Storyboard, User Flows, Wireframes, Protoype


Stakeholder interview, comparative and competitive analysis, personas, user scenarios, user flows, wireframes, digital prototype, usability testing


Low-fidelity desktop wireframes and prototype; presentation to client


2 weeks


For years Cole Hardware has been known in the San Francisco community for their stellar relationships with customers. However, they lack to transfer that personality to their website. Some examples are confusing navigation, long shopping process, unclear process, and more.

In addition that, for this project, I chose to focus on “Thomas”, a 37 year old business man who is not an expert in hardware stores/websites, however, his brother who is, has a birthday coming up. So, Thomas wants an easy and smooth shopping experience to buy a gift for his brother.


Re-create Cole Hardware’s website and make it so easy to navigate anyone including Thomas, who is not an expert, succeed . The goal is to create a simple process to purchase supplies, create better business for Cole’s, and keep their local personality at the same time.



We were given 3 personas to consider as our “users” for the new website. The 3 users were, Lisa-DIY junkie, Andy-Hardware expert, and Thomas- a novice shopper .

Our goal was to create an interactive prototype for 1 persona but keep in mind the other two.

Left: Lisa & Andy (Right)


With this project we really had to focus on the research first before diving into sketches. Again, dig deeper into the 5 W’s. Look up reviews, checkout their website, start a comparative/competitive analysis between Cole Hardware and similar stores. However, before diving into that aspect of the

research, I needed to see for myself what made Cole Hardware so special. I went to the 2 story location in downtown San Francisco.

Here are a few things I noticed about my 20 minute visit at Cole’s.

  • Cole Hardware is not just a hardware store, they have everything! (Backpacks, school supplies, toys) They are here to serve their community and each store is tailored to the particular neighborhood they are in
  • Cole Hardware believes in customer service (plenty of staff on the floor to help, they know customers by name, trained staff
  • This store in particular had an eclectic feel

Some things I noticed that could be improved

  • Just like their website, the store at times appeared cluttered and a little disorganized (some products were not labeled, specifically downsiars was a bit overwhelming and random)

Overall, the experience was great because of the people that worked there. They made me feel special and like they cared. After visiting the store, I had an image of translating the accommodating experience to their website.


Now that I had more information about Cole Hardware, I dug deeper into who their competitors were. So I focus on Home Depot and Lowe’s. My goal was to gather as much information about those competitors and create a balance between the two to develop a new Cole Hardware website.

Below is a small comparative/competitive analysis I made on different stores compared to Cole Hardware.

Basically, Cole Hardware just needed to de-clutter their site and make it easier to navigate. You lose customers when they can’t find a particular product easily.


As I was brainstorming, I realized I needed to filter my ideas to a specific concept. Again, keep it simple! I figured it would be a little complicated to include restaurants for now, maybe in the next upcoming versions :).

So, why not have the Sprig concept and have a company that has their own kitchen to cook specific healthy meals? Really simple concept, easy to manage and to start, would cater to specific cities in the Bay Area.

Once I gathered my ideas and presented it to my partner, he loved the idea! Especially specifying it to a specific area of the Bay Area. That along with the specific chosen times would essentially cut down time, period!


Another part of my research was sorting out the products into categories I would include in my website that fit the needs of my users. I had a hard time working with the card sorting and knowing where to start by just having a product list. I wasn’t sure how many products I should include, which categories should each product go to. So with some extra work, I categorized products based on what the 3 personas would go for. As you can see below.


Once I had my cart sorting in line, it was easier to begin the Information architecture (IA) process. Although it was hard figuring out the card sorting business, I was able to use that to help me organize my layouts. I found that I gravitated more towards organizing the layouts of the site and begin sketching my wireframes on paper.


I did a journey map on the mobile experience for Cole Hardware. A journey map is a way to keep track of users experience throughout their process of using a product. After testing it out with myself and a partner, we noticed we had the most difficulty finding a product unless I had an idea of what I wanted to begin with. We also had trouble going thru the checkout process and if we didn’t have much patience, we would have left the site.


As I mentioned earlier, I used different sites to gather the best ideas to design the website so I definitely “stole like an artist”.

I had so many ideas I wanted to use, but I had to always remind myself that it was not about my design but what was best for the users.

Dept. category page



Before learning the Sketch software, I had watched a few intro videos on that was really helpful because once we went over learning Sketch, it was so much easier to work with and get started. Once I got the hang of it, I was able to create a few wireframes but the hardest part for me was not focusing on the details and just keeping boxes simple. Below are a few examples of my first drafts.

Homepage: Kept it simple but too much color
Product page: Was still figuring things out but I had some sort of structure

Invision: Interactive prototype

I used InVision to transfer my wireframes to create an interactive prototype. This was important to do our usability testing.

This is where focusing on minor details got me, instead of gathering as many user feedbacks, I kept trying to perfect my wireframes until I just decided to go ahead and test my prototype on a few classmates.


I finished most of my wireframes and went ahead to test my prototype on others. The feedback I received was:

“ Great flow! Just make sure to not lead so much when instructing the scenario”

I guess that made me realize that I really need to watch what I said to my users. I also noticed that had I not focused so much onthe detail of the design, I would have considered my users better.


After considering all of the feedback from my classmates, I changed up a few small details on InVision such as making certain buttons clickable.



Here are all of my wireframes I ended up using in my final prototype

Now, I will take you thru a flow for Thomas: Thomas wants to purchase an item for his brother’s birthday. He wants something quick such as sales or recommended items, once he finds something, he will go through the checkout process.

Order complete!

My User Flow Chart

With Thomas, I wanted to create a super simple and easy user flow whether he was purchasing a tool or a gift card.

My Site Map

Along with User Flow, the site map should make sense, be simple and organized.

What I would do different


After presenting my research findings and interactive prototype, I was able to gather what I did well and what I could improve on.

I feel I did well on my tone and pace of my presentation. We were given 8 minutes to present our keynote. Some of the feedback I received on my delivery was making sure I make more eye contact with my audience to make a connection. Overall, I feel I put together a good deck that included my style.


Based off my presentation, I feel I put more time into making my wireframes and actually organizing my keynote that there wasnt time left to practice on my delivery. My goal is to write down tasks I want to accomplish throughout the day to hold myself accountable and moving on pace next time.


I think it took me a little longer to understand the different research concepts and methods that I might have fallen behind. After more practice, I feel comfortable leading competitive/comparative analysis, journey maps and card sorting.


After my 2nd project, I can feel that my knowledge in UX is growing and growing. There were topics and methods I had trouble understanding during the first 2 weeks, but am understanding much quicker now.

My biggest takeaway is to learn how to manage my time when presenting a concept. Sometimes you won’t have 5 minutes to show what you got. So I definitely want to practice presenting a clear picture to my audience with my sketches and prototypes that allows them to understand and buy in on my idea. In addition, I wish I managed my time better to do more usability testing with my prototype. I only used half a day to make time to test but I would have preferred at least 2 days to test and iterate.

Another thing that I’ve learned is the value of feedback. “Don’t rely on opinions but behaviors” is what I am taking to heart. We are putting lectures in action with this introductory project and I am really excited to keep learning.

Lastly, I think I need to shy away from showing classmates my work. I waited until I felt my work was presentable to show and test it. I’m sure it’s pretty common for people to feel their design is not good enough or that they’ll get judged but you know what? Who cares! Just get your design out there and tke in the feedback and iterate it to make it the best you can make it. TRUST THE PROCESS!

Like what you read? Give Gladia Castro a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.