Web Animations

Problem & Solution

• The main challenge of this project was to develop a user-friendly solution that enabled customers to schedule a food truck for their events without having to call and arrange it, which can be a hassle and a barrier to new clients. To tackle this problem, I designed a mobile application that offered real-time availability and a simple, modern interface. The application aimed to provide an easy-to-use and responsive tool that would re-engage customers and simplify the reservation process.
  ‍
  To meet the needs of customers who wanted a more streamlined and convenient way to schedule food truck events, I developed a mobile application that focused on simplicity, accessibility, and real-time availability. The design of the application was inspired by modern and clean aesthetics, which aimed to provide a fresh look that would appeal to both existing and new clients. The goal of the project was to create an intuitive and responsive tool that would make scheduling a food truck reservation as easy as possible.
  ‍
• My roles in this project were user research, wireframes, prototyping, user testing, and completing the final high-fidelity prototype for developer.

Pain Points

• Time
  A key problem I identified in this project was the inaccuracy of the vendor's site, which led to customers having to repeatedly re-reserve food trucks. This was a significant issue for professional planners and the general public alike, who were often too busy to spend time on correcting mistakes on the platform. To address this problem, I focused on developing a more accurate and reliable tool that would minimize the need for repeated reservations and provide a smoother user experience.
  ‍
  
• Inclusivity
  Another issue that emerged during the research phase was the lack of accessibility on the platform, particularly the inability to notate dietary restrictions and preferences. This was a major concern for many users, as it made it difficult for them to find and book food trucks that met their specific needs. To improve the platform's accessibility, I designed features that allowed users to easily note their dietary restrictions and preferences and filter their search results accordingly.
  ‍
• Accessibility
  One of the main challenges I faced in this project was the lack of assistive technologies in existing programs for reserving food trucks. This created a barrier for users who had different accessibility needs, such as those with visual or hearing impairments. To overcome this challenge, I developed a more inclusive and accessible platform that incorporated assistive technologies, such as screen readers and captions, to ensure that all users could access the platform and its features.
  ‍

Personas

(See attached personas at the end of this case study for more detailed descriptions)

To gain insight into the target audience, I conducted interviews and empathy mapping exercises. The research led to the identification of primary user groups, including event planners and adults planning private events. These findings confirmed initial assumptions about Eva's customers, but additional research also uncovered issues faced by older users with hearing impairments, as well as other accessibility concerns such as allergens.

Another pain point was the lack of flexibility in scheduling due to busy lifestyles. To address these needs, the project aimed to provide an accessible and easy-to-use reservation system that allows users to reserve at their own pace and comfort.

Wireframes (Paper & Digital)

By creating multiple iterations of each screen on paper, I ensured that the digital wireframes would address user pain points effectively. Throughout the design process, I incorporated feedback and insights gathered from user research. This included adding features like real-time availability, allergen and ingredient information, and a more user-friendly scheduling process. With the completed digital wireframes, I created a low-fidelity prototype that focused on a simple reservation flow for the user.

Click here to try the low-fidelity prototype!  

Mockups & High-Fidelity Prototypes

The final high-fidelity prototype allows for a smoother reservation process. It also met user needs for a non-committal availability and menu view.

1. Added photos of each menu item to help users understand their options.
2. Redesigned icons to be clearer and adjusted the call-to-action buttons to be more obvious.
3. Enlarged buttons for users with motor impairment.

Click here to test out the final prototype!
("Flow 1" is the original version, "Flow 2" is the updated prototype)

Next Steps

This mobile app was designed to provide an alternative reservation method for users who are unable to call due to various reasons, such as hearing impairment or social anxiety. Throughout the design process, I gained valuable insights into the importance of being flexible and adaptable in meeting user needs.

To further improve the user experience, I would like to conduct another usability study and explore ways to enhance accessibility for under-represented user groups. The goal is to ensure that the app remains inclusive and user-friendly for all.

Problem & Solution

• After conducting research, I discovered a gap in educational resources that catered to both parents and children on the topic of emotions. The existing resources were either too complex or too simplistic. To fill this gap, I decided to design a cross-platform tool that would encourage both kids and parents to learn about emotions and empathy in a safe and engaging way.
  ‍
• My role in this project was UI/ UX Designer. Including user research, wireframes, prototyping, user testing, and completing the final high-fidelity prototype for developer.

Who?

I conducted user research by interviewing and creating empathy maps to understand the needs of the users. Through this process, I identified two primary user groups: busy parents (or guardians) and children who wanted to learn about emotions in a non-stressful environment at their own pace.

What?

To test the usability of the app, I used a new technique where I did not explain the app or its intended use to the user, allowing me to see how well the app explained itself. Based on the feedback received, I was able to simplify difficult decisions such as the organization of the home page and the prioritization of content.

Why?

While my initial assumptions were confirmed, further research revealed that a majority of potential users were children, and they were interested in learning at their own pace. The feedback also indicated that users were concerned about the difficulty level of the lessons and games, engagement, and educational value. These insights helped me to enhance the app and make it more user-friendly.

Pain Points

• Time
  With busy schedules, many parents struggle to find time for in-person classes or sitting down at a computer with their child. A mobile or online option would provide much-needed flexibility.
• Inclusivity
  In-person classes can be challenging for children who learn at different speeds and in different ways, and may not account for learning disabilities or processing disorders. A more accessible option is needed.
• Accessibility
  Accessibility is a key issue when it comes to in-person classes, as they often don't accommodate different learning styles or needs, such as processing disorders or learning disabilities. A digital option can help address these challenges.

Personas

I created sample personas based on the following findings:

1. Users wanted the ability to allow their child low-monitored access, a “kid-friendly” mode - and multiple accounts for different kids.
2. Parents expressed that they would like the option to talk with other parents in a forum or chat setting.
3. Users would like a quick-look resource page to see articles and activities they have saved .
4. Parents would like the ability to add articles and games to their child’s account.

Wireframes (Paper & Digital)

By spending time sketching different versions of each app screen on paper, I ensured that the final digital wireframes would be designed to effectively address user pain points. Throughout the design process, I continuously integrated feedback and insights gathered from user research into my screen designs. For example, I created separate "parent" and "child" accounts, and simplified the overall layout of the app. Using the digital wireframes, I then developed a low-fidelity prototype, with a primary user flow focused on a practice test for the kid version and the ability to save articles for the parent version.
‍
Go ahead and click here to try it out!

Mockups and High-Fidelity Prototype

Mockups and Hi-Fi prototypes were formed with the following accessibility considerations in mind:

1. Enlarged buttons for user’s with motor-impairment, and captioned call-to-action buttons for better understanding and those who use a screen reader.
2. Redesigned icons to be clearer and adjusted the call-to-action buttons to be more obvious.
3. Added photos of each emotion and topic to help users understand the design and options.

Click here for the mobile app prototypes

Click here for the tablet prototype

Next Steps

This app provided a safe and engaging environment for children and busy parents to learn about emotions and empathy at their own pace. Throughout the design process, I learned the importance of being flexible with my ideas and prioritizing user needs, especially when designing for children. Moving forward, I plan to conduct further usability studies to ensure that the app continues to meet user needs and address any issues that may arise. Additionally, I will conduct additional research to identify any underrepresented user groups and make any necessary accessibility updates to the app.

Problem & Solution

• The problem that I addressed in this project was the limited customization options available to users when ordering bouquets online. To achieve a unique design, customers often had to visit a physical florist or order multiple samples for large events, which was not only inefficient but also wasteful. To solve this issue, I designed a website that offers an intuitive and streamlined customization process, empowering users to effortlessly create their own personalized arrangements while saving both time and resources.
  ‍
• My role consisted of user research, wireframes, prototyping, user testing, and completing the final high-fidelity prototype for developer.

Background / Design Process

Before arriving at the final design for this site, I iterated through several versions that satisfied both the user's requirements and my understanding of their needs. Through interviews and empathy mapping, I gained valuable insights into the target users and their specific needs.

Based on research, I identified two primary user groups: adults seeking floral arrangements for special occasions, and professionals planning events like weddings or holidays. While these groups aligned with initial assumptions about Anthology's customers, further investigation revealed that most users ordering arrangements were non-local and preferred a convenient online ordering experience.
‍

Pain Points

• Time
  The design challenge in this project was to accommodate the time constraints of both professional planners and the general public, who often prefer a quick and easy process for selecting and customizing floral arrangements. By offering an accessible and intuitive customization flow, users can create personalized designs without feeling pressured to make rushed decisions.
• Inclusivity
  For users with specific needs, such as allergies or other sensitivities, the inability to fully customize each part of the arrangement can be a major drawback. To address this issue, I aimed to create a website with a robust customization process that accommodates a wide range of user preferences and requirements.
• Accessibility
  Many existing websites for designing bouquets are not equipped with advanced customization features, which can limit the extent to which users can personalize their arrangements. To overcome this challenge, I focused on developing a platform that offers a truly personalized and customizable experience, leveraging visual design elements to cater to users who comprehend information visually. This approach enables users to create arrangements that reflect their unique styles and preferences.

Personas

I created a sample pool of personas based off of the following criteria found through user research:
‍
1. Users wanted the ability to quickly view arrangements of a certain category.
2. Users expressed that they would like the option bypass the walk-through each time that they designed an arrangement.
3. Users would like a quick-look option on the home page to see what is new and in stock.

Wireframes (Paper & Digital)

To ensure that the final digital wireframes effectively addressed user pain points, I began by sketching out multiple iterations of each potential screen on paper. This approach enabled me to test and refine design elements before moving on to the digital phase, where I incorporated feedback and insights from user research into the screen designs. One of the key user needs that emerged was the ability to quickly and easily find the desired information.
‍
After progressing through the design phase, I leveraged the insights gained from user feedback and research to develop a set of digital wireframes that effectively addressed key user needs. From there, I used these wireframes to create a low-fidelity prototype, focusing on the primary user flow of designing a simple arrangement. Through this iterative process, I was able to fine-tune the design and ensure that the website was intuitive and user-friendly.

Test it here.

Mockups & High-Fidelity Prototype

In early designs, a user was only able to begin the design process in one way - which was by default a walk-through. This was frustrating for frequent users who already knew what to do and still had to go through all the step-by-step.

Using the following accesiblity concerns gathered from user testing, we created the hi-fi prototype.
‍
1. Enlarged buttons for user’s with motor-impairment, and captioned call-to-action buttons for better understanding and those who use a screen reader.
2. Redesigned icons to be clearer and adjusted the call-to-action buttons to be more obvious.
3. Added photos to help users visualize and understand options.
4. Added a photo example of each color in the "filter" dropdown, for those that may speak another language.

Try out my high-fidelity prototype!

Moving Forward

The goal of this project was to develop a website that catered to users who couldn't visit the shop in person or didn't want to waste time and resources on samples. In addition, I aimed to create a platform that was accessible to users with hearing impairment or social anxiety, ensuring that everyone could benefit from the custom bouquet design experience. Throughout the design process, I learned the importance of being flexible and open to change in order to meet the needs of the target user groups.
‍
Moving forward, I would like to conduct another usability study to gather feedback and determine whether the updates made to the website have resulted in an improved user experience. In addition, I plan to conduct further research on the user groups to identify any accessibility issues that need to be addressed, and ensure that all user groups are adequately represented on the platform. This will help me create a website that truly meets the needs of all users.