Case Study: Project 4, of User Experience Design Bootcamp at General Assembly.

Objective: Create a prototype responsive landing page website for a client. The client being a classmate’s first project.

Software Used: Sketch app, CodePen, HTML and CSS.

Classmate Client: Sam Lanni

Subject of the website: Atmosphere App

For this project, we had to create a website prototype for a concept that was already prototyped.

The premise of this lesson is to give us the experience of displaying someone else’s idea. Our instructor wanted us to approach this like a startup client. In his words,

“They have the concept. Now they need a website to promote their product.”

Research

I started with a searching out any competitors that may be out there. The one app that was closest to the concept was an app called Swackett. This app appeared on the Apple App Store.

One thing that caught my eye was the use of blue in this app. Blue is a very versatile color in terms of design and this was no exception. Considering this was an app that involved weather, it only made sense that blue would be a color involved in this app’s design.

Mood Board

Searching for inspiration, I used Pinterest and pulled together some images that would get my mind going. These included images that had people in city streets, hiking, raining window and other landscape views.

After I felt like I was in a good place with research and with the time remaining before the deadline, it was time to put ideas to paper.

Sketching Logo and Layout

This concept didn’t have anything a pre-determined logo or brand image, I had to brainstorm one for this project.

With a sketchbook and pencil I quickly drew some ideas of a logo for it. I wanted to try and make sure the purpose of the app was suggested in the logo’s design.

After a few drawings, I decided to move forward with the bottom left drawing.

With that drawing, I went into Sketch app and make it using the shape and lettering tools.

I add a simple box to make it easier for legibility.

Designing the layout was the next challenge on this project. I had to decide, what information would be necessary to promote this app and it’s usefulness.

Ideally, someone should read the site and decided to sign up on the mailing list to receive updates.

With that in mind, I used the header for a connection point to users. Something that would make them say either “yeah I’ve been there,” or “that is a problem I have.”

After some brainstorming I decided on this list for the layout.

  1. Header landing page — Have a connecting hook with an button to either learn more or join the mailing list.
  2. A more detailed page of how the product works and it’s key features.
  3. A page providing visual samples of how the app would look and work.
  4. Visual showing the versatility of the app — how it is both mobile and desktop functioning.
  5. A page on who can benefit from this product — luckily this part was done for me already by the designer.
  6. A launch countdown date, with an option to join the newsletter for the product.
  7. Footer with key contact information and a button to jump back to the top of the page.

With list decided upon, I grabbed my sketchbook again and starting roughing out how that layout might look.

Once I felt confident enough that it would work, I moved into the next stage. Coding in HTML and CSS.

Coding the Site — Building New Empathy

“If website is a human body, HTML is the skeleton, CSS is the skin, hair color, eye color and finger nails.”

That was the layman’s explanation of the difference between the two coding languages. Somehow hearing it explained this way made more sense.

To begin coding this site, I used the online tool, codepen.io.

With only three days to work on this, we had to present what we had. You can see the result here.

User Feedback

The first critique was on just the design itself. Key feedback comments were;

  1. Gradients add a sense of unity, but that I should use photos to add con.
  2. Icons help, but they could be of higher fidelity (I made them myself).

The second round of critiques came after we had our crash course in coding. For this one, we would be standing by our laptops and giving a little salesmanship talk about our site and the choices we made.

Part of the design process is selling your idea or concept to others.

With that in mind, I put on my best salesmanship hat I could find and presented what I had with as much gusto as professionalism would allow.

Lesson Learned

The biggest thing I took away from this project can be summed up in one word.

Empathy

Empathy for web-developers that is. The men and women in those positions obviously have a difficult job for them.

On a few occasions I would have something work right once and then stop. Obviously websites and code don’t make choices or act on their own, it always boiled down to some input I made that cause it to act out of wack.

Things like that taunted me many times in those final three days of this project. With that experience under my belt, I will always be mindful know of how much thought, energy and work goes into building and developing a website. As well as expressing gratitude and appreciation for any tools or guides out there to assist in the process.