Concept for rebranding, web design and app development
01 - OVERVIEW
Salumex is an app for present and future workers of healthcare in Mexico. It offers so far the best solution for searching and reading references and guidance that give some orientation for diagnosis. You can also lookup ingredients and possible side effects of each and every medicine on the market. By law these documents are the ones to be referred to, hence nurses, doctors and medical students use the database on a daily basis. It has 50k+ Downloads in Play Store. The client wanted to publish a new version of the app as well as of the website using the latest technology and updated content that is accessible on all devices online and offline. Also, to give a fresh, modern look to the product that radiates professionalism.
Timeliness: Oct 12, 2019 - Nov 30, 2019
02 - CHALLENGES IN THE PROJECT
The UX challenge
The existing version of the app was fairly simple. Even if it worked more efficiently than the governmental website, there was plenty to improve:
- optimize search function
- better clarity of content
- create a clearer navigation system
- new features were planned to be introduced.
Since the content of the app is elemental for its users, the new version is aiming to serve and support their work even better so that healthcare workers can give a better quality service and hopefully patients can heal sooner.
In terms of UI, the main challenge was to create a simple, clean, sophisticated interface that is modern, yet humanist, that radiates the brand identity. We could also say, to re-brand the product. A partial rebranding was necessary due to various reasons. The brand was quite dated. Since the launch of the first version no cohesive branding effort has been made yet and the old logo and look was not speaking to the audience.
03 - SOLUTION
We created a new version of the app and a responsive website; thus, the content is accessible from various devices even offline thanks to a download feature. The search experience has been improved with advanced filter options, a new layout, and a novel navigation system.
We had to think not only of the potential users but of the existing ones too (8000 on Android); this had a significant impact on the color palette, logo, and the name of the product.
04 - APPROACH
Understand the product, data structure, and the user
After the initial discussion with the client, I started to study the content structure.
Firstly, I learned that each and every document is different and unique, officially submitted in PDF format by the Mexican healthcare system, so we have no influence over the form. Although it would have been definitely appealing to transform all these and apply one style, due to the vast volume, technically it was not possible at that time.
Secondly, the content can be ordered into three big groups: GPC (Healthcare Guidelines), Norms, and CBM (drugs). The corresponding documents are categorized further into branches like ‘Tumors and neoplasms’, ‘Injuries and poisoning’, Nursing or Analgesics, Cardiology. One category may include 50+ results.
Users can be med students, nurses, or doctors with different specialties and levels of experience. They open the app to learn, to find confirmation of their ideas, or to find guidance in case of more complex, serious illnesses. Since I did not have the opportunity to facilitate research, I read the feedbacks in Play Store and tried to put myself in their shoes to understand their needs.
They want to find relevant documents as soon as possible. It is beneficial to be able to run more searches in various groups (guidelines, drugs, and norms) while preserving previous results. There may be documents that are frequently used and will be reopened from time to time. Because of the great importance of the content, it should be always available.
I created the following user personas:
-45 years old, mother of 4, lives in the suburb in Mexico City
-Has been working as a nurse in healthcare for 24 years, cannot imagine a change in her carrier
-The workload is high and wants to work with reliable tools
-Moderately conservative, trying to keep up with the news and technology
-28 years old, single, lives in Puebla in a cosy studio
-Fresh graduate doctor, doing his praxis at a hospital, highly motivated to improve fast.
-Looking for quick, efficient solutions
-Open-minded, eager to learn something new every day
Taking the above into consideration, I could already visualize a minimalistic interface that does not bother or distract the user during reading. Also, it was clear that the main function of the product, the search had to be optimized to be instant, moreover keywords and filters had to be improved. which is greatly a developer role. Furthermore, all categories had to be easily manageable, the results filterable.
By rebranding, search engine development, and restructuring of elements/information, the user experience will be enhanced which will be also reflected in the number of new subscribers.
In the wireframing phase, I had to make the decision whether to keep the existing hamburger menu or to remove it and use a tab bar instead. I chose the latter for fewer clicks, better perspicacity and for the parallel search option. I spent a bit of time exploring different solutions for indicating selected filter/category at the search results.
First wireframe sketches for mobile and desktop
Look & feel
After wireframing, I continued by setting the mood, selecting colors, and possible typefaces. The target users are of various ages and not tech-savvy, therefore any radical design idea would have led to dissatisfaction. I find it imperative to consider also the findings of color psychology since they have a substantial impact on perception.
As for typefaces, only free fonts were available due to budget constraints. In the decision-making process, practicality had priority. Since Salumex is a content-heavy website and application, high legibility, width, and thickness have great importance. For the body, I used the humanist sans-serif Lato regular and Montserrat (semi-)bold for headers.
05 - DEVELOPING DESIGN
With simplicity in mind, I decided to go with flat design and made some variations for mobile first.
Mobile version - home screen, filter, and subscription screen
I intended to create a modern yet pleasant mood, so I decided to give a twist to the classical blue and red combination that is so common in healthcare. I worked with big whitespaces using white as a background color in search so that the content can shine. Dark blue serves as a base color with a gradient (adding a lighter blue color - HEX#5D98F0 - with 0% opacity). Red has been replaced by a more vivid orangish-red that energizes a little bit the calm white-blue balance. Also, gentle cool greys have been introduced matching the whole mood.
Landing page and splash screen ideas
The client wanted to give a completely fresh look to the product, therefore he left it open whether to re-design the old logo or to create a new one. After a few-hours-long-sketching, I opted for a new version. Even though at first, I wanted to come up with an idea other than the conventional cross, in the end, I found an alternative direction that is in line with our vision and goals. Modern, sophisticated, and flat. Despite the fracture in the continuity of the shape, components keep together. Orange dots and rounded corners ease the strictness of the determined lines.
Final logo with blue and white background
Although we introduced a new logo, the name remained the same. We just loved as it was, and did not feel the necessity of any changes.
06 - MONETIZATION
Monetization is always a critical question. Should we ask for a payment? If yes, how much? We decided to make the product available for free use for a limited time - not based on opened documents. After five minutes spent on the app, a subscription window pops up highlighting the benefits.
07 - FINAL DESIGN
Salumex home page - Desktop view
Salumex app - iPad view
Salumex app - Mobile view
In this project, I learned a lot about the specification of this segment and gained some expertise in search optimization from tech perspective as well. I created many variations for the logo, the onboarding, and the interface, favoring the same principles and color palette. I think the biggest challenge for me was to organize my endless number of ideas and choose the best combination that works well on all devices. Nevertheless, when in doubt, I always asked myself: What nurse Maria or doctor Rafael would like? How would they interact with the product? At last but not least, how can I make it even better?