The online shop for auxiliary devices and services animals for seniors and people with disabilities
Primary target group: People with temporary or permanent physical disabilities
• They need tools or aids to compensate for their missing abilities and readjust their behaviors and routines
• Both sensory and movement aids after surgeries or accidents
• Everyday tools to simplify life
• Customized items for their individual purpose
Secondary target group: All relatives, family members, medical personnel, care attendants, etc.
• A mobile app that shows users the inventory of items to support their daily lives
• Especially elderly users AND users with visual or other impairments could use the app
• Very large font types and images are needed
• Voice control of the app must be implemented
• Users would use this application situative once they need these aids
• There are no other special temporal or seasonal times than ‘during day time’
• Disabilities often come with a lot of costs that are barely covered by health insurances
• To counteract this overproduction of goods and reuse existing resources before being demolished, people with lower incomes should have the opportunity to rebuy them
• Especially elderly and disabled people are often tricked or pushed into purchasing goods or services they don’t fully comprehend, want or require for their needs. Hence, transparency is a major aspect when designing this app
1.1 Guiding Principles
Transparency, competence and professionalism. We understand the market of health devices and services and see the abundance of production. Some monopolistic structures could be broken through with the idea of reusing components.
In a hectic world of constant movement, Helping Hand is not only a consultant and facilitator – We have an open ear as well and listen thoroughly to our users and their needs.
To counteract the overproduction of health-related goods, reuse existing resources and help people with lower income to purchase items they need.
Whenever you need a helping hand.
1.2 Optical identity
Strong coherence 1
Between logo and name:
The heart is always associated with positive emotions and medical care.
EYE FOR THE DETAIL
The brown hand is bigger, stronger and edgier – Should represent the hand of a caregiver. The black hand is rounder and slimmer – Should represent the target group.
In times of confused societies around genderism, these two hands are neither male nor female nor have any gender to avoid any discussions.
STRONG COHERENCE 2
Between logo and business idea:
The hands in the heart are technically not there and adapt well to light backgrounds (Excluded selection).
The heart is softly rounded without hard edges.
Did you recognize, that the black hand has only three fingers? While the thumb might be hidden under the brown hand due to its perspective, this is an indication of a disability and handicap to foster inclusion.
• All colors are monochromatic
• They have a serious and mature personality
• No funky or distracting signal colors
• Colors look great in combination – All color tests passed successfully
Vision yellows with age
‘Older eyes are less able to distinguish the difference between blues and greens. Avoid using a color palette that is predominately blue, green or another “cool” color. Warm colors like red and yellow are best!’ (Source)
• Simple icons, numbers are in extra large size, easy-to-understand data visualization
• Product images are clean and aesthetic with a white background
• Images should be shown in a realistic use case and as a problem solver
• NO complexity in data visualization needed
• NO reflections, shades or dark backgrounds
• NOT in unrealistic or heroic situations
1.5 Textual work
• Sans Serif
• Strong contrast between background
• Good legibility starts with text size
• Letter Spacing should help straighten out the reading experience
+ 5% Kerning
‘Older adults and people with low vision have less difficulty processing typefaces like Arial or Helvetica. Without the serifs, it’s easier to recognize characters. The thing you’ll hear the most from older adults, though, is to make the type larger.’ (Source)
2.1 Low wireframes – it starts with pen and pencil
Same as always
I have a certain process in mind and only sketch the most distinct ideas. From originally 6 hand-drawn outlines I ended up with more than three times as much. All the other ideas “develop themselves” along the way.
Low Wireframes are the start of every (good) project. I have my issues with pen and pencil because I don’t really like my analog outcomes. But for this project, it was very important to understand the informational architecture of a webshop for mobile devices and to follow the ‘less is more’ approach.
⬆ News feed is Home screen
After the register/login screen (left) a user should see a feed that adapts to the individual needs (right). The more information of the customer is known, the better additional services can be shaped for the medical conditions and product categories.
Multiple product views ⬇
You can see on the bottom two different search results (left and middle). I wanted to make sure, that users have the opportunity to select how many products they want to display horizontally at the same time.
2.2 Mid wireframes – Let’s digitalize ideas
Creating real shapes
Mobile screens are small and impaired eyes need help with cleaner and bigger shapes to be stronger perceived. Edgy shapes have a maximum radius of 12pt and all tapping elements should be bigger than usual and distant from each other.
Following the low wireframes, the mid wireframes give now a first impression on how to structure the final screens. The less text, the better. Images should be self-explaining and buttons easy to perceive and understand.
⬆ Never lose focus
To simplify information and avoid information overload, the screens only offer what is necessary. This might look minimalistic, but for overview pages, much space is the key. If the user taps on menus or interact with tap and hold, all other elements than the focus are blurred out (right screen).
Better legibility for reviews ⬇
Users are interested in what others review about products they need as well. The app should only include trusted reviews from verified customers. These reviews can be perceived in three different sizes to enlarge both into text and image.
2.3 High wireframes – Why adapted design matters
A smooth match
Both texts and images are adapted to the target group’s interests. They should be easy to read and impossible to misunderstand. The selected colors might calm the eyes and do not stress out a user during the interactions.
Now with the combination of the selected colors and the bigger elements to tap, a user can barely get lost within the application. The app bar on top of each screen appears after the registration/login and helps users to always understand where they currently are.
⬆ Mildly hues, artistic photos
This app wants to give an artistic glimpse of the products and services it offers. In contrast to many smiling and happy consumers in dubious brochures, photos should only indicate a product category and be either darkened or brightened to emphasize the text. Product photos should demonstrate a professional feeling.
Always give users the option to decide ⬇
Users should be able to always enter a product after searching for it. The button ‘put in cart’ will only be available on the product level. A helpful button for accessibility assists if users need additional help on this page to read out loud or zoom texts for better legibility.
2.4 Desktop version
- More white space, three columns
- Two fixed bars to facilitate website access
- 1st level: Contact information, shopping cart, language settings and user menu
- 2nd level: Main product categories
- Two verticle widgets on the sides which follow scrolling
- Left: Accessibility (a sub-menu with extensive functions to support impaired users)
- Right: Help Finder (a clickable survey to make users help with the right filters to know what they need)
3.1 Final mockups
Are you interested to test it on your device?
• Android large (360*800px)
• Works best on your computer
Get in contact
• Did you like this project?
• Do you have any questions?
• What would you do different?
• Can you relate to the ideas?
• Are you interest to find out more?
• Would you like to collaborate on a solution?
You can also leave a message in the comment section on the bottom of this page!