Providing a seamless cooking experience by eliminating guesswork
When I first stepped into this project, it had already been delivered to headquarters. However, it needed modifications to accommodate a new UI design, catering to a larger screen size and aiming for an overall enhanced UX experience.
Typically, microwaves ask users to set the time for reheating and defrosting. This process can be confusing, leading to problems like overcooked or undercooked food.
Enhance the cooking experience by eliminating guesswork. Our solution suggests the optimal temperature for each type of food, ensuring a precise and enjoyable cooking process.
We started by putting ourselves in the shoes of our users and figuring out the steps they take from discovering our product or service to getting what they want. It helped us figure out where users were getting frustrated or confused.
We then decided to chat with some real-life users to double-check our assumptions and get valuable insights into what they really need and how we can make things better for them.
We wanted to get a well-rounded understanding of our user base, so we interviewed 7 participants, the primary user groups: K-12 students and their parents. Since students are under 18, we engaged with parents as our main source of insight.
In addition to testing the completion of tasks, we also asked about what motivates their children to exercise consistently and what obstacles they commonly face.
Findings About Kids
1. Hard to keep motivated without an exercise friend
2. Organic regime, no specific workout schedule
Findings About Parents
1. Trouble finding time to exercise with my child due to our busy work schedules
2. Want to raise awareness about the importance of building exercise habits at home
By conducting a heuristic evaluation according to Jakob Nielsen’s 10 general principles for interaction design, the team was able to deep dive into the problem of the current website.
The team analyzed the strengths and weaknesses of the competitor, Presidential Youth Fitness Program (PYFP) who offer similar products to discover how current products in the market do not meet users’ needs that could be incorporated into future designs of InPACT at Home website.
Strength
Weakness
1. After completing an activity, the reflection survey does not automatically appear on the screen, requiring users to remember to scroll down to complete it.
2.After watching a video, the user users do not receive an immediate notification. Also, they are unable to exit the reflection survey unless they close the tab and reopen the website.
3. Users cannot track their workout progress other than earned badges and ranks. Also, it lacks personalization for users.
4. Having too many video options creates confusion for users when trying to choose what to watch.
1. Allow users to set personalized health and fitness goals to personalize their experience.
2. Offer weekly tasks to minimize decision-making time.
3. Aim for clear and simple UX writing to improve user experience.
4. Streamline the badge-earning process to make it simpler.
5. Establish a clear information and visual hierarchy to make information easy to digest.
6. Provide feedback for the user's current state, errors, and notifications.
We started by creating an avatar to represent the user, along with a weekly personal goal. To help users track their progress, we added a progress bar.
Users can also view their completed activities for the week, as well as any badges or ranks they've earned.
Additionally, we incorporated a pop-up notification on the video page to inform users when they've earned a badge. This feature helps users stay motivated and aware of their achievements.
Our team translated design concepts and information structures into tangible representations, which led to a significant improvement in the design: the introduction of personalized weekly goals for tasks.
Using these goals, we developed a feature that recommends tasks and videos to help users achieve their weekly objectives.
To make sure our design meets the needs and expectations of its target audience, we conducted our 1st round of user testing with 3 participants who were previously interviewed.
Problem 1:
Solution:
Problem 2:
Solution :
The team conducted another round of user testing with 3 participants.
Problem:
Solution:
Following our second round of user testing, we presented our designs to our clients and peers and received feedback indicating that the core features of:
Problem 1:
Solution:
Enhancement 1:
Enhancement 2:
Enhancement 3:
After revising the mid-fi prototype based on the user testings, the team created a hi-fi prototype that is close to ready-to-release version of the product.
The team incorporated icons, colors, and illustrations that create a cheerful and positive vibe, which can enhance the user experience and promote engagement.
Trying to minimize any potential bias during the A/B testing, the team had 3 participants look at the new design while the other 3 participants looked at the current design. All participants had no experience using the current InPACT at Home website prior to participating in the evaluation study.
Task Completion Rate
Number of Clicks for Task Completion
Potential Bias
By comparing the systems, characteristics, and cultures of Yelp and Airbnb, we knew we needed:
These analogous competitors with similar business models also helped us find these untapped opportunities:
The team conducted 10-15 minutes user interviews (10 participants) and qualitatively analyzed the interview data. It revealed 3 main themes of negative experiences they had when trying to plan a trip or outing:
"I was tired even before my trip because the itinerary was tightly scheduled, and others chose a place I did not want to go."
"I used hashtags to see the restaurant reviews and photos, but there were selfies included. The hashtags are not used properly, and I am so frustrated about this."
"While Google search engines are helpful finding various location information, the advertisements and articles written by the travel agencies are annoying. It is hard to tell whether they are based on real experiences or not."
To address the problem of connecting with surroundings and showing gratitude to local communities, target activities that our solution needs are:
We created 2 primary personas and 2 secondary personas along with scenarios based on our interview data. It allowed us to understand the needs of potential users better and define our idea.
Visualizing our app's use and impact, we continued building empathy for our future users.
The user flow served as the "blueprint" for creating our wireframes and final prototype. It gave us a solid map of how all our screens and interactions connect.
Since there are five members in our group, we each strived to do 3-5 interactions per person. After we all completed our experiments for the paper prototype, we organized them for the recording.
We conducted usability testing with 4 participants to ensure our paper prototype included all of the necessary features. It helped us prioritize and eliminate interactions that are not important to our app.
During the whole process, most participants commonly struggled with going to the previous page, scrolling the page, and finding the correct button to perform the desired action. Our plans for mitigating errors were the following:
Based on the paper prototypes and the flaws we found during the usability testing, the team started off by creating wireframes for the traveler account.
We added more major screens, colors, graphics, and interactions that helped our prototype come live. The mid-fi prototype enabled us to visualize our final solution better, and it will be used with users for usability testing.
To test the current usability of our travel app, our team had 5 participants complete a series of tasks to determine the strengths and flaws of our prototype.
Participants mostly had trouble navigating the map, knowing whether or not the trip they created was successful, changing the account type to host, and clicking the correct button when viewing plans for their trip. Our plans for mitigating errors were the following:
The team selected the primary color as bright blue (#5268F8) to build a positive image and give an energizing feeling. The secondary color yellow (#FFD166) maximizes cheerfulness, and the typeface Poppins maintains a playful and modern look.
Gaining context on Literati's priorities and wants, I established milestones and prioritized tasks.
The main problems of current website design are the following:
To benchmark the checkout flow, I conducted a competitive analysis on four competitors - Powell’s Books, Barnes & Noble, Strand Bookstore, and Abebooks. The takeaways are the following:
I reorganized Literati’s current website content to determine information architecture and navigation.
The color palette represents the Literati’s identity. Primary colors are black (#1C1C1C) and white(#FFFFFF) to mimic ink on a white page and the bookstore’s black and white checkered floor.
The affinity diagram generates, organizes, and narrows down the ideas to identify the users' needs related to our product, iPick. This method is beneficial during the beginning stage, where we confront complex issues and make group decisions.
The user surveys quickly obtain diverse information from many people by asking targeted questions. This research method is especially efficient during the COVID-19 pandemic, where it is hard to meet the participants in person. Survey responses from 35 participants allowed us to see both users' general needs.
Affinity diagram and user survey allowed us to define the design requirements for the application:
We developed both primary and secondary personas with scenarios to better understand users' needs.
We created a user flow to define the key features of our app and how each screen relates to one another.
Sketches address the needs we found during our user research stage.
Based on initial sketches, we came up with the app navigation, basic interface, and thus a simple interactive lo-fi prototype.
We recruited 4 target users to test the interactive prototype we developed. During user testing, we obtained users demographic information (job, age, app usage, and gender) and asked them to complete 6 tasks followed up by exit questions. These are our future plans mitigating errors:
We chose brand colors as warm colors to evoke feelings of warmth and comfort. It brings more affection into users' relationships, which matches our product's main goal.
The font choice, SF Pro Display, helps establish the minimal design. It also works well in multiple sizes and weights, making it legible on mobile screens.
Operate the app from two different account types-traveler and host.
Customize your travel needs in a simplified way through a series of generated questions.
Invite friends or family to create travel/events plans together.
View best places to visit near you with user ratings and location descriptions.
Carousels are removed on the homepage. Instead, I inserted image of the bookstore and featured top priorities-events, books, gift cards, and merchandise.
Users can easily navigate back to the previous items. Recommendations for more items reduce decision time.
Indicated current step with numbers and colors. It gives a clear idea of the whole process that they can expect what the remaining steps are, minimizing the cognitive load.
According to Fitts's law, the “time it takes for a user to engage with an object is relative to its size and distance to it.” Large buttons (H: 58-64px) increase the chances of being noticed and clicked.
Minimized the number of forms (< 11 fields). Auto-populate city and state by putting their Zip Code. Autodetect the credit card based on the card number
The current InPACT at Home website has no feature for setting the user’s goals, where users have too many options to navigate that may increase in decision time. A fitness goal feature will make the website more personalized and help guide users in making decisions, thus reducing overall decision time.
My Progress page provides an overview of the user’s goal and their completion toward it, daily tasks, focused topics, activities, and badges and ranks earned. It increases engagement and motivation to work out consistently.
New users will be guided through the features of the progress page that eliminate the confusion of navigating through the My Progress page.
On the current InPACT at Home website, the video reflection does not appear on the same screen after watching a video. Users must remember to scroll down and they also do not have an option to navigate back to the previous screen.
The design enhancement reminds the users to earn a badge right after watching the video, reducing their time navigating the website.
The team specified the final design at a level of detail that would allow a developer who was not part of the design process to implement the developed design as intended. It includes not only the key screens shown above but also interaction map, site map, and UX specifications.
The current InPACT at Home website has no feature for setting the user’s goals, where users have too many options to navigate that may increase in decision time. A fitness goal feature will make the website more personalized and help guide users in making decisions, thus reducing overall decision time.
My Progress page provides an overview of the user’s goal and their completion toward it, daily tasks, focused topics, activities, and badges and ranks earned. It increases engagement and motivation to work out consistently.
New users will be guided through the features of the progress page that eliminate the confusion of navigating through the My Progress page.
On the current InPACT at Home website, the video reflection does not appear on the same screen after watching a video. Users must remember to scroll down and they also do not have an option to navigate back to the previous screen.
The design enhancement reminds the users to earn a badge right after watching the video, reducing their time navigating the website.
The team specified the final design at a level of detail that would allow a developer who was not part of the design process to implement the developed design as intended. It includes not only the key screens shown above but also interaction map, site map, and UX specifications.
Advocating for a minimalist design taught me the vital role of clear communication. Providing explanations for design decisions fosters understanding and builds consensus within the team. This experience sharpened my ability to actively listen, adopt an engineer's perspective, and troubleshoot collaboratively.
Designing for a controller display required a shift in perspective and imaginative thinking. This experience enhanced my adaptability, pushing me to find intuitive ways to present information. Leveraging creativity and empathy, I was able to craft a user interface tailored to the unique interaction paradigm of the appliance.
Navigating time constraints and limited user testing due to NDA challenges, I swiftly turned to team feedback for diverse perspectives. This experience underscored the value of agile problem-solving and the importance of open dialogue. Quickly adapting to seek insights from team members not only facilitated decision-making but also highlighted the significance of collaborative and open communication in overcoming project constraints.
Check your friends' availability by looking at their timezone and locations. This prevents you from worrying about you disturbing them when they're busy or while asleep.
Easily chat with your friends through a simple and easy navigation route to the chat page. You can also easily distinguish between all chats and unread chats to reply to other users quickly.
Engaging parts such as creating quizzes and solving friends' quizzes allow you to better understand your friends and families.
The rankings displaying who got the most questions right make you see who knows you the most.
Together is always better than alone. Contact me for any job opportunities, freelance projects, or just literally anything in your mind. I promise to get back to you as soon as I can.