Yung Siew Weng / 0339847
Major Project /
Bachelor of Design (Hons) in Creative Media
Eveats App Compilation
MODULE INFORMATION
Major Project - Project Compilation
INSTRUCTION
The module requires us to create a standalone portfolio artifact, either based on their Design Research Dissertation (DIS60304) or a new topic. We must demonstrate independent learning by applying class content to develop a high-quality design project. The course includes blended learning materials, such as tutorial videos, case studies, and expert talks, with a flipped classroom approach. Face-to-face consultations are also provided and documented online.
EXPLORATION
Week 1 -
Brainstorming and Ideate
During the semester break, I found myself with a lot of ideas, but none of them really felt solidified. I decided to take a step back and allow myself some time away from consultation and research to clear my mind and reflect on what I truly want to pursue in the future. I asked myself what kind of project would make me proud.
After giving it some thought, I narrowed it down to three potential ideas :
The 3 Rough Ideas
Week 2 -
Discussion, Solidify Idea & Case Study Analysis
During the class session this week, we were informed that all UI/UX students would be under Mr. Mike's supervision. In our first lesson, he requested us to refer to any job postings and assess whether we met at least 75% of the requirements. We were encouraged to reflect on whether our ideas could help us secure a job or stand out in the market.
Upon reflection, none of my ideas truly made me feel proud; in fact, they felt a bit boring. The first idea, an anti-bullying app, seemed too similar to existing mental health apps. Given that many of my peers are also exploring mental health topics, I found this direction rather uninteresting. The second idea, a wholesale management system, appears too technical for my goals of branding and UX design, making it an unsuitable choice for me to pursue.
My last idea, the health and fitness involves reusing my initial advanced typography text creation for my branding. With the ongoing copyright issues in the industry, having my own copyrighted text could make my work more unique and personal, aligning better with my branding aspirations. So, I have decided to make this idea my temporary exploration choice. However, I still feel it may not be engaging enough.
a rough UX Flow creation during consultation waiting time
After my consultation with Mr. Mike, I felt truly inspired. He suggested that if I want to create a rich UX experience, the app itself should have diverse functions, much like Grab, to successfully engage users. This reminded me of a previous idea I had: creating a supermarket. The concept is to establish a grocery store that combines all the needs of the users. It's not just a store; it specifically targets individuals who want to eat healthily.
After gaining a brief understanding of what I am pursuing, I have a clearer idea of the existing brands that align with my thoughts. I continued by diving deeper to conduct a UX case study analysis:
MealMind Case Study
MealMind is a smart food planning website that utilises AI to provide personalised meal planning and nutritional guidance. MealMind app enhances user experience through personalised meal planning, automated macro calculations, and a user-centric design that allows easy adjustments to dietary goals. While it effectively incorporates clarity in instructions and visual cues for progress, the app needs to improve the clarity of the button.
Ben Grocer Case Study
Ben's Independent Grocer (B.I.G.) is a vibrant grocery store established to be a one-stop destination for food lovers. Since 2011, B.I.G. has curated a wide selection of high-quality, fresh ingredients from around the world, featuring specialised sections like Barn Butchery, Bay Seafood, B.Organic, and Malaya Kitchen. However, in the app, BIG struggles with an outdated design layout that negatively impacts the overall user experience. Key design issues include the non-approachable use of font sizes, excessive color usage that overwhelms users, and inconsistent brand identity, particularly seen in the variation of button colours. These elements collectively create a cluttered and confusing interface, detracting from the app's usability and modern aesthetic.
Analysis Conclusion & Learning
After conducting the case study analysis, I compared both MealMind and Ben's Grocer to identify opportunities and determine which features I can improve or integrate into my application. This comparison helped highlight gaps and strengths in both platforms, guiding me in enhancing user experience.
Additionally, through my research, I observed the wide range of dietary preferences and allergy types globally, which emphasises the need for a more inclusive approach in addressing various dietary requirements in my app.
After, i did a new ideation plan towards the "grocer app" "
New Idea Plan : Grocer App
Week 3 -
User Personas & User Journey Map
After consulting with Mr. Mike, he suggested focusing more on food and health rather than groceries, transforming the application into a platform where grocery brands could integrate their services, offering additional features such as price comparison.
However, upon further reflection, I decided to return to the original concept of creating a platform for grocery stores to participate in. Moving forward, I proceeded to the next stage, defining three user personas and mapping their respective user journeys.
#User 1 : Emily
Busy working mom that need a simple way to plan meals and shop
#User 2 : Alex
a trainer with specific diet requirements to achieve health goals
#User 3 : Sarah
Having allergy needs in meal planning
Based on the three user personas and their respective user journey maps, I concluded that my target audience consists of both individuals and families with diverse dietary needs. This includes busy working moms like Emily, who need a simple way to plan meals and shop; fitness-focused individuals like Alex, a trainer with specific diet requirements to achieve health goals; and families like Sarah’s, who must consider allergy needs when planning meals. The app will cater to these groups by offering personalised meal plans, shopping convenience, and support for various dietary restrictions.
Week 4 -
User Personas validation, Information Architecture
After creating the user personas and user journey map, I was asked to conduct user validation research to assess the accuracy and relevance of the journey map. In order to make the journey map to be more clear for the user to walkthrough, storyboards are been created :
Initially, the plan was to interview at least two individuals from each persona. However, due to various considerations, I opted to conduct the validation through an online survey using Google Forms.
User Validation Analysis
In short, a total of 15 respondents participated, providing valuable insights for user validation. The data analysis revealed key themes and user needs across three personas: the Busy Convenience Seeker, the Fitness Diet Planner, and the Allergy-Conscious User. Each persona highlighted unique pain points, desires, and features that should be prioritised in the app’s development.
Despite their differences, a common theme emerged—a busy lifestyle and the desire for convenience in meal planning. This reflects a broader trend in today's society, where individuals manage multiple responsibilities and seek efficient solutions to meet their dietary needs. These findings confirm the importance of addressing convenience, flexibility, and personalisation in the app’s design.
And, continue to the creation of information architecture (IA) :
Information Architecture of the week
Week 5 -
Wireframe, Branding & UI Design
As part of the requirements for a competitive analysis of app UI design, a quick evaluation was conducted for Yummly, Whisk, and Samsung Food.
Yummly vs. Whisk vs. Samsung Food
In short, "Yummly" focuses on visually engaging and personalised recipe recommendations that cater to diverse dietary needs, enhancing user engagement. "Whisk" emphasises efficiency through seamless integration of meal planning and grocery shopping, providing a streamlined experience for users who value convenience. "Samsung Food" takes a tech-forward approach with AI-driven meal planning and smart device integration, appealing to users seeking innovative, hands-off solutions.
Continuing with branding, the initial step in building the brand identity involved creating a set of moodboards :
Moodboards
After having a detailed set of moodboards and ideations, i continue to brainstorm some potential names and drafting initial logo designs :
- Bite : Represents the simple act of taking a bite, connecting to the app’s focus on food and nutrition.
- Byte : Retains the food association while adding a tech touch, as "byte" implies digital data, blending food with technology.
- Grovi : Pronounced "grow-vi," combining "Grow" for health and wellness with "vi" for a modern, tech-forward feel.
Name & Logo-s Ideas
// I personally prefer Byte or Grovi to represent the brand! As "Bite" might be to common in the market :>
After the naming process, I moved on to developing the wireframe design. Since the requirement for the Week 7 presentation was to include at least one persona's journey, I decided to draft Persona 2, the fitness-driven planner :
"Wireframe" of the Week
Week 6 -
Presentation Slide Desk Preparation, Wireframe Development
After receiving approval and ensuring everything is on track, I moved forward with preparing the presentation slide deck. While organising the slides, I realised that including user flows would enhance the clarity of the presentation, so I decided to create a flow diagram to present the app's functionality more effectively.
User Flow Diagram
Continuing from week 6, although I initially planned to create a wireframe for Persona 2, time limitations and the need for more exploration have shown that Persona 2 would require additional time and features, such as detailing how the personal chef function would work. However, focusing on Persona 1 has proven to be a more effective approach given the shorter timeframe for development.
Wireframe for Persona 1
The presentation desk :
Presentation Desk @ Design Proposition Presentation
Week 7 -
Clarifying Focus and Repositioning
After the presentation, I realised I felt uncertain about the app's positioning and focus moving forward. Feedback from the panel highlighted that the app might currently target too broad an audience, with some features seeming less relevant or misaligned with the core objectives.
As thinking the feedbacks wasn't relevant to my case; I decided to apply a strategic approach by developing a Business Canvas Model as recommended by the panel. This helped me reassess the app's core goals, focusing on which features provide unique value and determining the primary audience :
Business Canvas Model
After working on the Business Canvas Model, I felt even more uncertain since the key features mentioned by the panel seemed to overlap with my main propositions. Feeling like I was going in circles, I decided to take a step back and focus on the logo design to clear my mind.
Although the panel suggested that "Bite" or "Byte" might be too similar to Village Grocer's Bites Shop, I’m still drawn to the “B” concept, which I feel perfectly captures my brand’s identity and vision. So, I’ve decided to explore options like "BytEats" or "Byteats" for the name :
Logo Design Ideation / Byteats or BytEats
Week 8 - 9
Refinement and Solidification, Wireframe and Art Direction Development
In light of the recent name change for the application, it still retains a sense of the original "byte" or "bites". To differentiate the app and establish a unique brand presence in the market, I was encouraged to explore alternative names.
Potential Name & Description
#Name Ideation :
- Entree : Inspired by the term for the main course in a meal, this name positions your app as the main solution for meal planning and preparation.
- Eveats : Eve symbolises the beginning and renewal, and together with eats, it means a new, refreshed eating experience.
- Entreats : A creative play on words, blending "entreat" (to request earnestly) and "eats."
- E’ats : A modern and playful twist on "eats," this name combines familiarity with innovation.
// This time, i prefer Eveats more than the others as it means for "new eating experience" which having the same personality of my application brand goes.
While brainstorming potential names, I received feedback indicating that the application encompasses an overwhelming number of features. To address this, I was advised to create a prioritised feature list categorising them as must-have, should-have, and nice-to-have :
Feature Priority List
In addition to addressing naming and feature complexities, I focused of the week is on developing wireframes and structuring an effective UI design that aligns with my ideation. The design process details are attached below :
Wireframe Development
Week 10
Logo & Mascot Design, Wireframe Development
After receiving approval from Mr. Mike for the name "Eveats," I moved forward with designing the logo. My initial visual concept revolves around integrating lines into the design so i decided to work around the boundaries to create something luxury, modern and technology :
Logo Design Progression
In short, the creation centers around a bowl and the letter "E," incorporating these elements with the distinctive "Eveats" typography.
Next, I tackled the mascot design. I found this aspect quite challenging, as I struggled to develop a character that felt right for the brand. However, to achieve a welcoming and friendly tone, I was determined to create one :
Mascot Design Exploration
The mascot design focuses on a circular shape, incorporating various elements to create a cohesive look. The idea is to use outlines for the sub-parts while keeping the round body intact, ensuring differentiation. The mascot will have the versatility to don different costumes—like a carrot, broccoli, or onion—while maintaining its circular identity.
Aside of the development above, this week, I also made some progress on the wireframe, specifically enhancing the recipe detail page by adding a timer feature. This allows users to control the timer directly within the app, eliminating the need for external apps. I also worked on refining the grocery flow for a more complete experience and began developing layouts for the message page and profile page.
Wireframe Development
Week 11
Logo Refinement, Mascot Development, Voice Integrated On-boarding Exploration
This week has primarily focused on the logo refinement and mascot development stages. After receiving valuable feedback, I set out to enhance the logo, particularly the "Galaxy Sparkle," to ensure it resonates well in a galaxy-sized market. One key adjustment involved enlarging the size for better visibility. Additionally, a comment pointed out that the current logo, with its lines and corporate-style typography, seems to mix friendly and corporate vibes, leading to a somewhat confusing brand identity. Mr. Mike suggested that I choose one of these concepts to pursue.
This presented a challenge for me, as I had envisioned a comprehensive design approach incorporating lines. However, I recognised that insisting on this element might complicate the overall brand message. Since "Eveats" aims to embody a luxury AI concept rather than a friendly tone, I realised I need to let go of the more casual elements to create a cohesive identity in order to align the logo with the brand’s vision while ensuring clarity and sophistication.
Logo Development [Fill Vs. Non-Fill]
// Yeah.. give up the lines T.T
As I continued to struggle with creating the mascot for "Eveats," I sought advice to look at how luxury brands in the market have approached their mascot designs. Through my exploration, I found inspiration in how the brand "Headspace" developed their mascot using a circular form. This design choice not only created a friendly and approachable character but also maintained a sophisticated aesthetic.
Drawing from this reference, I decided to adopt a similar circular concept for "Eveats." This approach allows for versatility while still emphasising a solid brand identity. I started drafting various mascot ideas, focusing on how the circular shape can be infused with elements that represent the brand’s mission—health, nourishment, and a touch of luxury. By combining these inspirations, I aim to develop a mascot that resonates with users while reinforcing the elegant nature of the brand.
After making progress on the logo and mascot, I shifted my focus to a more comfortable area: enhancing the app's AI capabilities. It was suggested that incorporating a voice-integrated onboarding page could elevate the user experience and truly embody the app's AI essence. However, I was advised to set aside any concerns about user comfort during this journey and to fully explore how to make this functionality a reality.
Unfortunately, I found that this feature is not widely available in the market, and there were few references online to guide me—ChatGPT couldn’t provide the detailed insights I needed for building a voice-integrated UI. To gather ideas, I downloaded various apps and experimented with their interfaces, while also consulting a peer majoring in Artificial Intelligence. Interestingly, he found that integrating voice at the onboarding stage might not be efficient, as user preferences vary greatly. Despite this feedback, I remained determined to explore the concept, and came out 2 different ideas :
Voice- Integrated On-boarding Exploration
Drawing inspiration from ChatGPT and the AirAsia chatbot, I considered a chatbot-style onboarding experience. This could facilitate interaction while allowing users to navigate the setup process more intuitively. By focusing on a conversational approach, I aim to create an engaging and innovative onboarding experience that aligns with our luxury AI vision.
Week 12
Logo & Mascot Refinement
Mascot & Logo Development
This week has been primarily centred around refining the logo and mascot, and it’s been quite stressful for me. The design process feels like a constant back-and-forth, and I’m struggling to find the best way to express my vision for both the mascot and the logomark. Despite my efforts, I haven’t yet captured the essence I’m aiming for, which has been a source of frustration. I’m committed to pushing through this creative block, but it’s challenging to translate my ideas into graphic pieces that truly resonate with the brand’s identity. 😭😭
Week 13
Wireframe / "Mid"-Fidelity Finalisation & User Testing
Although Mr. Mike noted that the graphics progression has led to a design that feels friendlier and more aligned with the brand personality, I still don’t believe it’s the final version I should pursue.
Setting the graphics aside, I realised I needed to focus on completing all the app screens this week and conducting user testing to ensure I am on track. I found myself spending long days in front of my laptop, from morning to night, working to finalise each screen that needs to be produced. It’s been a whirlwind of activity, but I’m determined to make significant progress and ensure that every element is polished and ready for user feedback.
"Mid"-Fidelity Prototype
After finalising the screens, I shifted my focus to reaching out to potential users for testing. The goal was to gather feedback on whether "Eveats" meets their expectations and needs. I organised sessions to observe how users interact with the app, noting their experiences and any pain points they encountered to ensure that the app not only looks good but also functions effectively and resonates with its target audience. The testing questions and result were documented under the docs below :
"Mid"-Fidelity User Testing Compilation
To sum up from the user testing, Eveats has a strong foundation with its AI-driven features, particularly price comparison and chef matching. Addressing the shopping list issues and refining the UI/UX are crucial for improving user satisfaction. Exploring opportunities like hardware integration and enhanced onboarding could further differentiate Eveats and solidify its position as an innovative food platform. The consistent praise for the core features suggests that with these improvements, Eveats has the potential to be very successful.
// When heard my friend (user) say this have a sense of Grab, i felt happy but bit sad - cuz the initial ideation is to create something like Grab but not their design feel. However, when heard all of my friends (user) say that the concept was very interesting and they really feel the presence of AI (one say no cuz AI cannot do this kinda of design XD HAHAHA). And, one say can i should sell my concept to one of the gym company and i was very happy and pleased! :D
Week 14 - 16
Final Development and Refinement
Over the past few weeks, I've been deeply immersed in the final stages of my FYP, focusing on various tasks to ensure everything aligns with the promises I made during my proposal. While exploring concepts like motion graphics is intriguing, I recognized the importance of concentrating on what I can realistically accomplish and accepting that I can't perfect everything on my own.
The main focuses during this period have included:
- Refining All Screens
- Completing Screens and Flows
- Font Size Check
- Develop a Microsite and Social Media Layout
- Finalise Logo and Mascot Design
- Conducting Final User Testing
- Merchandise
- Preparing the Final Presentation Deck
#Screens
As I aimed to move away from the Grab design aesthetic, striving for a unique AI-luxurious style that truly represents "Eveats", i spent quite sometimes in developing the full prototypes that meet my expectations. Keep the words to be short, all the screens had been compiled under the pdf below :
Screen
#Microsite
The microsite development surprisingly wrapped up in just one day! I’m thrilled with this speed, which I attribute to the training I received during my internship—big thanks to my intern company for that!
I started by drafting a wireframe and outlining the structure I wanted to pursue :
Rough Sketch
After sketching out my ideas and brainstorming the concepts, I jumped straight into developing the final outcome in Figma. The result exceeded my expectations, and I’m truly appreciative of how it turned out (in a short time)! :>
Microsite Screen / PDF - Check Prototype under next section!
#Logo Design
Even in the final week, I'm still tweaking the logo design. It feels like a design journey where I initially rejected certain elements, only to bring them back in the end.
Logo Refinement Process
To give the logo a more luxurious feel, I decided to refine the edge design across the entire logo, aiming for a modern, grid-based look. It's now much clearer that the logo feels more luxurious after these adjustments.
Infinity's Logo Vs. Eveats' Logo
Honestly, as I refined all the corner edges, I found myself a bit speechless because the final design is reminiscent of the approach I initially rejected that i had did for my own healthy diet business — wanting something unique — but now, it feels like I've come full circle. It's almost as if I returned to where I started. And, i only noticed after all the stuff being finalised. But, overall, it means that the best representation of the brand is the "bowl" and this is the design process :<
#Mascot Design
Mascot Design Outcome
Meet Evebot, your AI assistant designed to revolutionise the way you approach eats. After thoughtful development, I'm thrilled to introduce this final version, which seamlessly integrates with the brand identity.
The sparkle atop Evebot directly reflects the brand's core values, symbolizing intelligence and smart functionality. It’s a subtle yet impactful detail that reinforces Evebot’s capability to deliver innovative and efficient solutions. Evebot’s minimalist facial design, featuring simple eyes and a soft smile, exudes a friendly and approachable personality. By avoiding exaggerated features, the design strikes the perfect balance between charm and professionalism.
The overall character embodies a playful yet slightly robotic aesthetic, ensuring Evebot feels both smart and relatable. This harmonious blend of personality and functionality makes Evebot an ideal companion for enhancing your food journey.
#Social Media
The ideation for the social media creation focused on developing layouts that convey an integrated sense of AI. I did some market research on how AI applications in the market promote themselves on social media, discovering that many utilize real images paired with text to create an "AI" aesthetic.
Social Media Layout
Using the established colour schemes as a foundation, I designed a set of 12-grid layout templates that cover the pre-launch, launch, and promotional stages. Each layout is crafted to highlight key features and the unique selling points of "Eveats", ensuring a cohesive look that resonates with the brand identity.
#Merchandise
Given the time limitations, I prioritised the app and other marketing collaterals over extensive merchandise development. However, I decided to focus on two key items that I believe would be highly beneficial for the brand, especially considering the grocery integration and chef matching functions : Box and Tape.
Sticker Tape
The first item is a branded sticker tape, which can be used for packaging deliveries, enhancing the unboxing experience, and promoting brand recognition.
Delivery Box
The second item is a custom box designed for deliveries, which not only provides a practical solution but also showcases the brand’s identity effectively. These two pieces of merchandise will help reinforce the brand while being functional for users.
// EH, i know is hard to convince :< but i promise will add on more for my upcoming exhibition!
Final Submission
#Final Presentation Deck
Final Presentation Deck
#Application
Application Prototype
#Microsite
Microsite Prototype
#Logo & Branding Design
Branding Guide Compilation [Logo + Mascot]
#Compilation
Compilation
REFLECTION
Honestly, I’m not feeling super motivated to write this reflection since it’s the final one I’ll have to do (for my degree). But alright, let’s get it done to fulfil the module’s requirements :
Throughout the journey of my major project, everything seemed under control in the beginning, but I started losing my grip towards the later stages. At the start, I felt confident about the idea proposal and research since they revolved around UI/UX design, which I’m quite comfortable with. However, the challenge that kept holding me back throughout this journey was branding—especially the continuous development of the brand name, logo, and the mascot design.
For the brand name, it was a bit surprising (and frustrating!) that even ChatGPT couldn’t save me. I ended up brainstorming potential names by breaking down word meanings, like "Eveats" (Eve + Eats), using the Cambridge Dictionary as my guide. Who would’ve thought I’d need a dictionary to name a brand?
Moving on to the logo design, it seemed like an easy task initially, but my insistence on using line art as my key design element made it a lot more challenging. As someone who loves line art and minimalism, I wanted my FYP to reflect "Jacqueline’s style". However, to keep the project on track and reduce unnecessary stress, I had to let go of some of my rigid expectations. Honestly, it was tough to compromise, especially when elements like the sparkle, the bowl, and even gradients were added. Gradients, of all things! My peers were shocked: “Jacqueline is using gradients?!” Yes, even I couldn’t believe it, as my world is usually solid, not gradient!
The biggest challenge for me was the mascot design. It was stressful, inside and out. This was my first time creating a character for an application since, in previous assignments, this responsibility would typically fall on someone else. I admitted that my expectations were high, but I couldn’t design anything I was happy with until the day before the presentation. It was intense, to say the least! Character design is definitely not my strong suit, and I think I need to practice my drawing skills in the future when I have extra time (maybe?).
As for the UI/UX part, initially, I thought this project would be slightly less complicated compared to previous assignments, like the i3Cubes project, which involved multiple user flows (user, driver, admin, operator), or QuantoCube, which required handling everything from contractor quotations to final payments. Compared to those, Eveats seemed simpler in terms of development—but branding turned out to be the real struggle here. Thank goodness I didn’t propose something even more complex; Eveats was already enough to keep me on my toes as an individual project! 😭
Working solo was a very different experience compared to group projects. While group work often comes with the challenge of balancing responsibilities and emotions among teammates, working individually gave me the freedom to focus entirely on my vision for Eveats. I genuinely appreciated this opportunity to create a brand on my own, and I feel like Eveats has some parallels with Infinity, a brand I co-manage with a friend. In many ways, Eveats feels like the AI-driven counterpart of Infinity, wish i really proud of.
I’m incredibly proud of myself for this project—both in terms of UI/UX and branding. I gave my all to meet my own expectations and the project requirements. Hearing positive feedback from my peers and panels was the icing on the cake. Some even suggested I bring the brand to market! The panel’s comment about my spacing and alignment skills was particularly meaningful to me, as it affirmed that the foundations I’ve built over my three years of studying design—like the importance of spacing—have truly paid off.
If there’s one key lesson I’ve learned from this journey, it’s to recognise my limitations and accept that some projects are better suited for collaboration. (But not mean that Eveats should be a group project ❌ ). While working solo has its perks, teamwork allows for shared creativity and support. And with that, it’s a wrap! No more 6 a.m. work sessions for now. Here’s to new adventures ahead—CIAO! WISH ME LUCK _ 🥳
Comments
Post a Comment