Lola Nenas is a rapildy growing family-owned coffee shop bakery business in the Philippines.
Role
UI Design, UX Research
Timeline
1 month
Goal
Create a new mobile site with expanded features
Restraints
Lack of users previous site feedback
It’s difficult having fragmented information.
When customers go to the Lola Nena’s webpage they are met with the only option of ordering products. However many visit to look for other information such as store locations, store hours, menu, etc. They are unable to find this on the site.
The Philippines use social media is heavy. They use it to communicate directly with businesses, and customers often check social media pages to find the info they are looking for. This is a time consuming and inefficient process.
This poor information structure frustrates users, making it harder for them to engage with the brand. By restructuring the site to improve navigation, we can create a smoother experience, encouraging users to stay on the page and fulfill user needs.
How can we guide users to all necessary information?
Measuring success
When researching competitor sites, all had clear layouts that made key information easily accessible. I used this insight to guide my own design decisions, prioritizing the most-searched-for content. In conversations with the owners of Lola Nena's, I learned that they wanted their website to host more information, while having a strong brand presence a top priority. Small scale user testing would later be used to measure efficiency of the design.
Information Prioritization
Research indicated that customers would seek out general store information most frequently. This is seen from pinned topics and posts from socials. Based on this, my approach would be to classify each of these topics in the main navigation.
Wireframing
Topic hierarchy
In the initial wireframes, I kept some core elements to maintain familiarity, but after testing, the navigation needed better structure. I introduced new sections to make it easier for users to find key options without having to dig through the site.
Based on user need, I prioritized a section on the different ways to order, a locations section, and clear links to check other social media. An About Us page was added to reinforce the business branding.
Iterations for improvement
Efficient buttons
With added information comes the need of clear organization. To signify the button use I played around with icon pairings and changing the shapes.
Ultimately the circle took up too much space in the header and wasn’t as visually commanding. Since Lola Nena's customers range from teens - elderly, visuals were added for clarity and reinforcement.
Final results
Many design decisions were applied to cater to Lola Nena's customers. A minimum 16pt font, plenty of icon usage, and 2 fonts were used throughout. Red hexcodes were applied with a playful, fun vibe to support their inclusive and family branding.
These improvements will help customers navigate the website efficiently and help them find all the information they would need clearly in one place.
Based on some user testing results showed that users were able to find information faster, with a more intuitive flow through the site. With more resources, I’d dive deeper into quantitative data, such as bounce rates and time-on-page, to further measure success.
Seeing what works and iterating
Every small change can make a big impact on the user, whether visual or informational. It can take many iterations to land on the right one. Staying organized, being able to frame the problems, and keeping the user in mind will help in making meaningful design.
Key Takeaways
Through this project, I learned that aligning the design with users' expectations is key to improving their overall experience. Organizing relevant information in a way that feels intuitive significantly enhances usability. I also gained a deeper understanding of how small design changes, like button adjustments and visual clarity, can have a big impact on how users interact with a site.
Lola Nenas is a rapildy growing family-owned coffee shop bakery business in the Philippines.
Role
UI Design, UX Research
Timeline
1 month
Goal
Create a new mobile site with expanded features
Restraints
Lack of users previous site feedback
It’s difficult having fragmented information.
When customers go to the Lola Nena’s webpage they are met with the only option of ordering products. However many visit to look for other information such as store locations, store hours, menu, etc. They are unable to find this on the site.
The Philippines use social media is heavy. They use it to communicate directly with businesses, and customers often check social media pages to find the info they are looking for. This is a time consuming and inefficient process.
This poor information structure frustrates users, making it harder for them to engage with the brand. By restructuring the site to improve navigation, we can create a smoother experience, encouraging users to stay on the page and fulfill user needs.
How can we guide users to all necessary information?
Measuring success
When researching competitor sites, all had clear layouts that made key information easily accessible. I used this insight to guide my own design decisions, prioritizing the most-searched-for content. In conversations with the owners of Lola Nena's, I learned that they wanted their website to host more information, while having a strong brand presence a top priority. Small scale user testing would later be used to measure efficiency of the design.
Information Prioritizaton
Research indicated that customers would seek out general store information most frequently. This is seen from pinned topics and posts from socials. Based on this, my approach would be to classify each of these topics in the main navigation.
Wireframing
Topic hierarchy
In the initial wireframes, I kept some core elements to maintain familiarity, but after testing, the navigation needed better structure. I introduced new sections to make it easier for users to find key options without having to dig through the site.
Based on user need, I prioritized a section on the different ways to order, a locations section, and clear links to check other social media. An About Us page was added to reinforce the business branding.
Iterations for improvement
Efficient buttons
With added information comes the need of clear organization. To signify the button use I played around with icon pairings and changing the shapes.
Ultimately the circle took up too much space in the header and wasn’t as visually commanding. Since Lola Nena's customers range from teens - elderly, visuals were added for clarity and reinforcement.
Final results
Many design decisions were applied to cater to Lola Nena's customers. A minimum 16pt font, plenty of icon usage, and 2 fonts were used throughout. Red hexcodes were applied with a playful, fun vibe to support their inclusive and family branding.
These improvements will help customers navigate the website efficiently and help them find all the information they would need clearly in one place.
Based on some user testing results showed that users were able to find information faster, with a more intuitive flow through the site. With more resources, I’d dive deeper into quantitative data, such as bounce rates and time-on-page, to further measure success.
Seeing what works and iterating
Every small change can make a big impact on the user, whether visual or informational. It can take many iterations to land on the right one. Staying organized, being able to frame the problems, and keeping the user in mind will help in making meaningful design.
Key Takeaways
Through this project, I learned that aligning the design with users' expectations is key to improving their overall experience. Organizing relevant information in a way that feels intuitive significantly enhances usability. I also gained a deeper understanding of how small design changes, like button adjustments and visual clarity, can have a big impact on how users interact with a site.
Lola Nenas is a rapildy growing family-owned coffee shop bakery business in the Philippines.
Role
UI Design, UX Research
Timeline
1 month
Goal
Create a new mobile site with expanded features
Restraints
Lack of users previous site feedback
It’s difficult having fragmented information.
When customers go to the Lola Nena’s webpage they are met with the only option of ordering products. However many visit to look for other information such as store locations, store hours, menu, etc. They are unable to find this on the site.
The Philippines use social media is heavy. They use it to communicate directly with businesses, and customers often check social media pages to find the info they are looking for. This is a time consuming and inefficient process.
This poor information structure frustrates users, making it harder for them to engage with the brand. By restructuring the site to improve navigation, we can create a smoother experience, encouraging users to stay on the page and fulfill user needs.
How can we guide users to all necessary information?
Measuring success
When researching competitor sites, all had clear layouts that made key information easily accessible. I used this insight to guide my own design decisions, prioritizing the most-searched-for content. In conversations with the owners of Lola Nena's, I learned that they wanted their website to host more information, while having a strong brand presence a top priority. Small scale user testing would later be used to measure efficiency of the design.
Information Prioritization
Research indicated that customers would seek out general store information most frequently. This is seen from pinned topics and posts from socials. Based on this, my approach would be to classify each of these topics in the main navigation.
Wireframing
Topic hierarchy
In the initial wireframes, I kept some core elements to maintain familiarity, but after testing, the navigation needed better structure. I introduced new sections to make it easier for users to find key options without having to dig through the site.
Based on user need, I prioritized a section on the different ways to order, a locations section, and clear links to check other social media. An About Us page was added to reinforce the business branding.
Iterations for improvement
Efficient buttons
With added information comes the need of clear organization. To signify the button use I played around with icon pairings and changing the shapes.
Ultimately the circle took up too much space in the header and wasn’t as visually commanding. Since Lola Nena's customers range from teens - elderly, visuals were added for clarity and reinforcement.
Final results