Shagaf
Shagaf is a forward-thinking project designed to empower young adults by providing them with a curated selection of courses aimed at enhancing their studies and lifestyle. In a world where education and personal growth are more critical than ever, Shagaf sought to create an app that would serve as a reliable resource for self-improvement, offering content that is both accessible and engaging
Our role in the Shagaf project was to develop a brand identity and design a user-centric UI/UX for the app. The challenge was to create a visual experience that was minimalistic yet modern, reflecting the app's educational focus while also appealing to a young, dynamic audience. This case study delves into the processes behind the branding and UI/UX design, illustrating how a cohesive and thoughtfully crafted design can elevate an app's presence and effectiveness.
Shagaf's mission was to develop an app that offers young adults courses to enhance their studies and lifestyle. The challenge was to create a minimalistic and modern brand identity that would resonate with the target audience while clearly reflecting Shagaf’s educational and lifestyle-oriented values.
The branding process began with a comprehensive understanding of Shagaf's mission, vision, and target audience. Shagaf's primary goal was to create a platform that would serve as a valuable resource for young adults, helping them improve their studies and lifestyle through carefully curated courses. To achieve this, it was crucial to deeply understand the needs, preferences, and behaviors of the target audience—primarily young adults who are digitally savvy, value self-improvement, and seek tools that can seamlessly integrate into their busy lives.Through extensive research, including market analysis and user persona development, I identified key insights about the audience's expectations and the competitive landscape. This understanding shaped the foundation of the branding strategy, ensuring that the brand would resonate with users on both an emotional and practical level.
With a clear understanding of Shagaf’s goals and audience, the next step was to translate these insights into a visual identity that would capture the essence of learning and self-improvement. The aim was to create a brand that was simple yet impactful, conveying a sense of growth, empowerment, and accessibility.To achieve this, I engaged in brainstorming sessions and visual explorations, experimenting with different concepts that balanced modern aesthetics with approachability. The focus was on developing a brand that would be both visually appealing and meaningful, representing Shagaf's commitment to providing valuable educational resources. Various design elements, such as typography, color schemes, and iconography, were explored to ensure they aligned with the brand’s core values. The final concepts were carefully refined to create a cohesive visual identity that not only looked modern and minimalistic but also embodied the spirit of continuous learning and self-improvement that Shagaf stands for.
The logo design was a pivotal element of Shagaf’s branding. The goal was to create a symbol that was both minimalistic and representative of growth and learning. We began by sketching various ideas, focusing on clean lines and simple shapes that could embody the brand’s values. After several iterations and refinements, the final logo was selected for its simplicity and versatility, making it easily recognizable across different platforms.
The color scheme was designed to reflect the modern and minimalistic approach of Shagaf. I selected a palette that was both vibrant and calming, using muted tones with a touch of brightness to convey energy and enthusiasm for learning. The colors were carefully chosen to ensure they worked harmoniously across both branding and UI/UX design, creating a cohesive visual experience.
Typography played a crucial role in establishing Shagaf's brand identity. The challenge was to select a typeface that would complement the minimalistic and modern aesthetic while conveying a sense of professionalism and approachability. Given that the primary audience consists of young adults, the typography needed to be clean, legible, and visually appealing.
The final logo, along with its variations for different use cases (e.g., app icon, print materials, social media).
A well-defined color palette, including primary and secondary colors, with guidelines on how to use them effectively.
A comprehensive set of guidelines detailing the selected fonts, including usage rules, size recommendations, and pairing options.
Shagaf aimed to address a significant gap in the market for young adults seeking to improve their studies and lifestyle through accessible and effective courses. The challenge was to create a mobile application that not only offered high-quality educational content but also provided a user experience that was engaging, intuitive, and aligned with the busy lives of its target audience.The problem was twofold: How to design a user interface that would capture the essence of learning and self-betterment while ensuring the app was easy to use and visually appealing to a tech-savvy, young audience. This required a thoughtful approach to both branding and UI/UX design, ensuring that Shagaf stood out in a competitive landscape and delivered real value to its users.
To create an app that truly meets users' needs, we adopted the design thinking process—a user-centric approach that prioritizes understanding users at every stage of development. This iterative process fosters empathy, creativity, and collaboration, ensuring that the final product is both functional and deeply resonant with its audience.For Shagaf, design thinking was key. With a focus on helping young adults improve their studies and lifestyle, we needed a solution that was intuitive, engaging, and tailored to their preferences. By following this process, we were able to empathize with users, define their core challenges, and deliver a UI/UX design that is both innovative and effective, ensuring a seamless and enjoyable experience.
Understanding the needs and challenges of young adults was the first step in the UI/UX design process. I conducted user research, including interviews and surveys, to gather insights into their study habits, lifestyle preferences, and what they look for in an educational app.
Interviews was conducted with potential users, and users who are using similar products or services to get a grasp of their pain points and understand their needs. Themes in respondents’ feedback were identified and used to extract insights. The insights were then used to create personas that resembles the users and their needs. Users details kept confidential.
An online survey was conducted to reach a broader audience in shorter time and with lower cost. The insights derived from the survey are providing valuable source of information that will help direct the design process.
An online survey was conducted to reach a broader audience in shorter time and with lower cost. The insights derived from the survey are providing valuable source of information that will help direct the design process.
Based on the research findings, I defined the key problems that the app needed to solve. These included making the content easily accessible, ensuring a smooth user experience, and creating a design that was both engaging and intuitive for the target audience.
After doing conducting the research, we created an affinity map, which is a collection of insights from users. Creating an affinity map helps to organize and analyze the data from the research, uncover patterns, and drive insights
The information I got from online surveys and interviews gives me an idea of the target users in the form of user personas. This is to know that this Product (CoffeeHouz) can match the user’s background, attitude, motivation, goals, and emotions. I created this to represent my real target users.
Empathy maps for the two personas, highlighting their thoughts, feelings, needs, and pain points.
A user journey map is a visual representation of the customer experience. We have created the user journey maps for the two personas to help me look at the product from the user's point of view.
With the problem clearly defined, I began brainstorming and sketching potential solutions. The focus was on simplicity and user-friendliness, with a clean interface that would allow users to navigate the app effortlessly. Various wireframes and prototypes were created to explore different layouts and interactions.
HMW statements can serve as valuable starting points for brainstorming and ideation sessions to address specific challenges and opportunities within the Shagaf app project.
After knowing what to do next, we created a user flow to make the flow easier before sketching and wire-framing. We create user flow logins, sign-ups, placing orders, making payment, and modify profile details.
Based on the user flows and the insights gathered during the research, the information architecture (IA) was constructed as follows.
The final design phase involved translating the ideas into a functional and visually appealing UI. I maintained the minimalistic and modern aesthetic established in the branding, ensuring consistency across all elements. The design was optimized for usability, with intuitive navigation, clear typography, and a harmonious color scheme that matched the branding.
To clarify the structure of every page that has been decided I turned it into a digital wireframe before turning it into a mockup (hi-fi).
The style guide contains components that can be used repeatedly when designing digital products, such as logos, color styles, typography, visual assets, icons, buttons, and others. The goal is made in order to speed up the design process and make sure that the product is scalable.
The Sign-Up screen is designed for quick access, with straightforward fields for name, mobile number, and email. The minimalistic layout ensures a smooth and easy start for new users.
The Home screen is the central hub for users, offering a space to share thoughts with the community, view the latest tweets, access courses and tests, and stay updated with notifications. Its organized layout ensures users can easily engage with content and connect with the community.
The Profile page displays personal information and subscription details, with clear CTAs to manage both. Designed for easy navigation, it allows users to quickly update their information and adjust subscription preferences.
Contact us page gives the user the ability to reach out to Shagaf’s team for any questions or inquiries. We added the ability to upload pictures as well in case if the user needs to show something to the support team.
The test result page shows the outcome of the test for the user in a visual representation. It also features a CTA for an explanation of the outcome result.
By You page shows users the input from themselves as well as other active users on the platform. This page also features the ability to add and view reviews of the app, ratings to courses and tests, tweets by users.
Live stream page features a title of the stream, the name of the instructor, how many users are watching, the name of a user that has microphone on (Instructor can enable mic for users on request basis)
The Course Content page showcases all course materials, including videos and attachments, along with a progress bar that adds a gamified element to enhance the learning experience. The organized layout allows users to easily track their progress and stay engaged as they move through the content.
All tests page shows all the available tests on the platform, an expansion and addition of more tests is expected so the page is created with that in mind.
CoffeHouz was done to enable coffeshops to partecipate in today’s online shopping culture. our main focus while developing this project was to give the user a unique experience to compensate for the usual coffeeshop expericence. this was achieved by using creative UI/UX techniques
StudyFans project was a unique, challenging project since the objectives compared to the timeframe available were very tight, but it proved to us that acheiving anything is possible with correct, proof based planning! our main focus was to break in a totally new market for the company by creating Ad campaigns and social media content
Let's Discover the true potential of your business!
