Find the right medicine to relieve your symptoms despite the language barrier.
SAMA is an individual, one-term project that I completed at Emily Carr University of Art + Design. We were challenged to create a product in response to the theme of low bandwidth. So I created SAMA, an app that aims to help international travellers find similar medicine in other countries to relieve their symptoms despite the language barrier.
Overview
003
Problem
“4/5 travellers admitted that it was frustrating that they were unable to find the same, exact medicine and/or brand in foreign countries.”
Outcome
A similar Medicine App needs to effectively generate options for the users and describe precisely how it will cure in the description.
Acknowledging our persona's poor symptoms, Sama want to make it quick and straight forward!
Different countries has different medicine, Sama helps you to know what to expect!
Typing and searching? Let's speed up the process of searching your medicine!
We asked you once and Sama got you covered in the future!
Seeting Expectations
005
What this project is and what to expect
My goal with this project was to practice my visual design, interaction design and prototyping skills while also learning to manage my own product. I conducted user research and a usability testing session.
01
Managing project
I learned how to be the manager of my own project through setting timelines and milestones. I learn how to manage my project even though I got stuck.
02
Creating Design System
As a product manager and designer, I focused on building a design system and a design language for this project.
03
Producing High-Fidelity Mockups
While exploring through out the process, I focused on delivering high visual polish with consistency and accessibility.
How can we help international travellers find similar medicine in other countries so that they can relieve their symptoms despite the language barriers?
Uncovering Issues
006
Understanding the meaning of Low-Bandwith.
Understanding how Low-Bandwith is interpreted through my surroundings, I conducted a survey/interview and responded them through 100 sketches and 37 interviews. I then narrowed it down by translating them into key-words from the responses that I collected.
Ideation
007
Low fidelity sketches, ideas & flows
I used my 100 sketches to lead my brainstorming session, which resulted in a mind-map form of ten (10) ideas. Having varieties are essential in the ideation phase as I need to explore various option of the different possible solution.
Building Solutions
008
Knowing Our Persona
I depicted our Persona and stakeholders as genuine as possible by conducting user testing activities of different user groups. They walked us through their experience and responded to follow-up questions to pull out the goals, struggles, thoughts, and feelings of each Persona and stakeholder.
Mid-Fi Prototype
009
Medium fidelity designs & wireframes
After some initial sketches, I created mid-fi wireframes to build out interactions and flows to test with users. The following shows the mobile version of the application.
Co-Design Activity and Reframed Focus
010
Usability testing, findings & iterations
We discussed the design decisions to collaboratively design the application by listening to what they want to see, what features would be helpful, and how they react to the service.
Before: Home Page
It is not necessary to have a log-in for users as they prioritize to get the medicine as quick as possible.
After: Home Page
We designed a home page where it is simple and straight forward. Displaying all the possibilities of search.
Before
From the previous prototype, Sama has 3 main menu which are: home, wishlist, and profile.
After
Getting rid of the log-in means, we don't need to collect data rather generate algorithm while users search.
Before
Sama search page focus on the unfamiliar location.
After
We agreed to make more focus on unfamiliar medicine.
Branding
011
Building a brand identity kit
To support the rest of the design, I created a brand guideline kit. It contains tone of voice, logos, colors, type, iconography, imagery and product vision.
Logo
012
Creating a brand new logo set
To support the feeling of regality, tradition and intelligence with a hint of modernity of the new design language, I created a new logo. I added a full, partial and logo mark version for scalability.
Creating Consistency
013
Building a robust design system
I created a comprehensive design system that goes beyond what is used in the final design. This helped me understand the intricacies of design systems and build screens faster.
Final Outcome
014
Introducing Sama
Through multiple interviews, usability testing, and iterations, I came up with Sama, an easy way to relieve your symptoms while traveling. It is an effortless application that allows you to:
Final Wireframes
With everything laid out and ready to go, I moved on to the (arguably) most fun phase of the whole design process: designing the Hi-Fi prototypes. Still utilizing Figma, I began bringing our wireframes to life with wonderful design entities such as: colors, illustrations, content writing, etc.
Lesson Learned
015
Reflecting on the project outcomes
As a designer, we might struggle to develop our products, and I learned that listening to my potential users and including their voices throughout the process will help us create an inclusive design solution as you are working alongside the community you are designing for. Furthermore, I would love to develop a higher-fidelity mock-up showing accurate working prototypes.
Appreciation | Documentation
016
Special thanks!
Special thanks to all survey, interview, and usability testing participants who helped the Sama development process journey. All documentation published has been acknowledged by all parties involved.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
