DREAMLAMP
The preschool of your dreams where you will learn everyday life lessons
UX Project - Dreamlamp App
DREAMLAMP
The preschool of your dreams where you will learn everyday life lessons
UX Project - Dreamlamp App
DREAMLAMP
The preschool of your dreams where you will learn everyday life lessons
UX Project - Dreamlamp App
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Adobe Illustrator
Responsibilities
User Research, Prototyping, Refining Design, Identify Missing Flows
Team
Me, 3 engineers and the stakeholder
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Adobe Illustrator
Responsibilities
User Research, Prototyping, Refining Design, Identify Missing Flows
Team
Me, 3 engineers and the stakeholder
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Adobe Illustrator
Responsibilities
User Research, Prototyping, Refining Design, Identify Missing Flows
Team
Me, 3 engineers and the stakeholder
Note
"Since this is a work project, I won't be able to provide all the details. However, I'll do my best to explain and illustrate my process, describing what I did, how I did it, and the finalized designs."
Note
"Since this is a work project, I won't be able to provide all the details. However, I'll do my best to explain and illustrate my process, describing what I did, how I did it, and the finalized designs."
Note
"Since this is a work project, I won't be able to provide all the details. However, I'll do my best to explain and illustrate my process, describing what I did, how I did it, and the finalized designs."
Overview
Dream Lamp was a children's learning app that focused on providing daily lessons in listening, reading, and learning content to support a child's growth. It was an awesome experience working on this project!
In this project, my main focus was to bridge the gap between the design and technical aspects of implementation. As a graphic designer, the stakeholder created fantastic designs. However, I was responsible for identifying any missing flows or gaps in the design and refining it to ensure it aligned with technical requirements.
Although everything seemed achievable at first glance, as an engineering team, we needed to consider layouts and the hierarchy of elements. It wasn't just about placing elements here and there; we needed a structured approach. That's where I came in and added value. I took the existing designs and in collaboration with the stakeholder and the engineering team provided structure, consistency, and layout to the overall design. I also focused on prototyping and detailing the interactions between elements, ensuring a smooth handoff to the engineering team that was both technically feasible and implementable to the fullest extent.
It was a fulfilling experience working on the project, and I'm proud of the results we achieved.
Solution
Ensure technically feasible and implementable designs for the app through strategic refinement and prototyping
Mobile & Tablet App
Create a design system (App + Tablet)
Create & Implement layouts
Refine designs
Responsive design
Identify & Design missing flows
Interaction Details
Prototyping
Overview
Dream Lamp was a children's learning app that focused on providing daily lessons in listening, reading, and learning content to support a child's growth. It was an awesome experience working on this project!
In this project, my main focus was to bridge the gap between the design and technical aspects of implementation. As a graphic designer, the stakeholder created fantastic designs. However, I was responsible for identifying any missing flows or gaps in the design and refining it to ensure it aligned with technical requirements.
Although everything seemed achievable at first glance, as an engineering team, we needed to consider layouts and the hierarchy of elements. It wasn't just about placing elements here and there; we needed a structured approach. That's where I came in and added value. I took the existing designs and in collaboration with the stakeholder and the engineering team provided structure, consistency, and layout to the overall design. I also focused on prototyping and detailing the interactions between elements, ensuring a smooth handoff to the engineering team that was both technically feasible and implementable to the fullest extent.
It was a fulfilling experience working on the project, and I'm proud of the results we achieved.
Solution
Ensure technically feasible and implementable designs for the app through strategic refinement and prototyping
Mobile & Tablet App
Create a design system (App + Tablet)
Create & Implement layouts
Refine designs
Responsive design
Identify & Design missing flows
Interaction Details
Prototyping
Overview
Dream Lamp was a children's learning app that focused on providing daily lessons in listening, reading, and learning content to support a child's growth. It was an awesome experience working on this project!
In this project, my main focus was to bridge the gap between the design and technical aspects of implementation. As a graphic designer, the stakeholder created fantastic designs. However, I was responsible for identifying any missing flows or gaps in the design and refining it to ensure it aligned with technical requirements.
Although everything seemed achievable at first glance, as an engineering team, we needed to consider layouts and the hierarchy of elements. It wasn't just about placing elements here and there; we needed a structured approach. That's where I came in and added value. I took the existing designs and in collaboration with the stakeholder and the engineering team provided structure, consistency, and layout to the overall design. I also focused on prototyping and detailing the interactions between elements, ensuring a smooth handoff to the engineering team that was both technically feasible and implementable to the fullest extent.
It was a fulfilling experience working on the project, and I'm proud of the results we achieved.
Solution
Ensure technically feasible and implementable designs for the app through strategic refinement and prototyping
Mobile & Tablet App
Create a design system (App + Tablet)
Create & Implement layouts
Refine designs
Responsive design
Identify & Design missing flows
Interaction Details
Prototyping
Design Process
While using a scrum system internally, I personally explored the double diamond process to enhance my work. I researched children's learning apps to grasp the existing landscape and its impact.
Then, I examined the designs, mapping out user flows and identifying any gaps. Moving the designs from Illustrator to Figma was crucial to gain more control and utilizing Figma's prototyping capabilities. I designed missing flows to complete the user journey.
Experimenting with layouts, I balanced elements without overwhelming the designs or exceeding technical limitations. With stakeholder feedback, we finalized layouts and refined designs. Adding interaction details, I ensured a seamless handoff to the engineering team for smooth development.
While using a scrum system internally, I personally explored the double diamond process to enhance my work. I researched children's learning apps to grasp the existing landscape and its impact.
Then, I examined the designs, mapping out user flows and identifying any gaps. Moving the designs from Illustrator to Figma was crucial to gain more control and utilizing Figma's prototyping capabilities. I designed missing flows to complete the user journey.
Experimenting with layouts, I balanced elements without overwhelming the designs or exceeding technical limitations. With stakeholder feedback, we finalized layouts and refined designs. Adding interaction details, I ensured a seamless handoff to the engineering team for smooth development.
1. Discover
2. Define
3. Design
4. Deliver
Discover
To begin the project, I sought to understand the purpose and significance of a children's learning app. I explored various learning apps to grasp their importance, how they aid users, and their overall value. This research allowed me to address any gaps and identify potential opportunities while working on our app. Interestingly, I found that our app had a unique feel compared to others, which was quite exciting!
For clarity and to guide the process, I created personas and empathy maps. However, my primary focus was on refining the designs. Therefore, I prioritized the designs in the project over the process itself.
Next, I delved into the existing designs provided by the stakeholder. I thoroughly examined the user flows associated with each design and mapped them accordingly. Based on this understanding, I created my own user flows, paying special attention to identifying any missing flows and ensuring a seamless user journey.
To begin the project, I sought to understand the purpose and significance of a children's learning app. I explored various learning apps to grasp their importance, how they aid users, and their overall value. This research allowed me to address any gaps and identify potential opportunities while working on our app. Interestingly, I found that our app had a unique feel compared to others, which was quite exciting!
For clarity and to guide the process, I created personas and empathy maps. However, my primary focus was on refining the designs. Therefore, I prioritized the designs in the project over the process itself.
Next, I delved into the existing designs provided by the stakeholder. I thoroughly examined the user flows associated with each design and mapped them accordingly. Based on this understanding, I created my own user flows, paying special attention to identifying any missing flows and ensuring a seamless user journey.
User Flows
Define
After mapping out the user flows and identifying the missing ones, I transferred the designs from Illustrator to Figma. Instead of simply exporting screens as a whole, I took the more efficient route of exploring and creating assets in Figma. This allowed us to leverage Figma's prototyping capabilities effectively.
To maintain consistency, and reusability, and streamline the collaboration with the engineering team, I established a design system. I gradually added components to the system, encompassing color codes, typography, and design elements for both the mobile and tablet versions.
My process involved exporting assets for each user flow, creating designs in Figma, and incorporating interactions and prototyping to visually test the app's functionality. I shared these designs with the team to gather quick feedback on design aspects, and technical constraints, and to brainstorm any potential improvements.
Once I had accumulated enough flows and received internal feedback, I presented the designs to the stakeholder. In most cases, our work aligned with the stakeholder's vision, with a few suggestions from our end regarding interaction details, limitations on input fields, and animations.
After mapping out the user flows and identifying the missing ones, I transferred the designs from Illustrator to Figma. Instead of simply exporting screens as a whole, I took the more efficient route of exploring and creating assets in Figma. This allowed us to leverage Figma's prototyping capabilities effectively.
To maintain consistency, and reusability, and streamline the collaboration with the engineering team, I established a design system. I gradually added components to the system, encompassing color codes, typography, and design elements for both the mobile and tablet versions.
My process involved exporting assets for each user flow, creating designs in Figma, and incorporating interactions and prototyping to visually test the app's functionality. I shared these designs with the team to gather quick feedback on design aspects, and technical constraints, and to brainstorm any potential improvements.
Once I had accumulated enough flows and received internal feedback, I presented the designs to the stakeholder. In most cases, our work aligned with the stakeholder's vision, with a few suggestions from our end regarding interaction details, limitations on input fields, and animations.
Design System
Prototyping
Design
After creating and prototyping all the user flows, I shifted my focus to the layout, a key challenge at hand. While I considered screens from both mobile and tablet versions, the tablet layout required more refinement and presentation due to the available space.
I began by experimenting with different layouts, aiming to position elements in a more organized and visually pleasing manner. Through careful repositioning and placement, I was able to discover a layout pattern that could start with mobile and expand seamlessly to the tablet.
The layout version I proceeded with involved a three-column layout for tablets and a single-column layout for mobile. In the mobile layout, the content resided in the center column, while in the tablet layout, the content occupied the center column with illustrations filling the left and right columns. This arrangement added visual depth and utilized the overall empty visual space effectively.
After creating and prototyping all the user flows, I shifted my focus to the layout, a key challenge at hand. While I considered screens from both mobile and tablet versions, the tablet layout required more refinement and presentation due to the available space.
I began by experimenting with different layouts, aiming to position elements in a more organized and visually pleasing manner. Through careful repositioning and placement, I was able to discover a layout pattern that could start with mobile and expand seamlessly to the tablet.
The layout version I proceeded with involved a three-column layout for tablets and a single-column layout for mobile. In the mobile layout, the content resided in the center column, while in the tablet layout, the content occupied the center column with illustrations filling the left and right columns. This arrangement added visual depth and utilized the overall empty visual space effectively.
Some possible variations of the layouts
Deliver
Once I completed the designs, I shared them with the internal team and gathered their feedback on both the design and technical aspects. I also presented the plans to the stakeholders to obtain their input and finalize the version. Based on the final feedback received, I made the necessary improvements to the layout. Subsequently, I handed the designs to the engineering team to advance the development process. I closely collaborated with the team to ensure that the business goals and stakeholder ideas aligned and that the interactions of various elements would function effectively in the actual app. I assisted the team in the overall design-driven development process.
Once I completed the designs, I shared them with the internal team and gathered their feedback on both the design and technical aspects. I also presented the plans to the stakeholders to obtain their input and finalize the version. Based on the final feedback received, I made the necessary improvements to the layout. Subsequently, I handed the designs to the engineering team to advance the development process. I closely collaborated with the team to ensure that the business goals and stakeholder ideas aligned and that the interactions of various elements would function effectively in the actual app. I assisted the team in the overall design-driven development process.
Learnings
Importance of considering engineering perspective in design
Understanding the limitations of technical feasibility and implementation
Advanced component design using Figma
Extensive use of auto layout for improved design efficiency
Enhancing Figma prototyping skills
Learning new interaction details and techniques
THE END
Thankyou 🙏🏻
I appreciate your time and attention, I hope you have liked the work and understood what I intended to do but still If you have any questions?
I appreciate your time and attention, I hope you have liked the work and understood what I intended to do but still If you have any questions?