[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 : 4
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.
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.
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 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
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
We went to Collingwood College to observe how they conduct Kitchen Garden Program.
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.
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.
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.
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 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.
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.
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.
Users gave four consistent categories under kitchen category:
Articles / Resources / Recipes / Templates
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.
We did concept map focusing on “efficient navigation”
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
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
Wireframes, Prototypes and Usability Testing
I did wireframes and prototypes based on our design.
We did usability testing with the prototypes.
Teachers and a Volunteer of Kitchen Garden program
Find a “Carrot Dip Recipe”
We validated our hypothesis —
Reducing the searching time from 8 minutes to 9 seconds !
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.
- 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.
- Based on our user interview, comparative analysis and the Australian Curriculum, we built this filter.
- The user can filter by year levels, subjects and topics.
We got insights from user interviews and built the recipe filter.
System would recommend content from all categories for users.
A new users will see “Getting Started” content once they launch the resource library.
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.
We got some documents of garden and some insights from a garden educator.
- 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.
- Stephanie Alexander Kitchen Garden Foundation website:
- Designing the Search Experience:
The Information Architecture of Discovery
- Card Sorting by Donna Spencer
- Content Strategy for the Web by Kristina Halvorson
Let’s connect on LinkedIn ! https://www.linkedin.com/in/linminjung/
Hope you like my case study and welcome to give me feedback !