InPACT at Home Website Gamification

• Analyzed project objectives and identified current pain points and challenges.
• Created a user flow for the product to implement the new feature effectively.
• Conducted market research on smart ovens, microwaves, and related home appliances, focusing on key values, pricing, and target users (novices or professional chefs).
• Studied research papers and guidelines from Federal Food Safety Agencies such as FDA and CDC.
• Collaborated with engineers and industrial designers to gather technical requirements and understand appliance mechanisms.
• Generated different ideas and concepts through prototype creation.
• Iterated the design process by actively communicating within the team and considering technical feasibility.
• Conducted internal user tests, presenting tasks related to reheating food and gathering feedback.
  

• Achieved significant reduction in decision-making time for users.
• Increased user satisfaction and confidence in the cooking process.
• Recently re-delivered a demo to HQ and scheduled the product for launch in Q2-Q3 2024.
  

These analogous competitors with similar business models also helped us find these untapped opportunities:

• Avoid information overload that provides too many features to compete with other platforms
• Social elements that allow users to open the app on a regular basis 
• Again, use AI to anticipate users' needs and give a content recommendation based on their demographics and previous activities

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:

To address the problem of connecting with surroundings and showing gratitude to local communities, target activities that our solution needs are:

• Connect people to local attractions by adopting AI-based travel itinerary generators and geolocation services
  
• Reduce travel planning time with personalized recommendations that match each individual's travel style  
  
• Help users to make travel decisions through reliable user reviews of local experiences
  
• Support neighbor connection by adding social elements, such as messaging and friends features
  
• Allow users to plan their trips collaboratively-they can create a group and answer the travel questionnaires individually to accommodate their travel preferences
  
• Include people with low digital literacy skills by implementing simple navigation

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:

• Add an arrow on the top left of each page to make the back button more accessible and noticeable, which can assist users in accessing the previous page more quickly
  
• Rearrange the position of each icon to give a more accurate direction and specify the purpose of each icon
  
• Reorganize the account page simpler to contain the essential information in hierarchy order
  
• Place the switching account type option at the bottom of the account page so that users can easily see the option at first glance
  

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: 

• Develop a loading page after when the users complete their quiz to notice that their quizzes are successfully completed, and their plans are being created
• Implement a page that shows the recommended trip plan based on their answers to the quiz 
• Relocate the map icon on the Explore page 
• Rebuild and simplify the user flow to easily navigate the app to find the map feature 
• Add a login page to clearly indicate that they are starting or switching the account. 

Gaining context on Literati's priorities and wants, I established milestones and prioritized tasks.

• Highlight events, books , merchandise, hours and location sections (based on both interview and website traffic analytics).
  

• Stakeholder wants buttons for book recommendations, emphasis on in-person activities, an automated way of communication in the checkouts - e.g., pick up your book on Jan.15.
  
• Stakeholder does not want Slideshows.
• The target audience of book purchasers is people interested in literary fiction, which tends to be young professionals or retirees. But, Literati also attract a wide range of people including people who haven’t read a book in years.

The main problems of current website design are the following:

• Inaccessible carousels
• Too much information on one screen, especially on the checkout process
• Long book description, requiring high cognitive load

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: 

• Minimize process steps into 3-5 steps
  
• Checkout type can be either accordion or multi-step checkout
  
• Use color and icons on a multi-step progress bar to indicate the current step
  
• Provide “Back” button or make sure each process steps are clickable links

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:

• Multi-user application
  
• Real-time data update (e.g., different time zone, data from the users)
  
• The information can be saved, stored, and retrieved
  
• Multi-model communication contents (e.g., quiz, chat)
  
• Any information should be communicated across the expected range of user sensory ability, protecting the users from errors (learnability, consistency, affordance, constraint)
  
• Relaxed mood color palette
  

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:

• Reduce the number of game topics users see in one screen
• Include text description next to the bar graph on friend's profile section to show what it actually represent
• Connect chat button on the profile to profile’s chatting room
• Use text instead of the clock icon to represent friends' timezone
• Add different visual elements into three buttons in the Game screen to differentiate them
  

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.