Timeline
March - April 2022 (7 weeks)
My Role & Responsibilities
UX Designer- Case study project for Google UX Certification Course.
Conducted interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducted usability studies, and iterated on designs.
PRODUCT OVERVIEW
The Product:
Good Thymes is a social network site for gardeners so they can connect with one another, get plant advice, ID plants, keep track of their plants and share photos of their garden.
The Problem:
Gardeners do not have resources available to them when they need advice, help, and/or inspiration with their garden. This is due to:
1. Living in a remote location
2. Being new to the hobby
3. Not knowing others who garden
The Goal:
The goal is to create a social networking experience in which gardeners enjoy networking with other gardeners and get the help they need.
Understanding the user
User Research:
Interviews were conducted as well as creating empathy maps to better understand the target audience and their needs. I discovered that gardeners who have specific issues when growing their gardens do not know where to go to for help. There are a lot of resources online but they can be confusing or difficult to navigate, which frustrated many target users. This caused a hobby, like gardening, to be frustrating, defeating the purpose of being a relaxing experience.
Pain Points:
1. Navigation
2. Interaction
3. Experience
User Persona:
Problem Statement: Addie is a freelance writer who needs an app with easy navigation to post photos along her gardening journey because she would like to share her garden to inspire others.
User Journey map:
Mapping Addie’s user journey revealed how helpful it would be for users to have a way to save multiple photo albums of their plants depending on the location of their gardens.
Starting the Design
Site map:
I choose the hierarchical site structure. This design is a common structure which would help create a simple and easy site for users to navigate. My goal was to make strategic information architecture decisions that would improve the overall website navigation.
Paper Wire-frames:
I sketched out paper wireframes for each screen in my website, keeping the user pain points about navigation and sign-up flow in mind. The Home screen paper wireframe to the left focuses on optimizing the experience for users with a visual hierarchy.
Responsive design is important because it provides better mobile experiences. The screenshots reveal the layout changes based on the dimensions of the screen while maintaining a consistent look to the site.
Digital Wire-frames:
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing a useful menu along the top and visual elements on the homepage were key to the design of the site.
When incorporating the responsive design for the desktop and mobile device, I used the hamburger menu in the top right corner for the mobile device which helped save space and allowed for a design that is similar to the desktop yet better suited for mobile users.
Low-fidelity prototype
To create a Low-fidelity prototype, I connected all of the screen involved in the primary user flow. This included the user flow to sign up, ability to add photos to an album, and read about different sections of the site.
Usability Study
The purpose of the usability study was to find out if the sign-up experience was easy for users to complete. I also wanted to understand the specific challenges that users might face in navigating the site.
Therefore, the main research goals were to:
1. Determine if users can complete core tasks within the Good Thyme’s website.
2. Determine if the website is difficult to use.
2. Determine if the website is difficult to use.
Findings
1. Sub-Menu: The sub-menu along the left side for the website caused confusion when navigating parts of the site.
2. Post function: Users were confused where to locate their posted comments and photos.
3. Sign-Up Process: There was no where to put the user’s name when creating the new account on the sign up page.
Refining the Design
Refining the Design:
1. Sub-Menu:
Based on insights from the usability study, I made changes to improve the location of the sub-menu. Instead of placing the sub-menu along the left side of the page, I placed it directly under the main menu. This allowed users to locate options more efficiently.
2. Post:
Based on insights from the usability study, I made changes in the Newsfeed section to improve the experience of user posts. Previously, there was no where to locate past posts made by the profile user. A couple solutions evolved from this issue: (1) I labeled the newsfeed post as “Newsfeed” for clarity purposes and, (2) I placed all posts posted by the user under their profile page. This allowed for better an overall better understanding of how to navigate the post section.
3. Sign-Up Process:
Based on insights from the usability study, I made changes in the SignUp section to improve the overall flow of creating a profile. Instead of asking the user to type in their password twice, I replaced the first fill-in box with “Enter First Name.” By doing this, a name is now tied to the new profile.
the Final Product
HI-FI PROTOTYPE
(Created with Adobe XD)
Takeaways
What I Learned:
Designing the website was a challenging and rewarding journey. It was clear from the onset that creating a responsive site takes planning and time, but if done correctly, it makes the users’ experience a lot easier. Another takeaway is to focus on accessibility when coming up with design ideas and solutions.
Next Steps:
1. Conduct follow-up usability testing on the new website.
2. Identify any additional areas of need and ideate on new features.
3. Look at adding further web accessibility features.