Blissful Juice
Fictious Organic Fruit Juice Mobile Ordering App UI Design Project
overview
role
UI/UX designer 1 UI/UX designer 2: Myta Palo
time
Nov 03 - Dec 08, 2023 - 24 Hours
tools
Figma | Photoshop | Adobe Illustrator
skills
- Branding
- UI
- Graphic
goal
The goal of the “Blissful Juice” project was to create a visually appealing and user-friendly mobile app design for a fictitious fruit juice mobile ordering app, “Blissful Juice”. The project aimed to develop UI assets and a high-fidelity design mockup, allowing target users to easily customize their juice order. Additionally, it involved building branding identity components in Illustrator to showcase the fresh and fruity branding identity of “Blissful Juice”.
Introduction
The “Blissful juice” project was initialized with the goal of creating a user-centered and visually appealing design with UI elements for mobile settings. This project was completed by 2 group members as part of the Illustration for New Media course at BCIT.
Brainstorming
UI Assets
Mock-up
Brainstorming
The brainstorming phase was a collaborative process that allowed group members for this project togenerate and share as many as ideas before developing a concrete project proposal. We discussed the topic and target audience through research. The “Blissful Juice” project was driven by pain points identified in current competitive apps, which lack customizable UI interfaces and brand image from the research. The competitive apps like ‘Orange Julius’ and ‘Booster Juice’ presented several challenges:
- 1. Limited customization options.
- 2. Focus more on points or rewards for item orders rather than juice itself.
- 3. Invisible logos on some pages and plain graphics, providing limited information and too much white space.
To address these issues, we focused on :
- 1. Providing options for sweetness and ingredients, allowing customers to control the calories in their healthy drinks.
- 2. Incorporating our logo prominently to enable target users to identify our brand.
- 3. Using graphics to visually represent our products, complemented by simple text and explanation.
- 4. Placing text and graphics in an appropriate way, minimizing white space.
Through brainstorming, team members were encouraged to solve clearly defined design problems and generate new ideas.
Project Proposal
With a bold idea, we documented everything into the project proposal, which outlined the topic, target audience, roles, project timeline, competitive analysis, and design ideas. We included low-fidelity wireframes created in Figma. Based on our brainstorming phase, we focused on creating vibrant and user-friendly design that allows target users to customize their juice orders.
As a team, we both collaborated on all aspects of the project in brainstorming, research, designing UI elements. We assigned specific roles to concentrate on particular tasks. I specifically created graphics related to juice and fruits as well as UI assets. The assigned roles helped me to focus on my tasks within the timeline. We developed five main pages: ‘Splash Screen’, ’Home’, ’Product List’,‘Customization’, and ‘ Cart’ to demonstrate our design goals for providing user-centric customizable UI elements that help the target users complete their order smoothly. The project proposal outlined our design guidelines for the final product.
Logo & UI Assets Creation
A. Typography
a. Logo: Monsterific BB and Akaya Kanadaka Regular: These fonts were used for the logo to give it a unique and eye-catching appearance that reflects the fresh and vibrant identity of "Blissful Juice."
b. Header: Tahoma Bold: Chosen for its clarity and readability, making the headers stand out and ensuring easy navigation for users.
c. Body: Arial Black: Used for the body text to provide a clean and straightforward reading experience, enhancing overall readability and user engagement.
B. Logo Design
The logo created by another team member aimed to highlight our fresh juice branding image.
C. UI Elements
I designed key UI elements like the home and navigation bar, and created graphics for the search bar and juice items, all aligning with our visual theme. I applied Neumorphism to the 'Get Started' button, 'Home', 'Hamburger,' and 'Navigation' menus, giving them a soft, 3D appearance while maintaining a minimalist style. Using Adobe Illustrator's 'Appearance' tool, I designed elements in the same color as the background, with shadows and highlights adding depth. I also used the 'Mesh' tool to create vibrant, realistic fruit graphics, mastering color transitions despite initial challenges.
D. Color Palette
The chosen color palette; deep magenta, deep green, vibrant green, light yellow and warm orange, symbolized health, energy and freshness.
E. Assets Documentation
I also created a documented ‘Assets Lists’ to serve as a reference for the development team and potential clients, ensuring all elements align with our concept of delivering a predetermined theme.
F. Collaborative Project Work
Throughout the ongoing process, there was collaborative work between team members. Using theAdobe Cloud, we were able to share the ongoing Iullstration file and provide timely feedback. This approach helped us identify mistakes as they occurred, and minimize time needed for refining the design, ensuring that we adhered to our design goals and brand identity.
Final Mockup Design
The high-fidelity mockup was created using Adobe Illustrator, integrating all UI elements with minimized white space. Each juice graphic includes a ‘logo’ label, helping target users identify the ‘Blissful Juice’ brand. The buttons are appropriately sized for user-friendly interaction, ensuring the design appeals to the target users while clearly representing the “Blissful Juice” brand.
- (1) Splash Screen: Features the logo, and a “Get Started” button, creating a positive first impression of “Blissful Juice”.
- (2) Home: Includes UI elements related to products and organized in a well-structured hierarchy. The search bar is highlighted with fruit icons for better navigation.
- (3) Product List: Contains “Customize” buttons, and all buttons are aligned to maintain consistency.
- (4) Customization: Offers an easy-to-use controller for users to personalize their drinks.
- (5) Cart: Enables users to modify and remove their orders using each clear and review button. It allows them to review all orders without extensive scrolling.
Result from Project
The “Blissful Juice” project provided us with valuable hands-on experience in collaborative design. Unlike individual projects, this project required constant idea sharing and feedback to achieve our goal of creating a user-friendly design. We improved our communication and collaboration skills by regularly sharing updates and feedback, which enhanced the overall design. We also learned to plan and prioritize our tasks effectively to meet deadlines without lowering the quality of our work. The final product met our design goals, offering a visually appealing and easy-to-use interface that fits the "Blissful Juice" brand. This project taught us the importance of teamwork, good communication, and focusing on user needs in design, giving us practical experience for future projects..
CONNECT WITH ME
Let's make something great together!
Whether you have a project in mind or just want to chat about me and my design, free free to reach out.
I am always open to new opportunities and collaborations!