Sqwell Web App
Role: UX/UI & Graphic Designer
Sqwell is an interactive web app designed to promote outdoor exploration through gamified features and user–friendly design. Collaborating with two teammates, I contributed to the design, development, and conceptualization of the platform. Key features include park search and filtering, detailed amenity information, and a personalized profile page to track user activity and engagement.
Sqwell Web App
Style Guide
Full Styleguide
The style guide for Sqwell was created to ensure consistency across the app’s design. It includes key elements such as the logo design, color palette, typography, layout guidelines, and iconography. This comprehensive guide helped maintain a cohesive visual identity, making the app more user-friendly and aesthetically appealing.
Colour Palette
Purple
Hex #D4B1CF
Orange
Hex #F7802B
Dark Green
Hex #3E655D
Black
Hex #1A1D1A
Bone
Hex #ECE2D0
Blue
Hex #74B4C6
Logo Design
Sqwell's logo incorporates our mascot, Sqwee, seamlessly into the company name, using a vibrant orange as the primary color to reflect our signature palette. This bold and energetic color enhances brand recognition and ties the design to our playful and approachable identity. The font Nunito, consistent with our body text, reinforces cohesion, while three-dimensional effects created with shadows and highlights add depth. Soft, rounded edges further contribute to the modern and friendly feel of the logo.
The original Sqwell logo underwent significant revisions after user feedback indicated that the initial color palette was unpleasant and evoked unintended associations. To address this, we refined the design and shifted to a vibrant orange, which better aligned with the brand's energetic and inviting identity. The updated logo was well–received, offering a more visually appealing and positive impression to users.
Original Logo vs Revised Version
User Testing
Our user testing process involved in person interviews and guided app walkthroughs to gather actionable feedback. These insights guided significant design changes, ensuring the app better met user expectations and provided a more intuitive experience.
Key Findings
- Badge Library Icon –
Users found the park library icon confusing, with mixed responses about its meaning. The recommendation was to add a label or redesign the icon for better clarity. - Logo Color –
The original logo color received negative feedback, as users associated it with unpleasant connotations. Changing the logo color to orange improved its appeal and better aligned with the brand’s identity.
Original Badge Library Icon vs Revised Version
