This is current a work-in-progress
UI Challenges
These are a series of online Design Challenges that gives topics for users to work on. The theme for each individual days have been labelled accordingly
AllRecipes Website
Revamp
PROJECT TYPE
UIUX Design, Web Design
YEAR
2017 (Cleaned up in 2019)
Allrecipes helps cooks discover and share the joy of cooking by providing access to a dynamic food-focused social network where personal connections and shared food experiences.
From conception to completion, I have done processes that includes user researching, developing persona and user journey, wireframing, prototyping, and visual design for this school project.
This is a project that was done during my time in my Specialist Diploma in Design for Integrated Communication, but was further cleaned up later in the years.
For my school project, I am tasked to redesign a website (3 pages), finding out the pain points, and improve the user experience of the website.
OLD DESIGN (as of 2017)
This is the old design of AllRecipe. While some features were well-received by users, others were met with dissatisfaction, especially when compared to the previous version. With that in mind, we will explore user reviews and comments to understand their feedback.
UNDERSTANDING THE PROBLEM
Before designing, I dived down into reviews of the website that were expressed by users online, I also conducted surveys to understand the cooking community/ people who uses recipes often.
By the end of the research, I hope to find out the following key pointers:
-
Understanding the user's goals and needs
-
Uncovering not only the pain points but also the good ones too.
SEARCHING FOR ONLINE REVIEWS
To broaden my perspective, I have sought insights from various sources by looking a review website.
There was a noticeable change when the website was redesigned from 2014 to 2016. Here are some of the key takeaways:
-
People enjoyed the dropdown menu/spinner
-
Easy accessible to add favourite
-
Sorting of recipe via ratings/ingredients
-
Easy search bar
USER SURVEY
I also conducted a survey with 18 users, who have cooking background or people who uses recipes. I asked some questions in regards to the website as well as their needs. Here are some of the key takeaways:
-
Users searched for a wide variety of topics
-
Reviews are the most important features that determines the recipe they use
-
Similarly to the online users, they find the allrecipes (2017) to be confusing and overwhelming.
USER PERSONA
After researching, I created a user persona that includes key details such as demographics, goals, behaviors, and pain points to help create a more user-centered experience.
REDESIGNING THE INFORMATION ARCHITECTURE
A new IA is being made to clear up confusions and for redesigning purposes.
SKETCHES & WIREFRAMES
Sketch iterations were used for directional discussions. Feedback was taken from lecturers and classmates. The sketches were then placed in front of classmates and lecturers to see what their feedback was. These are some of the initial sketches made. After I was done with all the planning I moved on to wireframing and I started with the onboarding flow.
FINAL
OUTCOME
HOMEPAGE
Designed for convenience, the homepage lets users search for their desired dish instantly. The search bar offers specific filters to improve accuracy. Users can also explore four main categories of common searches or scroll down for random recommendations.
SEARCH RESULT PAGE
With a simple search, the result page gives users different options to both view their results and filtering them. From viewing in grids to rows, the filtering system includes more specific choices that would prefer something stricter to work with.
RECIPE POP-UP
When users find something interesting, a pop-up dialog shows all key info at a glance and can be closed anytime without losing their place. An optional voice guide is available for those needing help while cooking and also for the visually impaired. They can also easily bookmark their recipe at the top corner of the picture.
MOBILE VERSION
The website is also converted to a responsive mobile version.
CONCLUSION
This is my first project that is related to UIUX. I do feel fearful because it is something new and worried that I might be doing things wrongly. However, I enjoyed figuring out issues and improving them. I had fun doing this project.