Shallet
Shallet aims to revolutionize digital financial management by combining a unique, user-friendly interface with joyful and engaging design elements.
Project Type
Product Design, Case study
Year
2023
Problem
In the contemporary app market, many digital wallet applications offer functional solutions but lack a distinct user experience and interface that is both enjoyable and intuitive.
Objective
The primary objective is to design a shared wallet app that stands out through its user interface, which should be original, joyful, and attractive while maintaining ease of use for all demographics.
Solution
The app will be designed with a unique and playful user interface, integrating vibrant colors, simple interactive elements, and funny graphics.
The app will feature simplified navigation with clear, iconic representations for different functionalities, making it accessible for users of all ages and tech-savviness.
Timeline
10
weeks
The app development followed an iterative process, steadily improving it along the way.
Discovery
2 weeks
Discovery
2 weeks
Definition
2 weeks
Design
4 weeks
Testing and delivery
2 weeks
Discovery
2 weeks
Discovery
Develop a shared wallet app, focusing on user-friendly design to enable easy, secure, and instant monetary transactions among users.
_Enhance user experience while being creative
_Build a scalable app
_Foster user engagement
_Maintain compliance and adaptability
Definition
The approach of utilizing User personas, along with the Jobs to be done method, has been employed to ensure the app's features address the common issues faced by most users, while maintaining an empathetic approach towards them, acknowledging the importance of an experience that is both emotionally fulfilling and practically effective.
Highlighting a segment of the app's user journey, this overview captures the sequence of interactions a user experiences while navigating the app. The user journey provides a comprehensive view from the user's standpoint, crucial for pinpointing areas of improvement.
A simplified information architecture that dictates how content and features are grouped, structured, and interconnected.
Showcasing a part of the app's user flow, illustrating the path a user takes during their initial steps through the app. The user flow aids in visualizing the complete experience from the user's perspective. It plays a key role in identifying potential friction points and ensures a smooth, logical progression through various functions and features.
Design
Crucial in the early stages of design, wireframes provide a clear blueprint of the page structure, layout, and functionality, without the distraction of detailed design elements like colors and graphics. Wireframes focus on what the screen does rather than how it looks, allowing designers, developers, and stakeholders to agree on the basic structure before moving into more complex design stages.
Set of guidelines, standards, and principles that guide the creation and maintenance of the product's design. It encompasses a variety of elements including colors, typography, iconography, illustrations, grids and UI components, all of which work together to ensure consistency and cohesiveness across the product.
1.0
Colors
Definition of primary, secondary, and complementary colors. It specifies how colors should be used for different elements like backgrounds, text, and buttons to ensure visual harmony and accessibility.
2.0
Typography
Typography focuses on readability and brand consistency. It includes guidelines on font sizes, weights, and spacing to ensure text readability across various devices and use cases.
3.0
Iconography
These icons cover common actions and items in the app. The style is consistent with the overall design language, aiming for simplicity and intuitiveness to aid user navigation.
4.0
Illustrations
Some of the illustrations used in the app. They are employed to enhance user engagement, convey a friendly and approachable look to the app. Illustrations will be used in onboarding screens, empty states, and as part of educational content.
5.0
Components & symbols
The most extensive section, it contains reusable UI elements like buttons, input fields, navigation bars, etc. Each component is documented with specifications for size, behavior, and interactivity.
A checklist breaks down the complex concept of accessibility into manageable, specific items. This allows designers and developers to methodically address each aspect of accessibility, such as visual, auditory, cognitive, and motor impairments. By providing a clear set of criteria, a checklist ensures that no critical element is overlooked during all the design process.
This step shapes how users interact with the end product, emphasizing usability, and overall user engagement, essential for a successful product experience.
Create yourself Shallet!
(only on desktop)
Follow the blue hints to complete the presentation, ensuring that all 3 friends are selected (Amelia, Jieun and Oliver)!
Testing
During the design process, after various features were designed, usability tests were conducted with different representative users. This was to ensure that the features met the intended objectives and that the app aligned with user experience standards. The testing was carried out either in person or via call, allowing users to be observed as they completed tasks set by the designer. To facilitate easy identification of areas for improvement in the app's experience, the designer maintained a detailed table.
After incorporating feedback into the design and development, A/B testing was conducted, focusing specifically on the most contentious issues. This testing was carried out using Crazy Egg.
Other work
Zenscape VR
Jello Café
