[UX case study] Reduce searching time in SAKGF online resource library

Client : Stephanie Alexander Kitchen Garden Foundation 
Type : Online resource library
Tools: Pencils, tons of papers and post-it notes / Quicktime /Dapulse Project Management/ Balsamiq-wireframing / Sketch / InVision 
Duration : 2 weeks 
UX Team members :
Simon has a son studying in Collingwood College which is the first school established Kitchen Garden program. He helped us contact school teachers for user interviews and usability testing. 
Christyn is a marketing specialist. She played an important roles contacting with our client and writing professional email. 
Phil is good at communicating with people. He can interview users spontaneously.
I have industrial and graphic design background so I’m familiar with sketching, making wireframes, prototypes and design methods.
It’s nice to have them working together.

Phil, Simon, Christyn and I were discussing the structure of the website / Photo credit : Janine Uy

We did research and ideation together. Besides that, my role is to draw and design all the graphics, wireframes and prototypes based on our research and design solutions.

Our Design process :
Heuristic Evaluation > Competitive Analysis and Contextual Inquiry > User interview > Affinity Mapping > Problem Statement & Hypothesis > Persona > Storyboard > User Flow > Information Architechture — Card sorting > Sitemap > Ideation > Lo-fi prototype > Usability Testing & Design Iterations > Mid-fi prototype > Usability testing & Refining

Understanding our client : SAKGF

“ To reduce childhood obesity through pleasurable food education.” — SAKGF Vision

Stephanie Alexander Kitchen Garden Foundation (SAKGF) encourages and supports educators to deliver regular structured, integrated garden and kitchen classes that teach children how to grow, harvest, prepare and share their own fresh seasonal, delicious food.

Brief :

Our client started a membership system in 2015. Members have access to resource library in SAKGF website. Users found it hard to find the right content they need.

The primary objective is to design a front end navigation structure that can logically house a high number of the existing 900+ resources, by creating a set of categories and search terms that suit the growing user groups and builds capacity for a larger community of educators.

Client Meeting :

After reading the brief, we reported to our client about our understandings and learned more about this project.

Our first client meeting on the phone — we talked to her via a laptop

Our client was supportive. She gave us all the information we need including contact details of target users and other stakeholders and the research of the existing website.

Heuristic Evaluation — Resource Library:

We took Jakob Nielsen’s 10 general principles for interaction design as our reference conducting heuristic evaluation.
Key take outs:

  • Search returns a large number of results
  • Main search bar is only for tags and not logical to users.
  • There is no tailoring for frequent users
Some problems we found on the existing website

Competitive Analysis

What make these websites stand out are:

  • Clear and efficient filter underneath the search box
  • Big and clean search box right in the middle of the page
  • Cohesive visual hierarchy

Contextual Inquiry

We went to Collingwood College to observe how they conduct Kitchen Garden Program.

Garden classroom in Collingwood College
Kitchen classroom in Collingwood College

Key Findings :

  • There were a Kitchen teacher and some volunteers in the class to supervise the groups with different recipes.
  • Students worked on kitchen activities in smaller groups, and were given different recipes.
  • They mainly used crops from the garden to cook.
  • There were boards indicated which crops are about to harvest.
  • Kitchen volunteers got educational material they need to teach weekly by email.

We understood the relationship among garden, kitchen educators and volunteers through contextual inquiry. As we met kitchen educators and observed the cooking class, we decided to do further research on “Kitchen” category. The following user interview and the task in usability testing for participants were designed for kitchen educators.

User Interview and Usability Testing

Before conducting user interviews and usability testing, we did this research plan.

Research plan for user interview

We interviewed kitchen educators. We gave them a task “ Find a Carrot Dip Recipe in resource library.” and used Quicktime to record how they interact with the website.

Christyn was recording the time, Phil was observing user’s action and I was taking notes

Average time spent on current website = 8 minutes each with the following main feedback:

  • Too confusing and cluttered
  • Was not able to search straight for the recipe
  • Filters were hidden

Affinity Mapping :

We listed our findings from user interviews and grouped them into logical groups.

We wrote them on post-it notes and grouped them

These three issues stood out:

  • I want to type in my search
  • I want an efficient navigation system
  • I want a clean user interface

Problem Statement and Hypothesis :

Based on affinity mappping, we defined our problem statement and hypothesis.

Persona — Jan

Storyboard

Storyboard helped us clarify the process of searching resource in their online resource library. From a user’s intention, consideration, searching experience and the result. It also reflected a user’s emotion.

I drew the Storyboard

User Flow

We kept the user flow linear and reduced steps as we could to enable user achieve the tasks efficiently. As the resource library is only available for premium membership, “log in” is a requirement to start the searching experience.

User Flow : Log in > Search > Result

User Journey

Information Architecture — Card sorting

It was a big challenging doing IA coping with huge data (900+ resources). From the book “Card sorting” by Donna Spencer, we learned how to conduct card sorting in a large website. We chunked these information.
 
Based on the research we did, we focused on kitchen category and I chose 30 resources under kitchen category among different resource types except “all” and “Garden class activities” (irrelevant to kitchen category).

Each card included the resource title and the image of the resource.
We did the open card sorting using OptimalSort with 6 participants.

Left — Category from Resource Library / Right — OptimalSort

Users gave four consistent categories under kitchen category: 
Articles / Resources / Recipes / Templates

Sitemap

Sitemap

Based on card sorting results, we got the kitchen category — sub categories.
We tested “Kitchen” categories with prototypes to validate if it solves our problem statement. If it works, we’ll use the same research methods on “Garden” and “Curriculum” categories.

Ideation

Concept map

We did concept map focusing on “efficient navigation”

Design Studio

Using the outcomes from the concept map, we sketched ideas and voted on the best ideas and combined them to create a possible solution.

Some interesting ideas were:

  • Create a user profiles so information is tailored to their profile
  • Have a harvest calendar on the dashboard that notifies you when crops are ready
  • Chat system between educators
  • Always let the user know where they are using breadcrumbs

Ideation — Design Solution of “Searching Experience”
I wrote the design solutions from the book “DESIGNING THE SEARCH EXPERIENCE” on cards and shared my learning with my team mates.
The search experience:
Enter Query > Refining the Query > Keeping on Track > Show the results

I wrote all the design solutions of the search experience in different stages

Design

We designed the layout based on the research and ideation above.

For our design we incorporated the following elements that would help a user search for an item efficiently:

  • Global navigation
  • Main navigation
  • Search function
  • Filter
  • Content

Wireframes, Prototypes and Usability Testing

I did wireframes and prototypes based on our design.
We did usability testing with the prototypes.

We calculated the time, observed how participants interacted with the prototype and recorded them

Location :
Collingwood College
Participants :
Teachers and a Volunteer of Kitchen Garden program 
Task :
Find a “Carrot Dip Recipe”

Results

We validated our hypothesis —
Reducing the searching time from 8 minutes to 9 seconds !
I drew this infographic

Recommendation

After the third version of the prototype, I used Sketch to make a mid-fi wireframes and prototype. Here’s some recommendation for our client.

Wireframes on Sketch3
  1. We suggest to remove “Getting started” and “Community” from resource library. Create “Beginner guide” for these two categories and enable users to download the e-book.
  2. Based on our user interview, comparative analysis and the Australian Curriculum, we built this filter.
  3. The user can filter by year levels, subjects and topics.
Menu with icons / Provide user the prompt of what to search on search bar
Auto Suggest whilst searching
Advanced filter for subcategories

We got insights from user interviews and built the recipe filter.

System would recommend users content based on their searching history

System would recommend content from all categories for users.
A new users will see “Getting Started” content once they launch the resource library.

Next Step

Presentation for the client

Our client was happy with our results and interested in to keep working with us.

With the successful result on “Kitchen” category, we’ll follow the same research and design methods to work on the information architechture of “Garden” and “Curriculum” categories.

Garden 
We got some documents of garden and some insights from a garden educator.

Boards in the garden

Key findings:

  • Recording weather and temperature is important
  • Importance of the information about bees (or pests)
  • How to plant different crops

We’ll do further user interview and card sorting.

Key Learnings from this project

  • Challenges make us learn more. The ability of finding information we need and learning by doing enable us to improve our UX skills.
  • When there are different opinions in a team, the best way to make a design decision is to test and interview target users.

Resources

______

Let’s connect on LinkedIn ! https://www.linkedin.com/in/linminjung/
Hope you like my case study and welcome to give me feedback !