Portfolio Tags: Website Development

10-min Tutor

Challenges & Requirements

  • Perfecting the algorithm to match a student with the appropriate tutor in real-time (based on subject, topic, and level).
  • Integration of multiple features, eg. video call, screen share, and whiteboard on a small interface.
  • Making learning fun, simple and delightful for users Ensuring seamless payment and
  • subscription for users globally.
  • Data integration into the new platform Rating of tutors

 

Solution

The new solution empowers students to access affordable help from certified teachers instantly, live and 24/7. Booking a certified tutor is easy and takes only two easy steps.

First, students select a subject and level. Next, they just have to confirm and start the session. Students can use the video function in the app and show the question to the teachers. The app is integrated with an option for students to ‘favourite’ teachers so that they can connect to a specific teacher directly in the future.

We are proud to be working with Tueetor to bring affordable education to more students.

Stuck in schoolwork?

Connect with a tutor in less than 10 minutes.

Adopting the Agile methodology, we create screen designs and ship them for development. The MVP with video call feature was launched before other functionalities like chat and pen were added. Improving the app step by step with feedback.

Dynamic billing system. $10 per 10 minutes, extend the session as needed or purchase a subscription.

Warning We have recently received complaints that members of the public are targeted by some agents through WhatsApp who claim to be from Hipster Private Limited and using our UEN number of Hipster Private Limited to prove that they are legit Singapore companies... Read More

We have recently received complaints that members of the public are targeted by some agents through WhatsApp who claim to be from Hipster Private Limited and using our UEN number of Hipster Private Limited to prove that they are legit Singapore companies.

They also use a similar looking domain name, our logo, and address on the website to make it as similar & credible as possible.

We want to make it very clear that Our company doesn't appoint any agent/recruiter for this so call 'money earning by apps rating' or 'any Ponzi scheme' where you need to deposit any money to get jobs.

Our jobs are always posted on official company pages on social media such as Linkedin, Instagram, Facebook and WSG.

Close
Hipster Whatsapp

WSG

WSG Singapore

Deliverables

  • Mobile kiosks that allow jobseekers to apply for jobs via MyCareersFuture and conduct video call meetings with a Career Ambassador to receive job search tips and advice.
  • Live text chat feature between the Career Ambassador and jobseeker during the video call
  • Database management system

 

Design Considerations

The functionalities of the kiosk was designed with the older population and users with impaired senses in mind. It incorporates a voice-over guide in four languages – English, Chinese, Malay and Tamil– to cater to non-English speaking users. Additionally, visual interface elements are kept large for better readability and navigation. For instance, we used large-sized Emojis for users to better express their emotions during the rating.

Looking for career advice?

Check out WSG’s
mobile kiosks at
these Community
Centres (CCs).

 

Show, Don’t Tell

Design tools are crucial for us at Hipster. With these tools, we created prototypes that feel like the real experience quickly. User interface elements and interactions are defined. Prototyping takes the guesswork out for our clients and development team. It gives us the freedom to design, test and iterate – while running a speedy design process. Watch the video to see the final product of the app.

 
Workforce Singapore
wsg career

SomethingNew

Somethingnew

Greater efficiency & personalization

The new SomethingNew app takes mental health support to the next level by:

  • Avatar selection for personalization.
  • Notification settings allowing Practitioners to choose Do Not Disturb mode at specific days and hours of the week
  • Mental Health Directory with list and web view
  • Appointment and scheduling of calls
  • A dashboard that allows insights into commonly reported counselling topics

A usability study was conducted to ensure that participants could complete tasks successfully and efficiently.

 

mental health app

Promoting mental health awareness to businesses and consumers

A website is important for a business allowing one to showcase and generate awareness about one’s website. SomethingNew’s website is custom designed with the following goals:

  • Improved customer experience: with dedicated informational pages and contact forms for the business/consumer users
  • Use of website animation techniques and bright colours to create a perfect reading pace and a warmer, friendlier design.

NEAR

Near App Image

Participate in events and explore nature

The app features several events annually to encourage the public to explore and gain awareness of the green spaces around them. Elements of gamification, such as a leaderboard, earning points and badges, are built into the app to increase interactivity.

Near App Image

Explore PCNs and trails across Singapore

Information of attractions, services, facilities, heritage trees and trails are now at your finger tips. The app also allows you to navigate to a checkpoint, attraction or service provider.

Tbit

What is Team Build It?

As its name implies, the platform serves as a tool for organizers to create and run hybrid or digital treasure hunts in an intuitive or easy way. It can be used for, but is not limited to, team building, educational purposes and corporate engagement. The app has gone live since July 2021.

Team Build

Personal avatar & group photos

One of the first few steps that the user undergoes is forming teams, creating a personal avatar, and a group photo. To create an avatar, the user snaps a shot before choosing a face filter to apply. After that, the system combines individual avatar shots into a group photo.

Technically, implementing this feature was tricky as there was a need to align images utilizing multiple Augmented Reality (AR) trackers. The result is an advanced AR experience that combines numerous AR features simultaneously.

Personal avatar & group photos

Create challenges dynamically

One of the first few steps that the user undergoes is forming teams, creating a personal avatar, and a group photo. To create an Once the teams are formed, they can embark on a journey of adventure and fun! Challenge types include:

  • Timed challenges to increase competitiveness
  • Location-based tasks verified using GPS.
  • Submission of photos and videos taken by the team

Some of these challenges require an admin to confirm manually before letting the group proceeds to the next stage. Whereas in other challenges, the group can proceed automatically upon completion of a milestone.

Create challenges dynamically

Gone live but work continues

Gone live but work continues

At Hipster, we embrace different project management approaches. For T’bit, the team practised Agile – focusing on iterative development. By delivering features incrementally, we work with clients to get their products to market quickly. This ensures faster Return Of Investment (ROI) even when the software is in the development process. This tried and tested approach brings satisfaction to Hipster’s clients as we work alongside them to achieve their business goals.

Teorra

Teorra Dashboard
Sustainability geared buyer-seller marketplace platform

Buyers simply create an account, browse items, and connect with verified sustainability suppliers. Payment is done on the platform and is secure.

<

  • 1

    Platform

  • 20

    Countries

  • 1000+

    Sustainable Products

Unique features

  • Direct quote request between buyer and seller
  • Multi-currency support
  • Multiple payment gateway integration
  • E-commerce related features like product reviews, product comparison, promo codes and, sales support system
  • A synchronous communication dashboard between buyers and sellers
  • Shipping fees calculation mechanism for sellers to set the shipping fees
  • Comprehensive sellers’ dashboard
Teorra Unique feature

Teorra Sustainibility feautre

Sustainability related features

  • Suppliers are awarded with TEORRA’s personalized badges to help buyers easily identify whether a seller is genuinely sustainability-focused
  • Customers can track their environmental impact (as a result of their purchases) via a dashboard visualiser (coming soon)

Dashboard for suppliers

Suppliers can register online, upon vetting and approval, a supplier will be able to create a store, add products and reach customers. Through the self-help dashboard, Suppliers can get analytics on sales and connect with their buyers.

Teorra Dashboard Suppliers

CASE

Designing a website for multiple target audiences

Designing a website that caters to multiple target audiences can be a challenge, but it is definitely possible with careful planning and execution. In Hipster, we have created clear menus and navigation targeted at the business and consumer users.

Using simple language, CASE’s website hero image filters the users to the correct site for consumer/business

Teorra Dashboard image

Options to toggle between the consumer/business sites are always visible in the respective menu.

Teorra Dashboard image
Teorra Dashboard image
Teorra Dashboard image

Another key component, visual appeal

We incorporated graphics and multi-media into our website design to improve its visual appeal and create a positive first impression with friendly human portraits. Graphics also aid in creating visual hierarchies, enhancing user experience, and conveying complex information more effectively than text alone.

Case Triangle

Key Component

Case Rectangle
Case Semicircle

Fast and responsive design

Fast and responsive design

Hipster design mobile friendly website that adapts to different devices. One can easily navigate and read content without the need to zoom in or out or scroll horizontally.

Two websites, multiple administrators

We developed a user-friendly content management system for CASE, enabling non-technical administrators to easily add, delete, or update website content without any coding knowledge. This helps ensure that the content is always up to date.

Dashboard left screen
Dashboard right screen

Qaf Dictionary

Directionality of the Arabic script & UI

The Arabic script is written from right to left, which means that the first letter of a word is written on the right side of the page, and subsequent letters follow towards the left. The entire layout flows from top to bottom, right to left to match the reading behaviour and direction of the language. However, the dictionary app’s UI is kept left-to-rights to fit non-Arabic native speaker’s mental model.

Directionality of the Arabic script & UI

Use of Colors

Use of colors

Green is often associated with Islam and is extensively used in the Qaf Dictionary. It was the favorite color of Prophet Muhammad and is commonly used in Islamic art and architecture. It is also found in the flags of many Islamic countries, including Saudi Arabia, Pakistan, and Iran.

Make learning easier

The app includes transliteration (using a phonetic system to represent Arabic sounds using the Latin alphabet) and audio clips to help non-Arabic speakers learn Arabic pronunciation. Additionally, there is a search functionality for easy information retrieval, and visuals aid comprehension. Memory cards will be introduced in the future.

Make Easier Learning

Content Management System

A dictionary app CMS allowing admin to add words ensures content accuracy, diversity, and relevance to user needs. This enhances user experience and engagement, encouraging more frequent use of the app.

common_suit_dashboard

Some tips on designing for the Arabic customers

Aligning items in a list
Aligning items in a list

Aligning items in a list

Maintain consistent alignment for all text items in a list, including those displayed in a different script. This is important as we tend to read from top to bottom.

Text-alignment

Paragraph alignment
Paragraph alignment

Paragraph alignment

Align text based on language, not just interface. For example, English text in a right-to-left interface should remain in left-to-right format for optimal legibility.

Left to right

Left-to-Right (LTR)

Right to left

Right-to-left (RTL)

Flip controls

A “Flip controls” feature in an app allows easy switching between left-to-right and right-to-left layouts. This accommodates Arabic native speakers and non-native speakers, enhancing usability and flexibility.

No flipping required

No flipping required

Flipping required

Flipping required

Some icons do not need flipping

Symmetric or circular icons like a gear or magnifying glass do not need flipping or mirroring in Arabic interfaces. Directional icons or icons with text and numbers may require adjustments depending on their orientation.

Using font typefaces that supports Arabic

Using font typefaces that supports Arabic

To design digital interfaces with Arabic text, use fonts that support its unique features, like right-to-left directionality and complex letterforms. Fonts like Adobe Arabic, and SF Arabic ensure legibility and cultural appropriateness. Consider font size, spacing, and line height as well.

No numbers
More numbers

Numbers still go from Left-to-right

Arabic numerals are written from left to right like in Western languages, so they don’t need flipping or mirroring in Arabic interfaces. However, it’s important to ensure consistency in directionality and alignment when using numerals and Arabic script together.

Bettr Coffee

Pre- planning

Prioritizing pre-planning activities such as stakeholder meetings, user interviews, user flow diagrams, and UI design is crucial before starting any development work. By engaging in these activities, teams can gain a comprehensive understanding of the project’s requirements, goals, and constraints.

Bettr Coffee Wireframe
Bettr Coffee Workflow

Flexible coffee subscription

The new subscription plans allow customers to choose based on their consumption, preferences, and habits. With flexible ordering options, customers can enjoy a variety of drinks on different days and have fresh cups of coffee delivered straight to their doorsteps.

Cold drink
Shake
Cold Coffee

Bettr Mobile Dashboard

Providing a seamless experience for both customers and staff.
Bettr Outlet

Coffee at the outlets

Customers who prefer to pick up their coffee can do so at any of Bettr Group’s outlets by placing an order through the app. The outlet staff can easily manage the availability of products and store opening hours through the same app, providing a seamless experience for both customers and staff.

Dashboard image

Coffee as company treats [B2B ordering]

The new platform allows businesses to order fresh coffee and treats for their staff, boosting workplace happiness and productivity. Administrators can track employee spending through the dashboard, ensuring a smooth experience for all.


Bettr’s super admin dashboard

Our dashboard gives Bettr’s staff a bird’s-eye view of all their outlets, enabling them to manage the system with ease. With the ability to create new user roles, generate reports and monitor operations in real-time, staff can make informed decisions and ensure that all outlets are running smoothly.

Common Suits

Common suit personalize

Personalized fashion

The hallmark of a good rendering is photorealism. Today customers want to see and sense the product before purchasing. Apparel rendering allows the customer to make and see every change in real time, capturing all visual aspects of the garments. There are hundreds of 2D models and permutations allowing for visualisation in fabric, pocket style, collar style, sleeve style, buttons and more.

Improved online-to-offline retail experience

The Custom Suits website now provides a variety of products, prices, and customization options, along with order tracking for online customers. Those who prefer physical stores can easily schedule appointments after viewing the online catalog.

common_suit_dashboard

How technology will make fashion more sustainable

The fashion industry is notorious for emitting more greenhouse gases than aviation and shipping combined. As sustainability becomes a key concern for ecologically sensitive buyers, customised become more prized over mass-produced pieces. At the same time, retailers avoid overstocking, overproducing and having unsold supplies thrown away in landfills.

common_suit_technology

Other benefits of investing in tech
common-suit-curve
common-suit-mobile
common-suit-button1
common-suit-button2
common-suit-button3
common-suit-button4

Greater convenience as customers can either purchase online or book an in-store appointment

common-suit Map
common-suit Suit

Scalability and ability to reach global audience.

Notifications

Your measurement is successfully updated

Date : 15 Oct, 2023

Time : 09 : 45 AM

Your order is submitted.

Date : 13 Sep, 2022

Time : 12 : 45 PM

We are processing your order.

Date : 15 Jun, 2022

Time : 10 : 45 AM

Customers are kept informed about their orders at every step of the process.

Common-suit Benefits

Common suit Mobile

Key in preferences and buy!

Buy, and track the progress of your orders

Share App

share

Multiple integrations

The project started in midst of the pandemic and is aimed at restoring mental health and saving lives. Within the tight timeline, the team managed to complete multiple challenging technical integrations.

  1. Seamless video integration for virtual counselling sessions
  2. Smart payment integration with pay-per-use pricing models
  3. Integration of whiteboard and screen sharing tools
  4.  Scalable infrastructure to support business growth 
  5. Compatibility with smart devices via an app
  6. Smart matching between counsellors and users for a personalised experience.

App landing page

After building an app, companies often create landing pages to promote their app to prospective customers. Our team of experts can design a tailored landing page to drive conversions and boost your online presence. Contact us to learn more about how we can help you create a landing page that delivers results.

Tueetor

AAB girl image

An app that crashes hurts business

Nothing spells a bad user experience more than a mobile app crashing. In fact, in today’s competitive mobile app landscape, users have opportunities to switch product easily. Some might even avoid downloading an app if they read complaints about bugs before they actually try it. Needless to say, this breaks the business – lowering customer acquisition, retention and revenue.

Online platform for finding digital tutors

How then, to stop the crashing?

Hipster’s developers quickly realised that they had to rebuild the app in order to eradicate the problem. They then proceeded to:

  • Not displaying the full listing of tutors to a user at any one time. Rather, the technology optimizes the results based on one’s location and input. The user can then send messages to up to 10 tutors and trainers nearby.
  • After five months of hard work, our developers shifted to the then latest version of the PHP framework, Laravel, and improved the coding. They also successfully integrated user data from the old system in this process.

Improvements & outcome

Besides overhauling the app’s user interface design, Hipster also built a new website. The new design was well-received. The app even won the Certificate of Merit (Public Service Distinction) at the Asia Smart App Award in 2019. Tueetor has also successfully launched its services in three other countries – Malaysia, Thailand and Indonesia.

After the first successful partnership, we continued to work with Tueetor, developing a Coursesaver module, their website, and their second app, 10MT. Hipster is proud of Tueetor’s successes and happy to work together for the past five years. (to the next five years and more ahead)

Imavox

Interactive and clean ui

Instead of a fanciful design, we created a clean full-page slider with some titles and small paragraphs that directly show the website’s purpose. A trendy menu design expresses the beauty of the first interaction with the user.

event solutions company

Typeface and icons

Our UI experts thoughtfully select typefaces and graphic elements to align with the business’ style and tone of voice. For Imavox, we used the typeface family “Futura”, a geometric and crisp sans-serif typeface that is versatile in placements. The graphic style and iconography are also intentionally styled to the brand identity using the brands main colours in gradients.

event management software solution

Handling of backend by the website owner

The website’s content is managed through WordPress, a well-known content management system. The dashboard is customised to easily and independently add, edit, and delete posts, pages, and images. Users can also have different access rights based on their different roles throughout the company.

technical event solutions company

Ease with page builder

All dashboard sections have a placeholder to make finding, editing and publishing content seamless and straightforward. Simple. That’s it.

corporate software solutions

Highly secure

Our websites follow a high level of security. Multiple industry-standard tools are used to measure, verify, and ensure high-top security measures. Here are some tools to have a look at:

https://securityheaders.com/?q=imavox.ch&followRedirects=on

https://gf.dev/toolbox

https://sitecheck.sucuri.net/results/https/imavox.ch

Rocket speed

User experience statistics suggest that we lose our audiences and our business to slow websites. We ensured the basics were upheld to manage website speed, such as images, js, CSS, and code optimization. Verification checks were also completed with the help of industry-standard tools, ascertaining an excellent speed and optimization score.

Acceset Singapore

Mood lifting interface

Colours and illustrations are among the most powerful tools to set a mood, influence users’ emotions and draw attention to an interface. The website is playfully cartoonish and aimed at appealing to the younger audience. Our developers cleverly integrated the custom graphics into the website for front-end display.

mental health app development

L’Hommes

Custom Suits E-Commerce Platform

Custom tailored clothes online

From job interviews to weddings and black-tie events, there are plenty of special occasions when one needs a suit or shirt that fits perfectly. However, purchasing a tailored made clothing piece can be costly and time-taking. To offer a hassle-free tailoring experience at customers’ convenience, L’HOMMES took an innovative approach of providing an online tailoring service.

e commerce web solution

Design and measure

First, the customer selects the fabric and checks the design in real-time 3D modeling. Next, using a body measurement technology, L’HOMMES can measure the customer’s size in a minute. The customer can then edit specific measurements if required.

After details of the design and measurements are input, the following details can be presented in the 2D/3D format:

  • Shirt
  • Collar
  • Buttons
  • Sleeves
  • Pocket details
  • Shirt fit (Slim or Straight Cut)
  • Fabric material
custom ecommerce web design

4 Technologies & an ecosystem

Once an order is received, L’hommes sends the measurements to their tailors for customization.
An integrated backend system built by Hipster makes it easy to manage BOTH the production and selling process.

Furthermore, artificial intelligence, computer vision, deep learning, and 3D matching converge to make accurate body measurements possible.

Does the L’HOMMES website inspire you? Looking to elevate your brand’s e-commerce experience?

Hipster has a wealth of experience in implementing technologies relating to e-commerce of different products. Our consultant can recommend you the right technology solution that fits your specific business and budget requirements.