Reorganising content hierarchy
Client project | under 1 week sprint | UX/UI | Individual | E-commerce
Bold Bean is a small business that sells quality jars of beans. They needed a designer to help reorganise the hierarchy of their content and improve the UX of their pages.
My Role: UX Designer/Researcher
Tools & Methods I used: Figma, Miro, User interviews, Card sorting activities
Project duration: less than 1 week
My Deliverables:
- present high fidelity version on Figma of the ‘Home’ and ‘About Us’ page
- Present user insights
- Confirm the acceptance criteria for the redesign has been met
My Process:
- Gathered user insights from user interviews of original pages, took notes of areas of pain-points, and the user opinions.
- Create an acceptance criteria list for redesigning.
- Review of content hierarchy against data from user insights.
- Create high-fidelity prototype on Figma.
- User feedback and checking with acceptance criteria.
Other things I contributed to:
While I was working on the Home and About Us page, I had a project partner who was working on the other pages of the site. Apart from working on my own pages, I helped with collecting and sorting data for my partner on the Recipe page. I did this by using closed and open card sorting activities with participants. I will show more of what I did later on in this case study.
Step 1 — User Research
Before I started my user research with the participants, I did my own review of the Home page and About Us page. I looked through and noted down my first impressions of the site, focusing on what was confusing or had layout I thought could be confusing for the user, then I noted down some parts of the pages that I think would trigger frustrations in a user journey, based on my experience of UX design from previous projects.
I then conducted interviews with 5 participants. In the session, I asked them to share their screen while they went on Bold Bean’s website and had a look through 2 pages. I took notes down as they talked through their first impressions, and afterwards I started asking for their opinions on certain aspects of the site, and to also access the participants reactions to my own notes.
After getting an understanding of the user’s thought process about the 2 pages, I had an idea of what needed to be improved.
Step 2 — Creating an Acceptance Criteria
I am using the term lightly when I reference acceptance criteria, but this criteria is a set of conditions that the design must meet to solve the user’s pain-points.
Here is the criteria list for each page:
Step 3 — Review of Content Hierarchy
To review the hierarchy of content, for me it was visually easier to sketch out the wireframe so I was aware how the content on each page lined up. I also used a red and blue marker to indicate where the common problem areas and important call-to-action (CTA) areas were.
Drawing out the wireframe and highlighting problem and CTA areas
Reorganising the hierarchy with paper cut outs & checking against user feedback
After using wireframe sketches to indicate the problem areas, I decided the best way to reorganise the hierarchy of the pages would be to create paper cut outs of the sections in the pages, then rearranging the sections to find a better improved hierarchy.
I was trying to improve the hierarchy, because some of the user feedback on the original pages suggested there was repetition in areas of the pages and the structure of the original hierarchy was a little confusing and didn’t help the CTA areas to be clear for users to use.
Turning into low fidelity Figma prototypes
Below are the low fidelity prototypes of the paper cut out version from above.
Step 4— Final prototype on Figma
Step 5 — Checking against acceptance criteria and user feedback
User feedback:
- About Us page’s ‘bring me to the beans’ CTA button is more visible and makes more sense in that area now, but could maybe add another CTA for that in the middle of the page.
- Home page CTA buttons are clearer because there is less repetition of the same sections throughout the page.
- less cluttered pages, easier to scroll through.
- About Us page has ‘About the founder’ as its first section which makes more sense.
checking acceptance criteria
With the research and redesign I’ve finished, our project was handed back to the owner of Bold Beans, to use as a guide for their redesign however, they see fit.
And now to mention the other contributions I’ve done in this project.
Extras — Other things I’ve contributed to:
As I mentioned earlier, I helped my project partner collect and analyse data collected through open and closed card sorting activities, for the Recipe page in the website.
I also collected some user interview data on this page, and the data I collected strongly hinted that there was a lot of frustration in the user journey when going on this page of the site.
The main areas of concern are:
- the sub navigation for this part of the site didn’t make sense to the user
- the categorisation of the dishes wasn’t obvious, so users aren’t sure how to search for a specific dish other than scrolling
- had difficulty identifing each dish other than clicking into each recipe, which is not efficient for the user
- images weren’t aligned, makes the page look not finished
Actions to improve the issues raised from user feedback:
- conducted card sorting activities to get data for organising the categories for a better navigation that makes sense to users
- Conducted a closed cart sort to confirm that data from open card sort is what user’s agree as best categories for the dishes
I conducted 4 open card sorts to see what categories user’s tend to sort the dishes into. From this activity I was able to narrow down a selection of categories that I think could be better for the user to understanding, due to amount of the participants choosing that category on their own.
The categories are:
- Mains
- Salads
- Sides
- Soups/Stews
After the participants did the closed cart sort, I would count the amount of cards they got sorted right to see if the categories selected made sense to them.
With the data I collected, I passed that onto my project partner for them to design their screens.
Thank you for reading to this point! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!
