hidden
-
Success
You have reached my
Portfolio
Jump to a section or keep scrolling
Jump to a section or keep scrolling
I am a UX enthusiast, a research fanatic, a communicator and a collaborator.
After over a decade of working in the graphic design industry, I now focus on user experience and user research. With a background in Psychology and an MSc in Human-Computer Interaction, I bring together my experience in design with my curiosity about people, their behaviour and the experiences we create for them.
What draws me most to UX is the opportunity to ask questions, understand why people behave the way they do and turn those insights into better experiences. I genuinely believe that with empathy, we can not only create usable, equitable and enjoyable products but also make a change in the world.
You can find more about my experience, education and professional background on LinkedIn by clicking my name in the top-left corner or, more conveniently, by clicking here.
If you like what you see on this page, let’s connect on LinkedIn. If you need to contact me right away, feel free to do so!
Continue
Nutrition calculators are currently less prevalent in the market, creating an opportunity for restaurants to stand out by providing accessible nutritional information about their dishes. Designed for a modern restaurant, the app responds to growing health-conscious trends and aims to enhance customer satisfaction while positively influencing the restaurant's brand image.
Restaurant-goers with dietary requirements need information about restaurant dishes that is easy to access and understand.
Design a nutrition calculator app that allows users to view the nutritional values of individual dishes and calculate the cumulative nutritional values of selected items.
Conducting interviews, preparing surveys, creating paper and digital wireframes, developing low and high-fidelity prototypes, conducting usability studies, considering accessibility and iterating on designs.
I conducted interviews and created empathy maps to better understand restaurant-goers and their needs. Through this research, I identified two main groups: customers who are health-conscious by choice and follow a particular diet, and those whose dietary requirements are related to an illness, allergy or intolerance. The research confirmed some of my initial assumptions but also revealed that not knowing the nutritional values of restaurant dishes was only one of the challenges faced by people with dietary requirements. Other difficulties included finding restaurants that provide nutritional information and the frustration of needing assistance to identify dishes that meet their dietary needs while dining out.
Using empathy maps to understand what users think, say, do and feel, I identified the following pain points:
Limited Availability
Restaurant-goers in Dublin have difficulty finding restaurants that provide nutritional information through their apps.
Information Architecture
Text-heavy nutritional information can be difficult to read and understand. Poorly structured information can make it harder for users to find and interpret what they need.
Limited Functionality
The lack of cumulative calculations and complicated search functions can frustrate users and create a negative experience.
Accessibility
Limited accessibility features can make nutritional information more difficult to access for users who rely on assistive technologies.
User journey maps, built around the personas and their stories, helped me better understand the experience from the users' perspective.
For example, mapping
Charles' journey highlighted the value of an easy-to-understand nutrition calculator with simple search, filtering and suggestion features.
Charles is a health-conscious adult who needs a quick way to assess the nutritional value of his meal because he wants to manage his calorie intake and stay on track with his diet.
Prisha is an adult with diabetes who needs an easy way to identify suitable meals because she wants to make informed choices while managing her dietary needs.
Together, these problem statements highlighted the need for a solution that supports both preference-based and health-related dietary requirements while making nutritional information quick and easy to understand.
The app provides easy-to-understand nutritional information for individual dishes and combinations of dishes, with filtering and suggestions to help users find options that meet their specific dietary requirements.
After conducting a Competitive Audit (click here to view) and summarising the findings in a Competitive Audit Report (click here to view), I identified gaps, potential solutions and opportunities. Ideation then took off with the "How Might We" exercise, based on the problem statements, followed by Crazy Eights to quickly generate and compare different design ideas. I then created a goal statement to define the scope and purpose of the design. The statement outlined that the Nutrition Calculator app would provide health-conscious users and those with dietary restrictions with nutritional information about individual dishes, as well as cumulative nutritional information for multiple selected dishes. The effectiveness and usability of the design would be evaluated through task completion time, user error rates and user feedback.
To anticipate user needs when interacting with the product, I developed a user flow to map the paths users could take through the app and identify the steps needed to complete key tasks.
Then I created storyboards to explore the user's experience with the product. The 'big picture' storyboard shown here focuses on Charles' needs, the context in which he would use the app and why the product would be useful to him. The 'close-up' storyboard below was developed later in the design process, focusing on the product itself and how Charles would interact with it.
The next step was to create paper wireframes. Drafting iterations of each app screen on paper helped me explore different layouts and ensure that the elements carried forward into the digital wireframes addressed the user pain points identified during research. For the home screen, I emphasised quick access to the menu, filters and search options.
As the initial design phase continued and the information architecture was defined, I created additional paper wireframes before moving on to digital wireframes. Throughout this process, I kept Gestalt principles in mind and used the previously identified user needs and pain points to guide the screen designs.
Easy access to nutritional information while browsing the menu was a key user need to address.
The low-fidelity prototype brought the primary user flow together, allowing users to view nutritional information, filter and search the menu, and access additional information about dishes and their nutritional values at any point in the user flow.
● Prompt 1: From the home screen, try to search for a particular dish.
○ Prompt 1 follow-up: How easy or difficult was this task? Would you change anything about the process?
● Prompt 2: Enlarge the image of a dish.
○ Prompt 2 follow-up: How easy or difficult was this task? Would you change anything?
● Prompt 3: Close the image and go through all sections of the menu (starters, mains, desserts, drinks) and view the detailed nutritional information for a dish you are about to order.
○ Prompt 3 follow-up: How easy or difficult was it to navigate the menu? Would you change anything?
● Prompt 4: Go back to the menu, view and interact with the TOTAL nutrition section, and find out more information about a pre-selected dish.
○ Prompt 4 follow-up: How easy or difficult was it to understand that the TOTAL section showed the cumulative nutritional values of multiple selected dishes? How easy or difficult was it to view the individual dishes included in the calculation? Is there anything you would change?
● Prompt 5: Let the app know that you can only consume 600 kcal.
○ Prompt 5 follow-up: How easy or difficult was this task? Would you change anything?
● Prompt 6: Edit your profile.
○ Prompt 6 follow-up: How easy or difficult was this task? Would you change anything?
● Prompt 7: What are your thoughts about the Nutrition Calculator app? What did you like or dislike about it?
○ The main user flow was clear.
○ I found the app unnecessarily complex.
○ I think the app was easy to use.
○ I would probably need the help of a technical person to be able to use this app.
○ I found the app easy to navigate.
○ There was inconsistency within the app.
○ I felt confident using the app.
○ I needed to learn many things before I could start using this app.
○ The nutritional information was easy to understand.
○ It was difficult to understand exactly what the nutrition calculator was showing.
After completing the research plan, I tested the low-fidelity prototype of the Restaurant Nutrition Calculator App through an unmoderated usability study. Participants received a link to the prototype test, during which their screens and narration were recorded. I reviewed the recordings and documented my observations using a note-taking spreadsheet. Each participant had a separate sheet where I recorded their click path, observations, quotes, task completion ratings, and time on task for each task, as well as the time taken to find nutritional information for a particular dish. (View usability study notes) Participants were anonymised, and the recordings were later destroyed.
Based on my notes, I created an affinity diagram to organise and synthesise the qualitative data, first into clusters and then into groups based on recurring themes and relationships. While sorting qualitative data is never easy, identifying patterns across participants greatly aided my understanding and interpretation of the findings. It helped me distinguish recurring usability problems from isolated difficulties and determine which issues required the most attention.
Detailed information was difficult to access.
Supporting evidence from the usability study:
● 4 out of 5 participants were either unable to access detailed information or took a long time to determine how to reach it.
● Participants tended to click on the text when trying to access detailed information.
Participant 2:
I should be able to just click on the dish.
Enlarging dish images was difficult.
Supporting evidence from the usability study:
● 5 out of 5 participants were unable to complete the task on their first attempt.
● The interaction was not intuitive for participants, who expected the image itself to be clickable rather than relying on the magnifying icon.
Participant 3:
Would have expected clicking on the image would show the large image.
The filtering option was not prominent enough.
Supporting evidence from the usability study:
● 3 out of 5 participants had difficulty applying a calorie limit to the dishes.
● Some participants tried different paths through the app to find the filtering option.
Participant 4:
This is a great thing, it will help me with my diet, but only if I find it easily.
To generate meaningful insights based on real data, answer the research questions, and drive direct action to improve the user experience, I prioritised the findings to determine which usability problems required the most attention. I ranked the identified issues by severity, from P0 issues that prevented task completion and P1 issues that significantly hindered it, to P2 and P3 issues representing progressively less severe usability problems. I then focused primarily on the P0 and P1 findings when developing the following actionable insights:
Make the entire preview image clickable.
Consider additional locations from which users can access filtering.
After the first usability study, I incorporated the research findings and recommendations into the next design iteration. I reviewed the filtering option and explored additional paths for users to access it. I also increased the clickable areas of dish images and descriptions to better align the interactions with participants' expectations.
As I moved from the low-fidelity prototype to mockups and the high-fidelity prototype, I created a sticker sheet to help define the overall look and feel of the design and maintain visual consistency across the app.
To test the high-fidelity prototype, I conducted a second usability study with five new participants, using a methodology similar to the first study, but this time with moderated usability testing. The unmoderated format of the first study had provided limited qualitative insight, as participants tended to narrate very little while completing the tasks independently. Moderated testing allowed me to ask follow-up questions and gain a deeper understanding of participants' behaviours, expectations and difficulties as they interacted with the prototype.
Returning to the Total Nutrition section was difficult. 4 out of 5 participants needed help returning to the Total Nutrition section after viewing the full-screen menu, indicating a recurring navigation difficulty.
The Total Nutrition section occupied too much screen space while browsing. 3 out of 5 participants found the Total Nutrition section too large when they started browsing the menu, suggesting that it interfered with their ability to explore the menu comfortably.
Filtering did not behave as participants expected. 3 out of 5 participants expected to see a filtered version of the full menu after applying filtering options, rather than only receiving suggestions. This revealed an expectation for greater control over how filtered results could be viewed, indicating a mismatch between the existing filtering behaviour and participants' expectations.
Participants expected profile items to be directly editable. 3 out of 5 participants attempted to edit their profiles by clicking directly on individual profile items rather than using the "Edit Profile" button.
The top menu buttons were helpful to some participants. 3 out of 5 participants found the buttons at the top of the menu helpful.
The purpose of the "Add" button was unclear. 3 out of 5 participants questioned whether the "Add" button would add dishes to the nutrition calculator, indicating that its function was not immediately clear.
Based on the theme that participants had difficulty navigating back to the Total Nutrition section after viewing the full-screen menu, the insight was that they needed a clear and persistent way to return to it, leading to the recommendation to add a visible reference to the Total Nutrition section at the bottom of the screen that would bring the section back up when selected.
Based on the theme that participants were confused about the function of the "Add" button, the insight was that its purpose was not immediately clear, leading to the recommendation to better explain that it adds dishes to the nutrition calculator.
Based on the theme that participants found the Total Nutrition section took up too much screen space while browsing the menu, the insight was that they needed more space to explore the menu without losing access to their nutritional information, leading to the recommendation to reduce the size of the Total Nutrition section and display its details only when users choose to view them.
Based on the theme that participants expected to see a filtered version of the full menu rather than only receiving suggestions, the insight was that they wanted greater control over how they could view the results of their selected filters, leading to the recommendation to add a "View filtered menu" option alongside "Suggestions".
Based on the theme that participants tried to edit their profiles by clicking directly on individual profile items, the insight was that they expected these items to be directly editable, leading to the recommendation to make individual profile items editable without requiring the call-to-action "Edit Profile" button at the bottom of the screen.
After the second usability study, I scaled down the Total Nutrition section so users could browse the menu more comfortably and bring up the calculator in half-page or full-page view when needed. This revision also provided a clearer way to navigate back to the Total Nutrition section. I clarified the purpose of the "Add" button and further revised the filtering functionality by adding the option to view the full menu with the selected filters applied. Finally, I removed the "Edit Profile" button and made individual profile items directly editable to better align the interaction with participants' expectations.
Keep swiping across the phone screen to browse through key mockup designs.
The final high-fidelity prototype incorporated the findings from both usability studies, addressing the identified pain points and aligning the user flow more closely with participants' needs and expectations.
Watch the video or click here to interact with the high-fidelity prototype in Figma.
Icons were used alongside interface elements to support recognition and navigation.
The minimum text size is now 12px, and colour combinations were checked and adjusted to meet WCAG 2.0 contrast guidelines. Alt text was also provided for relevant images to support users who rely on screen readers.
The design provides easy comprehension and navigation to help users interact with the app requiring minimal effort.
Impact:
By making nutritional information more accessible, the app has the potential to help users make more informed dining choices while supporting positive perceptions of the restaurant by reinforcing a sense of honesty, transparency and attentiveness to different dietary needs.
What I learned:
Designing an app from the beginning involves many interconnected steps, and understanding the user is crucial throughout the process. The two usability studies showed me not only how valuable iterative testing is, but also how the chosen research method can affect the depth of the insights gathered. After finding the unmoderated study somewhat limiting in terms of participant narration, using moderated testing in the second study allowed me to ask follow-up questions and gain a deeper understanding of participants' behaviours and expectations. I also learned how important it is to turn research findings into prioritised, actionable insights and carry them through to design decisions. At the same time, the project highlighted areas for my own development, particularly the need to continue improving my interviewing and moderation skills through practice.
● Conduct further user research to identify additional needs and explore how the app could support a wider range of dietary requirements.
● Conduct another usability study to evaluate whether the changes made following the second study successfully addressed the identified pain points and introduced any new usability issues.
The sign-up process for a cryptocurrency exchange is the first step where users start forming opinions about the marketplace. While there are many options for exchanging cryptocurrency, the current product is for a centralised exchange platform aiming for user loyalty.
The sign-up process at current platforms is often painstaking and time-consuming, which new users find quite tricky if they are inexperienced.
Because the sign-up process impacts the users’ opinions about the platform, it is crucial to target both novice and experienced users and provide them with a pleasant experience through a pain-free and effortless user flow.
I will play the role of a generalist again. I will conduct interviews and prepare surveys to define problems and provide insights for the ideation phase. Based on my research, I will then create personas, user journeys, empathy maps, user flows, paper and digital wireframing, low and high-fidelity prototypes, and most importantly, I will conduct usability studies, accounting for accessibility and iterating on designs.
I conducted user research through interviews and surveys to understand user frustration, needs, and requirements. My goal was to gain insights into users' needs and wants so that I could better design the process. I used mixed methods research to gain insights through quantitative and qualitative data and developed the following empathy maps:
One of the pain points was the lengthy sign-up process, which users found time-consuming. They also desired a straightforward process and an option to not fully commit when signing up. Inexperienced users also struggled with the confusing and poorly explained information available.
Li Mei's user story:
As an experienced and busy professional with family commitments, I want to sign up quickly and without obligation, so that I don’t waste my time on something that might not be worth it.
Li Mei's user journey map:
Problem statement:
Li Mei is a Busy individual who needs a quick and easy sign-up process because they don’t want to waste their time.
Peter's user story:
As a novice and inexperienced user, I want to receive tips and explanations in a less distractive environment, so that I can better understand everything and be more focused on what I’m doing.
Peter's user journey map:
Problem statement:
Peter is a new trader who needs a well-explained sign-up process because they are unfamiliar with crypto trading.
As the process required a relatively simple solution to cater for the desires of our personas, I aimed to keep information architecture simple so the user flow would present users with two options at the very beginning, addressing the “lengthy process” problem, where committed and non-committed users can make a choice quickly. I already had a sitemap in my mind, and I quickly drew it up. Then I realised it would be worth checking out the competitions, so I embarked on a journey to do a competitive audit, where the sign-ups, including throw-away email accounts, verifications and the never-ending sign-up processes on various platforms, took up an enormous amount of time. To compensate for the lost time on the sign-ups, I skipped storyboards completely. I’m not sure how, but I believe it somehow contributed to my confusion when I later dived into hi-fi mockups. However, while the sign-ups were indeed painful, as user research pointed out, doing the audit was very beneficial. Using the “How might we” approach, I decided to stick with the simple sitemap I had already planned and came up with some ideas in terms of layout.
Keeping responsiveness in mind, my wireframes started to form. Here, I went with the practice of “graceful degradation” for no other reason than to provide as much helpful information as possible on a larger screen.
I went with mixed methods again, using interviews with open-ended questions for qualitative, and a survey for quantitative data. As I wanted to gather as much data as possible, moderated testing was my choice again to avoid the scenario where participants didn’t talk that much.
For the interview script, I consulted AI to see if it would save time. While I didn’t save much time due to vigorous reviewing ChatGPT’s inputs and maxed out the available number of prompts in the free version (which is a lot), in the end, I found it a perfect addition to the process. The script became more organised and more logical, and conversing with the AI also nudged me to explore different avenues. All in all, I found it valuable and fun. Once the script was finalised, I conducted a pilot study just in case.
Then, the first set of interviews was a complete failure. I realised that interviewing participants with a strong negative bias towards cryptocurrency was a complete overlook on my side. I could not gather usable data at all. For this reason, I decided to add a pre-screening step before the next set of interviews, as the aim here was to get valuable insights from a somewhat interested cohort instead of having outliers skewing the data. The Screening Questionnaire was just a short survey to explore if participants fit the selection criteria.
Participants were between 18 and 55 and included individuals with motor impairment.
Crypto Enthusiasts
These users are familiar with various cryptocurrency trading platforms and can provide valuable feedback on the nuances of the sign-up process compared to other platforms they have used.
Potential New Users
Individuals who are interested in entering the world of cryptocurrency but have not yet done so. Their feedback can highlight how intuitive and welcoming the sign-up process is for newcomers.
Occasional Traders
Users who have some experience with cryptocurrency but do not trade frequently. They can offer insights into any barriers that might prevent them from becoming more active users.
Relevant Feedback
Participants who are interested in crypto trading are more likely to provide feedback that is relevant to the specific area.
Usability Insights
They can offer insights into specific features and expectations that casual or uninterested users might overlook.
Better Evaluation
They are more likely to engage seriously with the sign-up process, providing more detailed and actionable feedback.
5 out of 5 participants explicitly mentioned that the placeholders did not motivate them to sign up and wanted more detailed benefits content.
Motivation and Engagement
Need for Real Content – The lack of real images and detailed text in the low-fidelity prototype hindered participants’ motivation and understanding.
Real Content Increases Engagement
Participants struggled with motivation due to the placeholder content. Accurate, detailed information and benefits are crucial for engaging users and encouraging sign-up.
Recommendation
Enhance content with real information.
Replace placeholders with real images and detailed text explaining the benefits of signing up. This will likely increase user engagement and motivation.
3 out of 5 participants felt the help button was not immediately obvious and suggested making it more prominent.
Help and Assistance
Help Accessibility – The help function must be more visible and accessible to enhance user support.
Prominent Help Improves Support
Making the help button more visible and accessible can significantly enhance the user experience by providing necessary support more efficiently.
Recommendation
Make help more accessible.
Increase the prominence of the help icon and ensure it is easily accessible for all users, including those with impairments. This could involve increasing its size or changing its colour to make it stand out more.
3 out of 5 participants did not realise immediately that the step indicators were clickable and suggested more precise indications.
Navigation and Progress Tracking
Usability and Navigation – Participants appreciated the structure but highlighted the need for better indicators and navigation aids.
Clear Navigation Enhances Usability
While the step indicators on the left were useful, participants need more apparent signs or instructions that these are clickable to improve navigation.
Recommendation
Improve navigation cues.
Add tooltips or more prominent visual cues to indicate that step indicators on the left are clickable.
While it is a good practice to do usability testing early on to avoid wasting time/effort/money, in this particular case, it proved to be the opposite. Perhaps I should have done it after developing the high-fidelity prototype, considering that the whole sign-up process is relatively short.
Finally, the time had come to do the high-fidelity prototype. I already had a theme in my mind, and I knew I wanted to deviate from the current trend of white and boring sign-up processes that I encountered during competitive audit. I wanted to create something sleek but also magical, marking an inviting new modern world, offering some “getaway”: a world on its own.
As I love AI-generated images (I’m referring to good ones here, such as Midjourney), I started browsing through them. Until… I came upon some pictures that perfectly fit the idea in my head:
However, I think I managed to overdo my own brief as a failure occurred again, and this time, it was a total failure and almost became a complete disaster…
I honestly thought having a representation of entering into a new world through a character in a cyber world would be a great idea. That’s how my mind became clouded entirely by my own bias. Thinking back, the fact that I was working in the game industry, my admiration towards the cyber world, and disregarding some critical factors that I revealed during my very own user research – probably all added to my journey down the rabbit hole.
Luckily, I only managed to do up a few pages when my impostor syndrome stopped me from going forward. I started having doubts in my work – a somewhat typical occurrence – but it didn’t want to go away, so I began investigating. I had a hunch that perhaps it was rooted in the fact that the personas and the design itself were not lining up. After carefully inspecting the personas and their user journeys, it turned out that my doubt was real and my design was completely biased. To confirm further, I recruited friends and asked them to imagine being one of those personas. They all said that while Peter might get excited by the unique design, Li Mei might leave the site as soon as she sees the sign-up page. I had to reconsider the design, and while doing that, I was thinking about the current “debate” or, more likely, some loud voices claiming that personas are unnecessary and simply just time-wasting. Well, my case proved them wrong because, in this case, having personas provided a true reality check, and I was thrilled to have that. So, I made some adjustments:
Although I wasted some time on the wrong design, all was not lost. I kept the dark theme for various reasons. Back then, the crypto sites were in the dark, mysterious range, but nowadays, they are primarily minimalist (with only a few exceptions) and have moved to the corporate feel. I wanted to praise the beginning, which would also set my design apart from the cold, dull, corporate-looking sites. I tried to create a site that suggested an exciting experience instead of just another trading platform with a sleepy look. Adjusting the failed theme, I ensured it appealed to the target audience but was still magical and welcoming.
Below is the prototype to interact with:
The use of hierarchical headings helps users quickly find the relevant sections.
The high contrast ratio of the text was designed to enhance accessibility.
The use of labels is helpful for people using assistive technology, as it makes navigation easier.
Impact:
The app makes users feel looked after and enforces positive perceptions towards the restaurant, highlighting honesty and transparency.
What I learned:
Designing an app from the beginning involves many complex steps, and understanding the user is crucial in the process. Usability studies and peer feedback are critical to maximising the app’s potential. I also realised that I must improve my interview skills further with more practice.
Further user research would help identify additional user needs.
Further usability studies will be ideal to see if the pain points have been addressed successfully.
I have spent over a decade in the graphic design industry, creating artworks and also managing projects.
The examples here are just a tiny fragment of my work but I hope they are enough to showcase my creativity and the skills I have developed during those years.
Thank you for visiting my page!
I appreciate your time reviewing my work! More projects will hopefully follow soon.
