How much copy should I write for my website?

I’ve been working with a client on redesigning their website and they have asked me  “how much copy should I add to this page” OR “is this enough copy?” In my head I’m thinking of the best way to answer without contradicting myself or making it more complex than it needs to be when explaining to someone who doesn’t know a thing about web design.

At first, I wanted to respond from the marketing perspective in that copy helps drive SEO. However, my client was already using other successful SEO strategies and therefore it would be unnecessary. I’m all about educating my clients as much as possible, and I didn’t want to blurt out some answer without some real thought behind it. So what do I do? I went to good old Google, I typed in how much copy to have on my website?

I click on the first article that pops up which you can view here. And in this article, the author has provided an infographic. And of course that infographic is from The Nelson Norman group, how could I forget!? What an amazing resource. I was able to give my client a short and concise answer based off of the infographic:

Screen Shot 2019-04-03 at 5.13.26 PM

As a designer we may take on the role of copywriter, we may, in fact, take on many roles, but we should always also take on the responsibility of being truthful and honest. -Luka P.

 

If you’re not sure how to explain something to your client, it’s totally ok to quote another resource. I’m just wondering why I never thought of that in my prior client facing projects. Sometimes we don’t always have the right words despite our experience and knowledge, and I am encouraging you today that, that is ok. As long as you are honest and providing high quality work, usually clients don’t mind if you say, ” I am honestly not sure, but I will look into it and get back to you.” I find thats more productive of an answer rather than getting stumped and feeling inadequate.

Sorry not too many pretty visuals today, however I may share with you in my next post some of the things I have been designing.

Thanks for stopping by & stick around for all design related topics 🙂

Advertisements

The Little Mermaid App

 

I had this great idea awhile back for some freelance projects, what would Disney character’s websites look like? What Services would they offer? Or what Apps would fit their characteristics and personality? With that said, I decided to create Ariel’s App, which you will notice is similar to the Offerup App with changes to fit the context of Ariels’s grotto from the movie.

 

This project was so fun and had so many different design elements to it. All the items in Ariel’s Grotto were photoshopped. When I originally had the idea for the App, I was picturing it as more illustrative and similar to the movie, but I am not necessarily a character illustrator. I knew I could make something interesting in Photoshop but it would be more closer to reality than a cartoon style, so I went with it. Below are some of the various items I photoshopped, I wanted to show you the details. Let me know which one is your favorite!

Keep scrolling to see all the additional pieces that went into composing this UI…

Untitled-1Untitled-2Untitled-3.gifUntitled-4

I even Photoshopped the model that I chose for Ariel. I changed her eye color, and colors of her wardrobe to match the coloring of the UI. I only needed the model’s face for the profile photo and because the thumbnail size is around 300px I could get away with not making perfect selections or removing her flyaway-hairs.

before_after.jpg

I did use Font Awesome to create the icons, it is my number one go to. The conch shell replacing the phone was however created in illustrator. The chess piece which represents the home button was left untouched. The camera was taken from font awesome, but I added bubbles to it. The star fish is actually titled disease in font awesome? And the mermaid’s tail-fin was inspired by the seedling icon.

icons.jpg

I created three screens originally because I had planned on presenting a GIF which would demonstrate a CTA button, basically the user would select the profile button (mermaid’s tail-fin) and then the profile screen would appear). I had trouble with the GIF appearing grainy, so for the sake of time I may include an animation piece for this project in my next blog entry ( that would be composed in AE).

iphone_mock2

iphone_mock

Hope you enjoyed seeing the results as much as I did! Always, thank you for stopping by I appreciate you checking out my work and would really appreciate it if you would show some love and hit the like button down below this post 🙂

Check out what other Designers are saying about this project on my Dribble account

The Design Interview Exercise

mock-up.jpg
A Design Exercise I completed. Keep scrolling for the case study.

By now I have had various requests for different design exercises. In fact, I even landed a job based off of one and it ended up being a great short-term gig. This seems to be a topic of debate for which I do not currently take sides. I also came across this interesting article: “Design Exercises are Bad Interviewing Practice“.

What are your thoughts? I personally look at design exercises as a way to grow as a designer. I treat them seriously and look at it as if I have received a real-world brief by a real client. In the ideal situation, you would receive feedback to improve your design, but it is not always the case that you hear back from potential employers for various reasons.

Even with a follow-up sometimes there is NO answer. My suggestion is to move on and keep applying! And if you did “waste your time” on a design exercise, change your perspective. Were you challenged? Can you make it better? Did you offer a new solution? At the end of the day, it strengthened your creative muscles and made you physically design something!

If you are not designing something every day on your downtime or freelancing while looking for work that’s just unproductive. As a designer, you are responsible for your growth, with that said…That design exercise given to you by a recruiter or potential employer was a freelance project. I would personally like to share one design exercise that was given to me (the brief has been shortened and slightly changed for NDA reasons). This was specifically for a UX role. I wanted to share with you my process in how I went about solving this exercise.

Assignment

Redesign the mobile checkout form for a new user at an ecommerce site.

Scenario

Rachel, a 34 year-old mother, is in an airport waiting to board a flight to Colorado for vacation. She has some time to kill before her flight, so she does some impulse shopping online. This is her first time purchasing anything on this site.

Rachel needs to fill out the checkout form, which contains billing/shipping and payment info. Once she provides that info, the site will allow her to review the info before submitting the transaction.

PROCESS:

  1. Define Competitors
  2. Competitor Analysis
  3. Review UI elements & functionality from competitors in detail
  4. Wireframe/Prototype
  5. High Fidelity Prototype

STEP ONE:

First I thought of online department stores that women around the age of 34 may shop at. I just started to list as many as I can regardless of price, quality, and branding. Then I narrowed down my list to five for two reasons. The first being I was only given a few hours to complete the “task” aka design exercise and the second -based off of my assumption that Mothers are more likely to shop at these 5 online department stores.

General Competitors:

  • GAP
  • Jcrew
  • Nordstrom
  • Macys
  • Banana Republic
  • Target
  • Kohls
  • Zara
  • Maurices
  • Zulily

Direct Competitors:

  • Jcrew
  • Nordstrom
  • Zara
  • Banana Republic
  • Macys

Assumptions are never good in the world of UX -you can read more on this topic hereBut in the event that you are on a time crunch, you can always explain your thought process or reasoning and you can even say “my assumption was…”. The individuals running the interview understand that this is simply an exercise to help them understand your thought process. 

STEP TWO:

I created a short table to record my competitor analysis. When I finished reviewing the shopping cart icon on each site, I realized it was completely irrelevant! After revisiting the brief, it was clear to me that the user (Rachel) had already looked at the items in her cart so there would be no need to design the shopping cart. After this mistake, I realized the importance of understanding user flows.

table.jpg

I also would like to add that the icon was a shopping bag and NOT a shopping cart. Which I never noticed since I don’t do too much online clothes shopping, but it made me also realize the importance of understanding the context of what your designing for and creating a visual language based off of that.

STEP THREE:

I took screenshots of the functionality & UI elements that I thought were successful in each competitor site to keep in mind when I design the mobile checkout form. I will only share a few features with you today.

Screen Shot 2019-03-20 at 10.22.35 PM.png

Jcrew had each part of the checkout process on a separate page, and the user can’t move onto the next section until the one before it is completed. What I liked about using a user funnel is that the checkout process is broken into chunks and there is not too much scrolling up or down.

Nordstrom displays a sticky header that reminds the user of how many items they have selected along with the subtotal, which is a completely different solution to just having a shopping cart icon to click on. The user doesn’t have to backtrack to their cart or wait until checkout is completed to be reminded of the total.

Screen Shot 2019-03-20 at 10.55.05 PM.png

Old Navy had a unique swiping (left to right) action for the shipping method section. The selections were also not placed in your typical box but were placed in circles which conveniently match the shape of your finger upon being tapped on.

Across all competitors, each portion of the checkout was labeled and easily identifiable in terms of hierarchy. The brief also mentioned that this is the first time the user is purchasing on this site. Banana Republic would not allow me to finish my checkout without creating an account while all the other competitors offered to check out as a guest. This was an important part of understanding the user flow and would play a crucial role in the success of the final outcome (purchasing the product).

STEP FOUR:

My low fidelity prototype was mainly to include key elements of the content. In the Payment section as well as the shipping method I did wan’t to include the same left to right swiping motion as Old Navy did. The credit card choices would be swiped left to right based on this design, however I did not go with this functionality because I felt it was inconsistent with the simplicity of the other sections.

wireframe.jpg

The sections would also be collapsed until the user has finished that section. In a way, this solution is similar to the user funnel in the Jcrew example. Once that section is completed it collapses and the user has the choice to expand that section if, for instance, they decide they wanted to enter in a different credit card.

I wanted Rachel, as a new user to know each step of the process without guessing or getting lost and to reduce scrolling so the process is straight forward. The labeling on the fields was actually inspired by Target, and I went with this solution to save space. However, ADA compliance recommends 12-14pts for legibility. You will shortly see the labels were set to 12pts and did not compromise the visual design.

Final_1.jpg
All sections expanded

I tried to use color sparingly and I wanted the labels to have a clear hierarchy and I wanted to focus more on the UX process for this particular project. The colors scheme may not be ideal but when I thought of Colorado (where the user is from) I chose a neutral brown with an accompanying highlighter color.

final_2.jpg
Sections not completed collapsed

I hope this was helpful or insightful to you, and always thank you for stopping by to see what projects I’m working on or what topics I am currently discussing. I would really appreciate it if you would leave a comment to keep the conversation going, I am very curious about your thoughts on the Design Interview Exercise.