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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s