Visual Design — part 1

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

Eva Ng
Eva Ng
Jul 21, 2017 · 3 min read

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 UserTesting.com 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

Inspirations:

Identity, Mood board and Style Guide:

Identity concept (logo) | Moodboard of the market

To be continue …


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store