Project/2
  • Country: Canada
    • /
  • Year: 2023
    • /
  • Industry: Hackathon
    • /
  • Service(s):

    Service 1: UI/UX Design

    Service 2: Prototyping

    Service 3: User Testing

    Service 4: Team Collaboration

    Service 5: Hackathon Participation

SooyoCafe
SooyoCafe is a project developed during a hackathon, focusing on creating an engaging UI/UX design for a modern cafe experience.
Project Overview -

Flui is a User Interface Design Hackathon held in February 2024 during reading week, where participants collaborate with business clients to solve real-world design problems.Teams at Flui had just 10 days to create a complete website, involving 2 online client meetings, with my team consisting of 2 members and 1 client. I was in the role of designing the figma interactions and the user interface of the website.

Approach-

In leading our team's utilization of FigJam as a platform for brainstorming and documentation, I spearheaded a collaborative environment where structured thinking and effective communication were paramount. Leveraging my organizational skills, I ensured that our thoughts were methodically structured, fostering clarity and alignment throughout our discussions.With just 10 days at our disposal, I initiated each day with a clear plan, assigning tasks to ensure everyone remained on track. By distributing responsibilities effectively, I maintained a sense of urgency and momentum, maximizing our productivity and progress towards our goal.

Objective

  • 1 Day 1-2
    Discovery and wireframing. We gathered the client requirements and sketched wireframes
  • 2 Day 3-4
    we created the high fidelity design in figma and encorperated the client feedback
  • 3 Day 5-6
    we Built the interactive prototypes and coducted user testing.
  • 4 Day 7-8
    we refined the design and prepared the presentation.
  • 5 Day 9-10
    We presented the final design to the client and judges.
  • 6 Offer a playful, subversive twist on typical AI interactions to entertain users.
Design
  • User Research
    • /
  • Wireframing
    • /
  • Prototyping
    • /
  • User Testing
    • /
  • Team Collaboration

Design goal was to have Illustrations and a sketchbook-like appeal to the design as their image is of a neighborhood cafe.

Challenge

One of the main challenges was time constraint, as we had to complete the project within 48 hours. Balancing creativity with functionality required efficient teamwork and quick decision-making. Ensuring the design was both aesthetically pleasing and user-friendly was essential. We also had to adapt to feedback rapidly, making iterative changes without compromising on quality.

Direction

We focused on creating a design that was modern and inviting. The use of high-quality images and subtle animations aimed to capture the essence of SooyoCafe. The user interface was crafted to provide seamless access to essential features, ensuring users could easily navigate through the app and find what they needed without friction.

Result

The final prototype received positive feedback from both users and judges. Our design effectively conveyed the brand identity of SooyoCafe, providing an engaging and intuitive user experience. The project demonstrated our ability to collaborate under pressure and produce a high-quality design solution within a limited timeframe.

Stylesheet
RudeBot
Prototyping
  • Figma
    • /
  • Adobe XD
    • /
  • Usability Testing
    • /
  • Iterative Design
    • /
  • Collaboration Tools

After we identified the User's needs and the design direction, we moved on to the prototyping phase.

Prototyping Process
Initial Sketches

Initial Sketches

We began with hand-drawn sketches to quickly capture ideas and layout possibilities. This step allowed us to visualize different concepts and decide on the most effective design direction.

Digital Wireframes

Transitioning to digital, we created wireframes to establish the structure of the application. We focused on user flow and navigation to ensure an intuitive experience.

Wireframes
Interactive Prototype

Menu Page Interactions

Through extensive prototyping, we consolidated the menu into a single, user-friendly component, enhancing navigation. Each menu item became a variant, simplifying access. We introduced a compelling call-to-action for exploring the gallery. Addressing a hover component challenge, we devised a workaround using rectangles. This optimized interaction ensures a cohesive user experience, prioritizing accessibility.

Interactive Prototype

gallery Page Interactions

Through extensive prototyping, we consolidated the menu into a single, user-friendly component, enhancing navigation. Each menu item became a variant, simplifying access. We introduced a compelling call-to-action for exploring the gallery. Addressing a hover component challenge, we devised a workaround using rectangles. This optimized interaction ensures a cohesive user experience, prioritizing accessibility.

Next Project
Project /3
Recycle BC
  • Country: Country Name
    • /
  • Year: 2023
    • /
  • Industry: Industry Name
    • /
  • Service(s):

    Service 1: Service Description

    Service 2: Service Description

    Service 3: Service Description

    Service 4: Service Description

    Service 5: Service Description