Threewish
Threewish is a social innovation app that enables child-to-child sharing. I worked closely with the stakeholders who is from Bangladesh, to understand their project requirements and complete the work within two weeks.
RESPONSABILITY
Research
Information architecture
Wireframing to Prototyping
Design system
ROLE
UI/UX Designer
TOOL
Figma
Brief introduction
I collaborated with the client via Upwork; from the initial phase, I shared a Figma link that was continuously updated to keep the client informed of every progress step. This transparent approach ensured alignment throughout the design process and enabled quick feedback cycles.
Challenge
I have to take the client’s rough notes and turn them into a clear and well-organized information architecture.
I need to create the information architecture, high-fidelity wireframes, empty states, skeleton screens, visual mockups, and interactions.
Goals
Design process
I collaborated with the client via Upwork; from the initial phase, I shared a Figma link that was continuously updated to keep the client informed of every progress step. This transparent approach ensured alignment throughout the design process and enabled quick feedback cycles.
Initial brainstorming and information architecture
High fiedelity wireframe
Because the timeline was close, I decided to create a high fidelity wireframes that could later survey as the foundation for the visual mockup. Before starting, I build the core of the design system, documenting the typography and a greyscale color guide. To build the wireframe I followed the information architecture as my guide, otherwise I would have been working blindly.
Fullfill wish flow (wireframes)
Key design decision
Based on client feedback, I incorporated several key changes to modernize the interface and improve functionality:
Homepage Design
Instagram-style grid for user posts
Click to view details functionality
Delete and edit options for user content
Detailed cards
Detailed cards with comprehensive information
User photos and item images
Location details and category tags
Build up filtering
Quick filtering with tags (chips)
Category-based organization
Primary color selection process
My initial proposal was to use yellow as the main color, however, when I presented the idea using a layout wireframe as an example, the client felt it didn’t cover the mood he had in mind.
I then explained the role of functional colors (such as red for error) and suggested exploring alternatives primarily color. The client proposed considering blues and green, so I prepared a palette of options to help guide the decision.
Final choice: Tiffany
Together we selected Tiffany as the primary color. After finalising the color palette within the design system, I moved on to the next phases of the project.
Mockup, empthy state, skeleton and interaction
Given the two-week deadline, I duplicated the high fidelity wireframe in Figma to quickly build the visual mockup. Through the process, I took inspiration from well known social platforms including Instagram, Subito.it and Tinder, to speed up the design work.
I also added notes and comments directly in Figma, linking specific areas of the layout so the client could easily navigate and review the design.
Once the visual mockup was completed, I duplicated it again to create the base for empathy state and skeleton.
After the client approved the mockup, I moved on to the final phase: interaction design focusing on key user flow such as registration and adding a wish or donation.
Emphy state
Final deliverables
Reflections
Deadlines & Task: I learned to meet very tight deadlines by breaking the work into daily tasks to complete the entire design process within two weeks.
High quality results: I refined my ability to perfect project details even with limited time, while maintaining a high-quality final result.
Different feedback: I learned to interpret feedback from non-designers, converting their suggestions into effective design requirements.