Elle Henderson

One of my ideas for my final capstone project involves re-designing the e-commerce website of Jalema, Inc., which is a company my dad works for. 

Currently, their website is very out of date:

As you can see, it is a very early/mid 2000s style website. 

I have a decent amount of experience when it comes to designing websites, however I have never designed an e-commerce site. The idea of an e commerce site scares me a little, as my mind immediately goes to Wordpress plugins. 

But after talking to some people in class and looking around a little, I decided to try out squarespace’s e-commerce site. I started to design the homepage:

After designing the entire homepage, I decided I didn’t really like squarespace - I hadn’t even gotten to the e commerce functionality, but I knew I wanted to try a different platform.

I had been seeing a lot about Shopify for creating an e-commerce site, so I decided to make an account.  Rather than first designing the homepage, I decided to look at how the commerce functionality on shopify works. 

Shopify has a very intuitive dashboard where you can easily add products, track your orders, check the analytics, etc. For me, the products tab on the dashboard was key. By clicking on “products,” I was able to easily add all of Jalema’s products onto this new platform *fairly* easily (it was time consuming, but not horrendous). 

I added a few of the products from Jalema’s original website onto the new shopify site. 

After trying out the commerce functionality and ultimately deciding I liked it, I decided I could try out the design aspect and design the homepage on shopify:

I also added a dropdown under the shop tab on the nav bar that looks like this: 

Really cool way to explain his summer project - I should add something like this to my portfolio. 

When googling sunday football, these are the results that come up. As you can see, there is no apparent answer/schedule that is laid out.

However, when you google a specific football team, an intuitive schedule is laid out for the coming weeks. For example, here’s what you see when you google the Green Bay Packers: 

This past summer, I worked on a project involving slickdeals.net and how they may exploit deals from retailer’s websites. Slickdeals is a forum-style website where users can post deals they find from any retail website to spread awareness of the deal. This becomes a problem for retailers when a deal was unintended/a mistake, and slickdeals gets ahold of the deal and this mistake goes viral, thus losing the company revenue. 

While this is a serious problem for retailers, it is not what I’m going to be critiquing today. After spending weeks on slickdeals.net, I became pretty familiar with the site and have some critiques regarding it’s interface. 

What is the objective of the design?

The objective of the design of slickdeals.net is to promote deals that users have found to the greater public of deal-seekers. Slickdeals.net has a ton of deals and information surrounding those deals, however the information could be formatted in a better, easier-to-digest way.

What elements of the design are related to the objective?

There are a ton of elements related to the objective of promoting deals. Everything from the “frontpage deal” tag, to the number of views, to the comments, the fire symbol, the thumbs up, etc. all are included to give the user more information regarding the deal.

Are those elements effective in achieving the objective?

These elements are great in that they give the user more information about the deal. However, there are a lot of confusing aspects about these elements. Below I will critique these elements in greater detail, from the fire emoji, to the “frontpage deal” vs. “popular deal” tags, to the thumbs up and more.

For the sake of this critique, I’m going to look up homedepot.com on slickdeals.net. 

After searching homedepot.com in the search bar, this is the page that comes up. There are tabs that allow you to switch between “frontpage deals,” “popular deals,” or “mixed.”

There is no description on the difference between frontpage deals and popular deals, and when you click between the tabs, the same items remain on the page, they just are sorted in different ways. I am unclear on what the criteria is to make a deal “frontpage” and to make a deal “popular.” Oftentimes, the popular deals with have less thumbs-ups/views that the frontpage deals. It would be helpful to have a description or some form of criteria for differentiating between the two categories. 

Once you get into the actual table of products that slickdeals has listed for homedepot.com, there is a lot going on - and for me, a lot of confusion.

The first thing that confuses me is the fire emoji next to the price. Every single deal on the page has a fire symbol, except for one product. The only reason why I can figure that one product doesn’t have a fire symbol is because its being sold from Walmart and not Home Depot. Again, that is just an assumption that I’m making. There is no information or description on what exactly the fire represents. 

Next, the rating column is unclear to me. I see that there is a +39 rating number for the first product (Manhattan comfort free standing TV stand), but again I have no idea what this number means or where it is coming from. It can’t be the number of views, because the number of views for this product is shown to the right at 48,015. It also can’t be the number of thumbs-up, because right below the +39, there are 5 thumbs up. I’m assuming it just means the rating of the deal is +39, but I don’t understand how they came up with that number, or really what the number even represents. 

I am also unclear on the thumbs up. Every single deal has 5 yellow thumbs ups, so I don’t even know if the amount of thumbs up for products change, or if it’s just a visual representation that its a good product? I’m unsure if the thumbs up have a meaning or purpose, or if they are just there for visuals. 

Also - if the amount of thumbs up can change for a product, what is the criteria for 5/5 thumbs up, or 4/5 thumbs up, etc. Does it deal with price? Value of product? How good of a deal it is?

The next column for the TV stand shows the activity for the deal.

This column is fairly intuitive, however I think it would be nice if you could click on the comments from this listing to read them. The are currently just static blocks of texts that present you the information rather than allowing you to interact with it. 

I have a Garmin watch, which is a GPS watch that I use for running, biking, swimming, etc. It tracks my miles through the GPS. There is an app called Garmin connect that connects with the watch, however I barely ever use this app. 

I go on dribble all the time and see really cool dashboards for health/fitness apps. They are intuitive, well-designed and honestly, just way cooler looking than Garmin’s interface. 

Examples from Dribble 

Above is Garmin connect’s interface. 

I want to redesign Garmin’s homepage as more of a “My Day” dashboard that is informative and easy to check every day. The interface now isn’t bad, however you really have to go digging around the app to find different information that could be included in the “my day” home page. For example, sleep, water, calorie intake, stairs/elevation, health & performance, training, etc., are all things that are found in various areas across the app. Also, if you workout that day, you have to go to a separate page to find the details of that workout. 

I can create an experience map, that follows the user’s journey throughout finding the most pertinent information on the app. Using that, I can decide which information is the most valuable to put on the “my day” homepage. 

This weekend, I went to Denver to visit my friend. While he has lived in Denver for a few months, we are both from the east coast and have limited experience when it comes to hiking. 

After googling different hikes and finding one that looked doable, we asked his friends (who are Denver natives) whether this would be a good hike. They were horrified and told us it was way too hard. 

Therefore, I decided to make an app using XD that is super simple and easy to tell if a hike is easy/medium/hard level of difficulty. 

the first page of the app is just a landing page 

this page is on the screen for a few seconds as the rest of the app loads, then takes you into this page:

Here you can choose your hiking level by clicking on one of the buttons. Ideally this would be a picker view, but I couldn’t figure out how to design that in XD without it looking weird. 

After clicking the beginner button, you will be taken to this page full of beginner hikes. The elevation change for each of these hikes is between 700 and 1,500 feet, which classifies it as a beginner level. Each hike has a short description and a picture.

 Then it has some facts listed, including the elevation change, trip length, and difficulty. I chose to list these facts so the user can easily and quickly tell how hard this hike will be. Since these are beginner hikes, they are all fairly low in elevation changes/distance. 

Here is the page of intermediate hikes. Again, it has all the same information listed as the beginner hikes page - these hikes are just a bit harder. The elevation change of 1,500-2,500 feet classifies them as intermediate. 

Lastly, we have the advanced hikes page. Again, it has all the same info as the beginner and intermediate hike pages. The elevation change of 2,500-5,000 feet classifies these hikes as difficult. 

If this were a real app, there are some things I would like to build out more. For example, I would like to add a commenting functionality to the app. If my friend hadn’t asked his friends from Denver about the hike before we did it, we would have never known how hard it was. Word of mouth is a great way to get information out there, and commenting/creating some sort of forum for these hikes would be really useful. 

Also, the difficulty listed has no criteria/reasoning behind the number. I would like to add some sort of description as to what makes the hike’s difficulty rating higher/lower. There is some information that you can assume changes the difficulty (such as elevation change or trip length) but it needs to be explained more to the user. 

I’m also not sure if the elevation change levels (see below) makes sense to users. 

Taking inspiration from @kaitlynfellows​ post about the tumblr editing issue - I have also been having a problem with copy and pasting text to tumblr. 

Often, I will type text in a word doc/on a note and then copy and paste it into a tumblr post. But when I do that, it will be copied into tumblr as an image rather than text.

In order to copy and paste this text into tumblr as text rather than an image, I found that you have to right click and select “paste and match style”