Visual Design — part 1

Taking my wireframe to hi-fi with user testing and validation

The purpose of this personal project is to pick up at where I left off on my Kensington is Kensington project

User Research and MVP were done, and here is the mobile-first wireframe design:

Desktop design:

To refine and iterate, I sent the mobile version to for feedbacks

The basic scope is really to find out if users can recognize what kind of site this is at a basic wireframe stage; can they navigate? ; and how do they feel or find the function of blogging on a e-commerce site.

Drafting out scope and task questions

Tests with 5 Primary Persona’s demographic, then, created affinity diagram to sort and define feedbacks.

Demographic criteria
Sorting out user testing feedbacks
Make sense of users’ feedbacks

Key User-Testing feedback:

  • 1/5 user questions why would there be blog inside an e-commerce site, if so, what is the purpose of each blog
  • 5/5 users can’t find the actual blog post; 1/5 user is confused after clicking Blog

Validated through User-Testing:

  • 5/5 testers can figure out this is an e-commerce site without much explanation or guessing
  • 5/5 users can finger out where the menu is and what each category in the menu do
  • 3/5 testers are interested in reading blogs if they are relevant to what they are shopping for or looking into (restaurant, grocery type etc)
  • 2/5 users said they like how this is more than just product with events, restaurant, and grocery: “there is a lot that you can explore”, which is exactly what Kensington is about

(Wireframe is further refined based on feedbacks — Blog section and its flow redesign)

design changes based on users’ feedback

Visual Design — part 1

Kensington is Kensington’s main visual message: Diversity


Identity, Mood board and Style Guide:

Identity concept (logo) | Moodboard of the market

To be continue …