Problem

The survey conducted to assess user interactions and experiences on the CakeWrecks website revealed several significant issues. Users identified challenges such as the absence of search suggestions and filters, low visibility of the system's status, the lack of a user guide or help feature, and an overall perception of outdated design and aesthetics. These concerns collectively indicated a gap in user convenience and excitement, hindering the optimal exploration of the website.

CakeFix

The journey to refine the CakeWrecks website was a collaborative effort with my teammates. Together, we designed and executed a survey to collect valuable user data, leveraging this information to create detailed personas. Collaborative brainstorming sessions allowed us to formulate tasks and scenarios that addressed usability issues, fostering a holistic understanding of user needs. Our shared dedication to improving the website's functionality and design resulted in a unified vision for a more user-friendly and visually appealing Cakewrecks experience

Solution

To address the identified issues, a comprehensive approach was undertaken. We formulated detailed personas for multiple user types, allowing for a nuanced understanding of user needs. Tasks and scenarios related to usability problems were developed collaboratively, and an observation sheet was designed to document user interactions. Based on user feedback, our solution involves implementing search suggestions and filters, enhancing system status visibility, introducing a user guide or help feature, and rejuvenating the website's design to instill a sense of excitement and modernity.

Home Page

Contact Page

Original

Home Page

Contact Page

Research

Heuristic Evaluation

Through user responses and observations, several issues came to light, including the absence of search suggestions or filters, low visibility of the system's status, the lack of a user guide or help feature, and an overall perception of dated design and aesthetics. Based on these findings, a hypothesis was formulated: users are seeking convenience and excitement in their exploration of the website. This hypothesis serves as a valuable foundation for refining the website to better meet user expectations and preferences.

Questionnaire

After finding severe issues on the site, we created and conducted a survey and two questionnaires to determine the demographics of site visitors and developed user personas to guide our study.

Pre-test

Post-test

Survey Results

The survey proved instrumental in gathering insightful data on user interactions and experiences within the website. This research methodology was chosen deliberately to achieve a highly specific demographic representation of our users, allowing us to create detailed personas for multiple user types. I took the initiative in developing a comprehensive questionnaire and collaborated with the group to formulate tasks and scenarios addressing usability issues. Additionally, I designed an observation sheet to meticulously document user paths in completing these tasks.

User Needs

As a user, I enjoyed looking at the various photos of cakes and exploring a webpage that is used by numerous people. However, I believe that in order to enjoy the experience, it must be easy to navigate for the average user and designed in a way that enhances user experience. As a designer, I am aware my designing is objective and not personalized. User issues cannot be assumed, therefore our team completed heuristic evaluations to determine overall usability.

User Personas

Design

Deciding between alternatives

Understanding the overarching design goals, our brainstorming sessions focused on generating ideas aligned with user insights and collaborative input from team members. Following user interviews, it became evident that the home page required significant redesign efforts, given its central role in user interaction. Since the website predominantly consists of submissions, special attention was directed towards creating an inviting and user-friendly contact/submission page to serve as a focal point.

To address the need for clarity on the Main and About pages, I developed several mockups, prioritizing layouts that streamlined the user experience and minimized clutter. A key consideration was defining criteria for categorizing pictures and text within each area. This led to the creation of two low-fidelity wireframes, each accompanied by a list of pros and cons. This iterative process prompted a critical question: What are the primary elements that captivate users, encouraging continued engagement as they navigate from one picture to another? This reflection aimed to pinpoint the essential features that contribute to user retention and seamless navigation throughout the site.

Pros

  • Enhanced Variety
  • User Engagement
  • Accesible Information

Pros

  • Clear Organization
  • Focused Information
  • Scroll and Selectable

Cons

  • Organization Challenges
  • Potential Clutter

Cons

  • Not User-Friendly Scrollable Option
  • Possible Reduced Engagement

Next Steps

In response to valuable feedback from the team during our collaborative discussions, it was noted that the original wireframe formats inadvertently omitted some photos within the photo groups. Acknowledging this input and considering the team's preferred ways of grouping photos—based on submission, style, or date—I iteratively developed an alternative approach.In the revised design, I opted to organize each photo group by date, recognizing that this strategy would enhance fluidity and categorical clarity. This adjustment aims to address the team's feedback, ensuring that all photos within the groups are appropriately included and that the overall layout aligns with the preferred categorization criteria. The iterative process reflects a commitment to refining the design based on collaborative insights for an optimal user experience.

Visual Design

Typography

The typography in these mockups employs distinct and visually appealing fonts. For the text and body sections, the clean and modern sans-serif font Open Sans is utilized, contributing to increased legibility. In contrast, the main headings feature the Georgia font, which imparts a touch of sophistication and elegance to the design. This thoughtful selection of typography not only enhances readability but also adds a friendly and approachable aesthetic to the overall visual presentation. The combination of Open Sans and Georgia fonts contributes to a cohesive and well-balanced typographic hierarchy in the design.

Color Theory

The color palette for this project adopts a minimalistic approach, primarily focusing on blue and green tones. However, there is a noted issue with its implementation, as the colors were employed excessively without sufficient whitespace between elements. To address this concern, the original blue and green hues were retained but strategically positioned as accents. This modification aims to maintain a clean and uncluttered visual aesthetic while ensuring that the color scheme serves as a complement rather than a distraction. The intention is to strike a balance between minimalism and effective use of color, creating a harmonious and visually pleasing design.

Solutions

Home Page

Contact

Reflection

Future Steps

In considering the future steps for this project, the absence of real user-structured feedback highlights a critical aspect that could further enhance the validity of the redesign. Collaborating with developers would have provided insights into potential limitations and refined the proposed ideas. Real user data extracted from the site could uncover unseen patterns and needs, offering valuable input for continued improvements.Several pivotal questions emerge for a deeper understanding of the website's dynamics:

1. How do different methods of navigating between photos and within a photo group impact the overall flow of the page and user experience?

2. Is the alternative format chosen for interaction with photos the preferred method for all users?

3. Does the introduction of pinned photos or recommended photos align with user expectations, and should there be flexibility in offering multiple options or a consolidated approach?

These questions, if addressed through user testing and feedback, can contribute to a more refined and user-centric design, ensuring that the website optimally caters to diverse user preferences and needs.

What I learned

Collaborating with my teammates during the brainstorming phase presented a unique challenge to seamlessly integrate both user needs and diverse ideas into a cohesive and functional experience. The redesign process became an enlightening exploration, emphasizing the significance of leveraging statistical data to understand user behavior on websites. Analyzing known data played a crucial role in making informed design decisions and ensuring the optimization of the user experience.

Moreover, this project provided an opportunity to delve into the intricacies of introducing new features and their potential impact on existing functionalities and user mental models. The deep-dive into these considerations enhanced our appreciation for the delicate balance required to introduce innovations without disrupting established user expectations. This experience underscored the complexity inherent in crafting user-centered designs that harmonize diverse perspectives, user needs, and the evolving landscape of digital interactions.