ArayaTime
A new community platform that brings together individuals who share a passion for sustainable living to connect, both virtually and in real life. This platform provides a space for everyone to actively participate in various activities, share their stories, engage in item exchanges and giveaways, and even offers a web board for discussions on topics of interest.
Deliverable:
Website
Service:
Design system, UXUI
Tool:
Figma
When:
Developed in 2022
objectives
Develop a website and mobile application for a sustainable community as a social media alternative
Introduce the community globally to attract new members
Encourage people from online community to get together - offline - to do giving back activities, built awareness and be example good does it do of living sustainably and support each other
Features: activity log, content posting, item exchange/giveaway/search, web board, and loyalty program
CONTRIBUTIONS
[Project Management]
Coordinated project meetings, recording key insights and sharing requirements with the development team.
Maintained a work log to track milestones and ensure timely progress.
Facilitated cross-team collaboration to address challenges and streamline workflows.
Enhanced the user journey by integrating feedback for continuous improvement.
Work Process
I divided this project into 2 distinct phases, as each required me to take on different roles. Let’s dive in!
Phase 1
Ideation
Define the problems
Foster a collaborative environment
Conduct brainstorming sessions
Encourage diverse thinking
Evaluate and refine ideas
Requirements
Able to create and share contents
Event or activity log (On-site)
Exchange / Giveaway / Seek Things using the platform - therefore, there's personal information telephone number, address and delivery fees.
Loyalty program or rewards for members connecting with using category tags
Web board / community
Levels of privacy information
Profile member under different tiers
User Journey
After handed over requirements to software agency and got back the user journey from agency, it was needed to be more accurate and details so we jumped into meetings multiple times to be able to pan out our actual requirements and needs into a new user journey
User Flow
The wireframes were created to align the team’s vision and ensure everyone was on the same page. They also served as a blueprint for confirming requirements before handing off the project to the software agency for development.
Brand Identity
Our brand designer provided a beautiful design system and guidelines, which were shared with the agency as a foundation. The team also contributed website references to guide visual direction and tone.
UAT (User Acceptance Testing)
• Reviewed checklists to ensure coverage of all requirements.
• Conducted usability tests to validate design decisions and refine functionality.
Soft Launch
Due to time constraints, the team focused on core features; posting content, activity logs, and exchanging items while hiding or refining unfinished features for later updates.
Phase 2
Challenges
Unfriendly UI – Improved usability and navigation.
Inconsistent Design – Standardized elements for visual cohesion.
Technical Constraints – Balanced design needs with development limitations.
Contributions
UX/UI Design – Refined layouts, redesigned cards, and finalized UI for main feature pages.
Wireframes & Iterations – Created drafts, tested options, and delivered final designs.
Semi-System Design – Developed reusable patterns for consistency and convey the brand identity.
Research & Collaboration
Held multiple rounds of meetings with teams and stakeholders to gather requirements and align expectations.
Focused designs for mobile and tablet users, while ensuring desktop compatibility for content creators.
Created different looks for landing pages tailored for both visitors and members to encourage interaction.
Design Process
Information Architecture Mapping – Reviewed and restructured layouts to improve navigation and readability.
Wireframing and Iterations – Developed and tested multiple drafts to refine layouts under tight timelines, balancing needs and implementation feasibility.
Final Design Delivery – Presented a design system and guided visual styles for further implementations.
FEATURES
My purpose of creating High-fidelity wireframe was to have a better communication with the rest of my team so we were all on the same page so we can confirm with our own requirements to hand over to the software agency to continue the work with the workflow and design direction.
Homepage
Activity logs
Posting content
Exchanging items
Semi-System Design
Updated
We are currently on Phase 3, developing key features on website and on development of mobile application as well. I am now mostly doing QA both functionality and UI details - keep on improving UX and UI, test, meeting with the team and software agency side, then REPEAT.
Mobile application is on 3.1 Version at the moment and will be continuing to improve the product.
KEY TAKEAWAYS
Adaptability was essential in a startup-like environment with fluid roles and cross-functional teamwork.
Effective communication and stepping up as a right-hand to the project manager enhanced project management skills.
Active listening helped uncover team and stakeholders's needs and shape design solutions.
Staying user-focused ensured alignment with brand identity and project goals.
Embracing constraints sparked creativity and innovation throughout the design process.