Pharmaceutical web app

Roles: Project management, information design, wireframing, design system, UX, final UI visual design for the employee app of a pharmaceutical company. Developed at Errea Comunicación. 

Main tools: Illustrator, Photoshop, Figma, Jira, EndNote, Excel, WordPress, InDesign.


Design process
  1. Understanding. Client’s/user’s needs, design challenge, users, features. Current product walkthroughs, interviews with stakeholders, competitive analysis.

  2. Structure, create workflows and wireframes.

  3. Iteration, quick testing. Agreement on the structure and content. 

  4. UX prototype, UI design in Figma (mobile, desktop). Informal testing.

  5. Final UI, design system, icons and assets, general look and feel.

  6. Programming (developers working in progressive sprints). Iterative UX/UI checking and revision.

  7. Publication of the app. Period of internal kickoff and correction of errors and improvements. Final training, instructions guide and handover to the client.

The challenge

The challenge was to transform a 20 year old Lotus-based intranet into a new intranet and employee app, containing features as news, selling of products, employees ads, voting of non profit projects, mobile and desktop profile-targeted notifications, etc. 

During the first phase of the project there was an acquaintance with the existing UI and functionalities, an understanding of the technical requirements, and a deep dive into the needs and requirements the company wanted (stakeholders, users). Also, I did a competitive analysis of similar products and apps.

Wireframes

I developed the user flows and wireframes for the different user scenarios and tasks.
Samples of wireframes and user flows for the different sections and funcionalities.

Workflows / Processes

Some of the processes were complex and involved several stakeholders so I had to talk to several people to understand them. This diagram showcases the shopping process of products made by the employees of the company. There is a database with all the products available for them. The App reads the products from the database, the user chooses them, there is a logic for each category of product (amount a single person can buy every 30 days), then a confirmation email is sent, after a few days the user picks up the purchase, etc.
Several departments, people and technical processes were involved in this shopping process so understanding their intricacies was key.

AB testing

AB testing and informal user testing and walkthroughs were made to test specific functionalities of the app.

Design System

Sample of some of the UI components.
A final design system with colors, widgets and components was developed to be handed to the developers.
Their existing brand was something that needed to be reinforced and followed in the new UI.
The client asked for a clean and simple UI design.

icons
Final Screens
Some key features
teaming

Employer matching / donation

Workers can propose a set of NGO or associations and vote for them. A few of them are selected and receive funding collected by the employees. 

Employers product shopping

Employees can directly buy products from the intranet and app.

Bulleting board

A bulleting board to allow employees post their own messages and sell items.

Final Screens – Web/intranet version

Product shopping area

Dashboard / Home

Bulleting board for employees

Sequenced timeline to present NGO projects and vote for them

Uploading a new product to the bulletin board

News section

Manual with instructions

Development of the user manual with WP instructions.
Training sessions for the content editors.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google