Go to the profile of Laith Abdulkareem
Laith Abdulkareem

Dexter is a screenplay writer from Flint, Michigan, who just recently moved to NYC with the dream of becoming a writer.

Living in NYC required him to take on a full time job. So he took a temp position on the front desk of a design agency while he kept searching for his dream job

As an animal lover, he also started a side gig, which will help increase his income by walking his friends dogs.

The problem:

One of Dexter’s favorite stores in NYC is Fishs Eddy. He likes their quality, reasonably-priced items but often struggles with finding good offers, new deals and the long checkout process.

The goal:

Create a better experience for Dexter to use fishseddy.com with a smart product locator, product recommendations and deal notifications based on his personal style preferences, and a faster, more intuitive checkout process.

RESEARCH//

We stared the design process by interviewing several customers. We wanted to understand their pain points with the current site to help address and create a better experience. We also conducted open/closed card sorting research to define the best way for the user to locate products on fishseddy.com

We also did competitive and comparative research to understand what other businesses are doing in the existing market

Learning:

  • 4 out of 6 people we interviewed would like to checkout without being asked to login and/or create an account to place the order.
  • All six people would like to get special offers as the current site doesn’t offer much offers.
  • 4 out of 6 people expressed the low quality UX and visual design of the current site.
  • Competitive websites using a lot of taps on the main navigations.
  • Most websites share their social media on the footer as it’s not a major service.
  • Website keep their nav levels between 2–3 considered as best practice.
  • Commonly websites display their contact number in the footer.
  • Most website offers express checkout with a login/signup.
  • “shoppers also viewed” could add a great value for the biz in terms or sales and marketing.
  • Some users only shop the “sale” section.
  • Reading reviews by other users could help the user make a decision on planing the order.
  • Offering multiple images per product helps the user have a better sense of the product.

Creating user flows:

After reviewing the research results we started creating user flows to address all the pain points gathered above. Reviewed the user flows with users and gathered feedback which helped us understand the flow even better to make changes and get to the final and simple user flow strategy.

SITEMAPS//

Using all the final user flows we created, we built our first round of site maps for the new website. They were very simple and straight forward. They were also proven by conducting 5–7 user tests, with all testers finding it easy to navigate.

SKETCHING AND WIREFRAMING//

Sketching:

Next, we started thinking about the information architecture (IA). We began blocking out the hot spots on the site and prioritizing the content that we needed to show on our new website. We sketched out a couple pages to finalize the layout and agree on the global, common and custom elements of the site.

Wireframes:

After sketching several pages, we started digitizing our sketches and creating wireframes using Sketch App. We created pages for home, product category, product detail, shopping cart and checkout. We will actively seek and review feedback from users to ensure the direction of the design is feasible and useable.

PROTOTYPE//

InVision is one of the best prototyping applications available and it has helped us to create a clickable prototype of the wireframe. This allows us to showcase the journey from home to checkout.

Usability testing:

We tested our prototype with 7–10 users and gathered feedback that helped us refine the prototype and reach our goals even more efficiently.

User Duke (39 — M — Loves shopping)

  • During the checkout, Duke expressed his interests in having the option to login into his account or logout/change user.
  • Consider changing (Buy for) to (Your info) as it is a little confusing to whom placing the order.
  • Who’s the user that i’m logged in under?

User Jon (33 — M — Cook)

  • Typo: change (Availabilit) to (Availability) on the product page.
  • Grammar… They are — or — they’re. (Review section)
  • I would like to see “you may like” right when I add products into my cart.

User Maleeha (37 — F — Mother of four and seven cats)

  • Wanted to go back one step and thought it would be better if the wires had a “back button”.

We won’t be listing all the results but we gathered all the comments and studied them very well to refine our prototype once more.

“Very clean and neat” -Maleeha

“Clear navigation. Check out process was easy. Simplified shipping, billing and credit card enter area.” Jon

What’s next?

  • Start visual design phase.
  • Continue user testing as we implementing new features.
  • Creating mobile viewport to help customers shop via mobile devices.