What is the experience? Who is the audience?

The experience is the redesign of gatesnfences.com, a Miami-based e-commerce website specializing in metal gates, fences, parts and accessories. The old website suffers from many design and organization issues which was likely was having the effect of turning away potential customers. In addition to many other issues, the site itself felt cluttered with no sense of hierarchy of elements. There was no consistency – with navigation, with images, with links, etc. There were broken links and some pages could only be reached by going through other pages. There was little-to-no whitespace and the color palette and overall aesthetic was not pleasing or welcoming. It felt a little like a time capsule from the earlier days of the web and it is my job to bring it into the 21st century. Also for its function as an e-commerce site it did not function well at all. It was not easy to consistently add items to your cart, or even get to your cart to see what is in it. All of these factors add up to a frustrating experience for the user, likely resulting in user fatigue and looking elsewhere for their needs, and the site didn’t exactly inspire consumer confidence or feel safe/secure, which is ironic considering the company is selling safety/security products.  The target users of the website are homeowners in need of, and in a financial situation to be able to afford, decorative aluminum gates and fences for their properties, as well as contractors in charge of construction projects both residential and commercial. The audience would likely be predominantly male, middle-aged and fairly wealthy for the homeowners, and likely more blue-collar males well-versed in construction methods with a knowledge of what they are looking for in terms of parts for the installation of said gates and fences. 

What about the new visual style you are going with is provocative/interesting? Why did I pick it?

For the redesign, simplicity and organization were going to be key. The site suffered from clutter and lack of whitespace – a place for your eye to rest – and therefore felt overwhelming. I wanted to fuse a clean, modern, almost minimal interface with a functional no-frills experience where basic functionality – browsing and finding the products the customer needs is prioritized and then provide a smooth and pain-free way to purchase said items. My target user would appreciate a site that works well, without a lot of fluff, but also should get an aesthetically pleasing experience through the use of proper design principles, even if the average user is unaware of or unable to pinpoint why its a better experience, it should be obvious.

The site has a lot of content so one of the tasks of the redesign was to consolidate and organize that information. I wanted a simple, clear, functional top bar navigation with products nested in drop down menus rather than listed long on the site like it was previously. I knew I also wanted a large, clear high-quality image on the homepage to highlight a product and give an overview of what the site is about/selling. All of the images on the old site are small and filled with a watermark that completely obscures them. Also links to cart and account should be visible and consistent from each page, since this is an e-commerce site.

Even though Fitbit and Chick-fil-A are not related to my site’s product and are selling something completely different, I liked the overall aesthetic of these two homepages. There is simple clean navigation and it is fairly intuitive. The large central image is eye-catching and makes you want to learn more. This stye I observed is a bit of a trend right now, but for good reason. It is both aesthetically pleasing and functional.

Bringing it a little closer to my site’s subject matter of home improvement products, I liked how Home Depot’s site is laid out. It features a prominent way to search and nests products in drop down and expanding menus from the top bar navigation panel. Scrolling down it also breaks down products by category visually with simple clickable icons.

In what ways is the example successful?

For the Home Depot site, although there is a lot of information, it is laid out well and doesn’t feel cluttered. It feels organized, clean, and welcoming and makes you confident in doing business with the company. For the Fitbit site, it is very aesthetically pleasing, creates a brand identity, and feels airy and open and very welcoming. Both of these sites utilize a grid system and consistent color palette which is something I have been incorporating in the redesign. I have been only using large-high quality images to showcase professionalism and represent the products and brand well. Both sites have a simple, intuitive homepage that shows you just enough and then is expandable and explorable to find and browse products. I think one of the main challenges in design, and also one of the most important ones is making it look like there is less information than there actually is. It should go without saying that all of these examples function well with no broken links or anything, an they inspire consumer confidence. The user would feel comfortable doing business with these sites and that was my goal for the redesign.

How might you make it even better?

It is my goal to combine the pleasing aesthetic of a site like the Fitbit site with the organization and functionality of the Home Depot website while establishing a brand identity like these two sites clearly have. To make my site better, it is a blend of these things that I will be trying to utilize, with the end goal of a more positive user experience that does not end with frustration and fatigue for the user, but creates a pleasing, intuitive that makes them feel confident doing business with again and again.

I wasn’t sure what to do for a quiz example at first. I thought about using one of those “Which Prog Rock Band Are You?” examples, but a quick search for quizzes brought me to this Buzzfeed example. As a geography nerd I am attracted to weird things like this. I’m not sure if I would call it annoying, but it sure is addicting.

What is the experience? Who is the audience?

This is a very simple, yet highly entertaining quiz. It’s all on a single page. It’s all within a window on a single page. Despite sounding overly simple or boring, its actually quite challenging. You begin by selecting all cities in the given list which are capital cities. As long as you keep choosing correctly, you get to keep going. But as the list narrows the stakes get higher. As you progress and select cities it gives you a total of how many in the list are still left. As soon as you select an incorrect city that is not in fact a capital city, you lose, the game is over and you get the option to retry with a new list. Because its a Buzzfeed quiz I assume the audience would be a younger demographic. It would also attract geography nerds like me, students, people with time to kill, procrastinators, people studying for a geography bee, and people studying for Jeopardy.

What about this example is provocative/interesting?

The strength of this quiz is its simplicity. Its really pretty brilliant how simple yet addicting the format is. As you keep choosing capitals correctly you get to continue and it has a running bar that shows you many you have found out of the 21 total and how many you have left to find. I guess you could view it as a game in addition to a quiz.

Its so quick and its easy to replay once you lose. They make it easy to share through different social media platforms so you can annoy your friends. Because many of the capitals appear repeatedly in every successive replay, you can learn from your mistakes and improve your score. Its sort of like the game “Memory” and you will find yourself struggling to remember if a certain city is a capital or not even though the last game’s outcome told you the answer. You begin to doubt yourself and the stress builds, and you choose. Wisely or foolishly.

What about this example is successful?

Like I was discussing earlier the strengths are in the simplicity and and speed. Its easy to fail and quickly start over fresh with no consequences other than having to begin from the beginning. It embodies the idea of learning from our mistakes. I suppose if you are really crazy you could keep a notepad nearby and put a check mark next to every city that is correct so you can repeat it, but then you might as well just google every capital before you click it if you want to cheat. But where is the fun in that? Its supposed to be a test of your knowledge and memory.

How might you make it even better?

It would be neat to have the cities laid out on a world map, or in a google earth style, but it’s not essential. The list format works fine. Other than that, I can’t think of a way to improve this quiz. Oh and if you are wondering about my best score, its 18. Damn you São Paulo. You should be a capital… Yes I want to try again. You will too. Here’s the link: https://www.buzzfeed.com/robinedds/can-you-score-full-marks-in-this-capital-city-minefield-quiz?utm_term=.pay1AvlRL#.dfyKWdaMl

Facebook

What is the experience? Who is the audience?

Facebook has come a long way since its debut when it subsumed the role of the original social media site that started it all for my generation – MySpace. It seems as though most people my age and younger have now migrated away from Facebook in favor of other social media apps like Instagram and others. This may be because facebook attracts an older audience as of late, everyone’s family is on, and it has become all too often an arena for ugly, hateful and unintelligent political and social debates. I use the word “debates” loosely here. And yes sometimes despite knowing I should avoid browsing the comment sections of some posts – mostly political and especially local news posts where it seems like the worst of the worst just spout every uniformed opinion that pops into their head – sometimes I can’t avoid looking for the entertainment value, but the end result is usually the same – a near depression and despair about the state of our country and the rampant anti-intellectual, anti-education streak apparent from the “top minds” on this social media platform.

But then I must remind myself its not all bad. What is nice about Facebook for me is I can customize it. What I mean is suppose you have a racist uncle who only talks about Hillary’s emails and how Obama is the socialist antichrist and his main platform to spout this rhetoric is Facebook. You can still be friends with family members or other people whose views you don’t agree with and simply unfollow so you don’t have to see their posts. You can also choose who can see your posts if you are worried about certain family members seeing and commenting on it. While I do really enjoy and use other social media apps like Instagram and Reddit, Facebook brings something different to the table. I find out about a lot of events, concerts, and other happenings local to me that I might be interested it. I discover new restaurants I’d like to try. I discover new and delicious vegan recipes to try. I belong to a lot of groups in which I learn about history through old photos and stories from old-timers I wouldn’t hear anywhere else. I discover amazing trails to hike and places to camp and explore that I wouldn’t elsewhere. I’ve furnished half of my apartment with items purchased on Facebook Marketplace and purchased the bike I commute to and from campus with on there as well. So for as much trouble it can be sometimes, I still see it as an overall benefit and useful to me so that is why I still use it.

What about this example is provocative/interesting?

I already touched on why I use Facebook and what makes it interesting for me, so now I will discuss the subject of this post: the desktop vs mobile experience. The first difference is how I reach the site through different devices. On my laptop, I just browse to the url in Chrome and it opens my homepage/feed.

I can quickly see any new notifications, see if I have any messages or friend requests in the top right corner. The search bar is prominent. Under the search I can quickly write a post/post a photo or video. I can view friends’ stories under that and under that begins the scrollfest of my news feed. I can quickly access Marketplace and view some of the groups I belong to with the sidebar navigation on the left side of the page. So everything is laid out cleanly, they do a decent job or organizing lots of information and navigation and it is nice seeing photos in the large size the desktop version provides. But it feels a little clunky when compared to the mobile version. The mobile experience is where the site shines in my opinion and the version that I use the most. Perhaps is is the convenience and accessibility and how I access the mobile version that explains part of this.

I access the mobile version through the app instead of a browser. This is convenient and creates a different, streamlined experience.

The format is a little different. The nature of the device creates a more portrait orientation rather than the landscape of the desktop version, but I think this works well. Its very easy to quickly scroll through your feed with on finger. The search option is still prominent which is nice, and the ability to write a post or go live is front and center. Stories are highlighted largely in the hierarchy and below that begins the feed. The navigation is set up differently than the desktop version and runs along the bottom of the screen with home, videos, marketplace, news (?), and notifications. The hamburger menu on the bottom right is convenient and allows me to access everything else – pages I run, groups I belong to, saved posts, etc. It is simple, streamlined and includes everything you need in a compact accessible format.

In what ways is this example successful?

I believe this is a good example of a user experience being consistent, intuitive, simple, and useful across different platforms. I think if you are familiar with one version and not the other, it wouldn’t be difficult to learn, as even though elements are arranged differently the icons are pretty much the same across both. For mobile it provides instant gratification and a very easy way to kill time and procrastinate. I find myself learning about trails, campgrounds, photo destinations, local history as well as restaurants and/or events and then further researching them on GoogleMaps or doing a Google search. The desktop version of the newsfeed is long and relatively narrow, similar to the newsfeed on the mobile version and the top bar and sidebar navigational elements remain static as you scroll.

How might you make it even better?

While the ability to search stays consistent no matter how deep into your feed you are, the option to make a post requires either scrolling back up to the beginning top of the page or pressing the link to home, which likely will scramble your feed. That brings me to anther inconvenience. Sometimes you are invested in someones post, reading comments, etc, and you exit the app for a second or lock your phone and reopen it and the post is gone. Your feed is refreshed and its pretty difficult to find that post again. This is frustrating and happens through mobile only in my experience, but the majority of my use of the site is through mobile. Another annoyance in the mobile version is that you must download a separate app to use messenger. It used to be part of the Facebook app but not anymore. I use messenger to communicate with friends almost as much as texting, and that is how you communicate for both buying and selling on marketplace so its pretty important to me. But in reality these are relatively minor inconveniences and overall the app is useful to me and provides and slightly different, but consistent and gratifying experience across platforms both desktop and mobile.

Sounds of Sacramento Rehearsal Studios

In addition to design, another great passion of mine is music. I have played in the local band Secure Sounds for a few years now. We have played countless shows up and down California and have DIY toured through 9 western states. I suppose you could categorize our music as alternative/indie progressive rock. We are a fairly loud 3-piece band so like most loud Sacramento bands we have had one of the many 24-hour rehearsal rooms. They charge you on average around $300-$400 a month for a rehearsal room and you can come and go as you please and play as loud as you like. They are usually a pretty safe place to store your gear as well, with card/fingerprint access to the building. We had experience with 2 different rehearsal room companies – one in North Sac and one in the Del Paso Heights/Arden Arcade area and were recently looking for another. The North Sac one doesn’t exist anymore and the Del Paso one was booked solid. So that is how we came across Sounds of Sacramento Rehearsal Studios.

What is the experience and who is the audience?

The experience is a web page. A single page. There are only 2 clickable things on the page, well 3 if you count the header/logo. The audience are people just like myself – musicians looking for a place to play/practice/record music as loud as and whenever they like. (Luckily we have been rehearsing at my bassists place which is nice and actually has natural light in the form of windows, unlike these dark, musty rehearsal room buildings.)

In what ways is this site bad/challenging?

In addition to the site being merely a single page, lets start with talking about it from a design standpoint. First of all it comes off as very unprofessional, amateur, and a bit sketchy. The logo/banner with black script treble clef S and sun flare on a staff on maroon background needs to be redesigned. The entire page suffers from lack of contrast. Black text over dark maroon background is hard to read and all the text is centered. The Pink Floyd sheet music/tab background is extremely distracting. I’m almost surprised that a midi version of “Wish You Were Here” doesn’t start automatically playing upon entering. The site feels cluttered, claustrophobic and not welcoming to the user at all. A plain white or even solid color background would help with this immensely. I get that this site’s main goal is to give people the phone number, since that is their preferred method of contact, so that should be higher up in hierarchy, maybe along with the physical address. The large single photo of the exterior is of poor quality and doesn’t tell us much.

From a functionality standpoint like I mentioned previously, there are only 3 clickable things on this page. The logo banner directs you back home, but that is redundant on a single page site. Clicking on the large central image opens up Google Maps in a new tab and directs you to a different address than the one listed on the page. I know from personal experience that this is a different rehearsal building completely – The one on Pell Drive that may or may not still exist, so that’s an issue. The only other clickable link on the page is a facebook link, which is like a breath of fresh air, not because the photos or information is any better on their facebook page, but the standardization/grid/whitespace of facebook’s template feels like a welcome contrast to their bad site, plus you can read user reviews.

In what ways is it successful?

Their address is listed prominently. They do show a photo, but it could be of better quality. Contact information, and about the company info is there, but suffers from design issues. 2 of their 3 links work correctly. That’s about it.

How might you make it better?

First I would get rid of their current logo/header. It just looks unprofessional. Next get rid of the distracting sheet music background. Also I would fix the contrast issue of black text over dark maroon (sometimes gradient) background. The phone number should be prominent near the top by the address, since that is their preferred method of contact. The site would benefit from a larger, high-quality central image. It could take up most of the screen and cycle through a few images, perhaps showing the interior of the building, the rooms themselves, their security measures, popular bands that have used their services, etc. I would also correct the link that takes you to the wrong address on Maps. I know simplifying a single page site sounds funny, but it does need to be simplified, cleaned up, and also expanded upon. It is in desperate need of whitespace and a grid system. I would create a navigation bar, so it is more than a single page. The nav bar should include About, Contact, Reviews, etc. They mention that they occasionally work with charities and sponsor fundraisers, but its in tiny text hidden at the bottom of the page. They should make this more prominent and could even include links and/or photos of examples of this. I suppose having a bad website isn’t hurting their business as they are clearly providing a much needed, in-demand service – their monthly rooms are booked solid – but it definitely couldn’t hurt their business either to have a more visually appealing, engaging, functional site.

KCRA 3 Interactive Radar

This may be more of a utilitarian app and interface for the average person. It may just be cool to me because I love geeking out over maps, geography, climate, weather, spatial relationships etc, but I happen to think its pretty cool indeed. Local news station here in Sacramento KCRA (channel 3 on my rabbit ears) has a fairly unique feature that I happen to use quite often called Interactive Radar. No longer is the user tied to the television weather reports but can now view real-time, location-specific weather reports on the go.

A little backstory: By now you have likely heard me ramble about my love for maps in this post and another. I remember thinking a few years ago, before the rise of smart phones, while on an adventure somewhere either biking or hiking, how cool it would be to be able to know my position in real time on a map, to know what’s around me, etc. Garmin in-car GPS, and I suppose really expensive outdoor recreation GPS devices were available at the time, but there was no cheap, accessible mobile GPS yet and I remember thinking how cool that would be. Now let me say there is so substitute for paper maps – for knowing how to use and read them and being able to triangulate your position and landmarks manually. But the digital age has ushered in many conveniences and this is one of them to me. It goes hand-in-hand with adventures, outdoor recreation, etc – to be able to zoom into your exact location on earth and correlate that with landmarks is very exciting to me. Now we don’t even give it a second thought. Google Maps is my go-to app for most of this, but for weather, this one takes the cake.

What is it/Who is the audience?

This app lets you see past, present and future weather conditions graphically by overlaying them over a digital map (a la Google Maps). I believe there is a standalone app for the interactive radar feature but it is accessible through the KRCA 3 app and on their website. Because I have an older model iPhone, I access it through their webpage using Safari while on the go or through Chrome on my MacBook. The audience would be somewhat technically savvy (at least to operate technology to a basic degree) adults with an interest in maps/weather or just needing to plan their day accordingly based on the weather and where they are going (Should I bring a light coat or a heavy rain jacket and umbrella?).

What about this interface is interesting?

If you are familiar with other GPS-based online maps like GoogleMaps, Apple Maps or OpenStreetMap you will have no problem figuring this interface out, as it functions just like most of them. You can toggle around to a specific area, zoom in and out, etc. It basically covers the range from the entire U.S. to your house/apt on your street. And that right there is what is so cool about it to me. You can zoom into your exact location, at home or on a mountainside, and see when and where weather systems will affect you. You can see where they came from, where they are going, where they are now, which direction they are moving, how fast, etc. You can them correlate this with what your eyes see when looking at the sky. Its really cool to see dark clouds approaching on the horizon, open this app, confirm they are rain clouds, see if they are indeed headed toward you and predict when the first drops will hit your location fairly accurately.

In what ways is this example successful?

The app uses layers to show weather systems that are color coded (green for rain, blue for snow) and intensity of those systems (severity of rain clouds goes from light green to dark green, yellow, orange, and red, with red being the most severe). A similar system of varying shades of blue is in place for snow. Pink is a mix and rain/snow. It is really cool to see exactly where and at what elevation the storm changes from rain to snow (the snow line) and confirm that by being out in the thick of it. Because of our location in California most of the activity, at least here in the central valley, will be in the winter, spring and fall. Summer is a bit boring with this app as the weather is monotonous – sunny and hot. You can change the opacity of the colored weather systems to your liking as well.

It allows you to choose between future and past to see where the systems have been trending up until now or to see where they will be in the future.

Whether on future or past settings an active slide bar corresponds to the time that it shows. You can let it cycle through which will eventually loop, or drag it to an exact time which will pause on that time.

All of these features can be extremely useful, practical and perhaps even life-saving (provided you have internet access in a given location). Let us imagine you are in the backcountry with internet service on your phone. You are thinking about summiting a nearby peak but you see ominous clouds approaching. You can then use this app to pinpoint your location, find said dark clouds, determine in which direction they are moving, how severe they are, and when and if they will impact you, thus influencing your decision of whether or not to bag this peak.

How might you make it even better?

I use this app a lot during our stormier months and I would be hard pressed to find a way to improve it. Sometimes it can be a little glitchy at first and the clouds will load later than the map, but I believe this is based on the strength of your connection and how powerful and new your device is. It is a good supplement to weather reports and often determines whether or not I should bring an umbrella or jacket with me to class. I would say adding links on the map to live-webcams or user-uploaded photos/videos of various locations to confirm and correlate what the app is saying in terms of weather conditions could be an improvement, but I would be hesitant to introduce any clutter to this app. For me and what I use it for not only is it practical, its just plain cool.

I really hadn’t heard the term UI or UX until coming to Sac State to continue my study of graphic design. In an intro to web design course at community college, and for that matter in most previous of my previous design courses, the idea of “the user” was always to be kept in mind when designing anything. It goes hand-in-hand with any of the early variables in designing anything such as the format, function, audience, purpose, etc. To design anything without keeping the user in mind would be a costly mistake.

I first became familiar with the terms UI and UX in GPHD 5 at CSUS and it was introduced as concerning visual as well as sound and haptics. It had previously been referred to as “new media” and thats what I had known it as before then. There is overlap between the two, but my understanding now is that UI deals with physical reaction (how you- a human, physically interact with the digital interface) and includes screens, mice, touchscreen, keyboards, joysticks, etc, whereas UX is more complex and deals with the utility, ease of use and efficiency, and as the name implies is more concerned with the experience of that interaction. In short UI is the interface, how you interact with something (a website or app for example) and UX is what you take away from that interaction – the overall experience.

what is the experience? who is the audience?

The app I chose to talk about is called Road Bike by Runtastic. As the name implies, this company is previously involved with creating running apps (which they may be better at). It is an app I use to track my bike rides, to get stats and maps of my rides for my own enjoyment and information. The audience is other people like myself active and interested in biking. This would likely be a competitor to popular apps like Strava. I originally wanted to get Strava but my iphone is too old to support it, so that leaves me with Road Bike.

what about this example is provacative/interesting?

I’m really into maps. I can get lost in Google Maps for what seems like hours, following rivers, scouting peaks, looking up trails to hike and bike, etc. I always say if I could only have one app on my phone it would be Google Maps because of all it does. That said, I wanted something that I could not only look at and interact with maps but could track my routes and progress on. One of the joys of speeding down a bike trail is wondering to yourself “How fast am I going right now?” This app is great because it not only shows you on a map overlay the extent of your ride and its milage, but allows you to view things like top speed, average speed and keeps track of all this so you can see first-hand how you are progressing. It makes you want to ride more and beat your last time/distance.

in what ways is this example successful?

This app is successful in its ease of use. It is pretty simple. You open the app, hit start and choose the kind of biking you are going to be embarking upon (There is an option for race which I have yet to try). Then the timer starts and it begins tracking your milage and mapping your ride. I like that I can see my history of past rides and how I am progressing. Similar to a running app that I use, by virtue of itself, it makes you want to go out and do that activity. It motivates you to just do it. I also like that it gives me a rough estimate of calories burned.

how might you make it even better?

There is an option in the app to upgrade to PRO which may offer some of the features I am about to describe which I wish it had, but I am cheap. The app is great for what I use it for, although I do wish it had a more accurate reading for elevation change and a more accurate real-time speedometer. Right now the speedometer not very linear when viewing it while riding and seems to increase in mph by big chunks. But I suppose an actual bike computer would be better suited for real-time tracking on a screen, and most of the time I just turn on the app, put my phone in my jersey pocket and just focus on the ride, reviewing my states after the fact. I also wish that it had options and categories like “overall top speed” and “best average pace” or take both of these into consideration for “fastest overall ride”. But for what I paid for it ($0) I would say I’m pretty satisfied.

This is an example post, originally published as part of Blogging University. Enroll in one of our ten programs, and start your blog right.

You’re going to publish a post today. Don’t worry about how your blog looks. Don’t worry if you haven’t given it a name yet, or you’re feeling overwhelmed. Just click the “New Post” button, and tell us why you’re here.

Why do this?

• Because it gives new readers context. What are you about? Why should they read your blog?
• Because it will help you focus you own ideas about your blog and what you’d like to do with it.

The post can be short or long, a personal intro to your life or a bloggy mission statement, a manifesto for the future or a simple outline of your the types of things you hope to publish.

To help you get started, here are a few questions:

• Why are you blogging publicly, rather than keeping a personal journal?
• What topics do you think you’ll write about?
• Who would you love to connect with via your blog?
• If you blog successfully throughout the next year, what would you hope to have accomplished?

You’re not locked into any of this; one of the wonderful things about blogs is how they constantly evolve as we learn, grow, and interact with one another — but it’s good to know where and why you started, and articulating your goals may just give you a few other post ideas.

Can’t think how to get started? Just write the first thing that pops into your head. Anne Lamott, author of a book on writing we love, says that you need to give yourself permission to write a “crappy first draft”. Anne makes a great point — just start writing, and worry about editing it later.

When you’re ready to publish, give your post three to five tags that describe your blog’s focus — writing, photography, fiction, parenting, food, cars, movies, sports, whatever. These tags will help others who care about your topics find you in the Reader. Make sure one of the tags is “zerotohero,” so other new bloggers can find you, too.