mck up responsive.png

Pilled is an app based product that helps people not forget about taking their medication.

We need to find out if the main user experience, adding medicines, updating appointments and scheduling is easy for users to complete.

Determine if the user is able to keep track of his medicine schedule

personas_Mesa de trabajo 1.png
personas-02.png

Pedro & Marina are the User Personas of this proyect. These helped me reflect on the research I had done for this project. Allowing me to get a deeper look into the users lifestyle, characteristics, goals and frustrations.

Sitemap.png

Considering the features needed for the app, a site map was created thinking of how a user would interact with the product. Above is an Information Architecture laying out the features and characteristics.

HPSCAN_20220714171907625_2022-07-14_172026886_edited.jpg
HPSCAN_20220714171907625_2022-07-14_172026886_edited.jpg
HPSCAN_20220714171907625_2022-07-14_172026886_edited.jpg
HPSCAN_20220714171907625_2022-07-14_172026886_edited.jpg

Now comes my favourite part, building the design. I first started with paper wireframes, which allowed me to diverge into severall different layout posibilities for the structure of the app. Above you can see some of the variations that I sketched out.

iPhone 8 Plus - 1.png
iPhone 8 Plus - 2.png
iPhone 8 Plus - 4.png
iPhone 8 Plus - 5.png

Digital wireframes where the best first step to transfer what was sketched on paper to a digital platform. With this level of fidelity, I could start testing a prototype that would help me with the flow of the app.

iPhone 8 Plus - 1.png
iPhone 8 Plus - 2.png
iPhone 8 Plus - 4.png
iPhone 8 Plus - 5.png

After wireframing was complete, I dived deep into the user interface, I created these high fidelity mockups of the final app taking into consideration the results and feedback from the usability study carried out with the low fidelity prototype. The improved design can be seen above.

A design guide was also created to be used as the pillars of the graphic design development. Clicking here, you will be directed to a separate page that focuses more on the brands identity.

Final step was to create a final prototype for a last round of testing to make sure that the prototype was functioning correctly. Bellow you can see a screen recording of the app prototype.

Responsiveness was also taken into account in this project, and the features where adapted to computer and tablet displays as you can see in the first image of this page.

My key takeaway is to make sure I have taken into consideration every part of the structure of the app before heading into building the design, as it is much harder to start over some designs that haven't been taken into consideration.

PILLED II

App & Responsive Web Design

Directed by AKAWALO ESTUDIO Produced by AKAWALO ESTUDIO 

Using Figma

Developed by

AKAWALO ESTUDIO

mockup 1.png
ezgif.com-gif-maker.gif