top of page

PAPER WIREFRAMES

Paper Wireframes
Screen Shot 2019-12-09 at 4.22.43 PM.png
Screen Shot 2019-12-09 at 4.21.12 PM.png
Screen Shot 2019-12-09 at 6.33.09 PM.png
Screen Shot 2019-12-09 at 6.34.30 PM.png
Screen Shot 2019-12-09 at 6.33.24 PM.png
Screen Shot 2019-12-09 at 6.33.51 PM.png
Screen Shot 2019-12-09 at 6.33.59 PM.png
Screen Shot 2019-12-09 at 4.11.30 PM.png
Screen Shot 2019-12-09 at 6.34.15 PM.png

PROTOTYPE

Screen Shot 2019-12-09 at 6.33.45 PM.png

User Research

Speedy Eights

Storyboards

Paper Protoype

High-Fi Mockups

Overview

Personas

Key User Actions

Site Map

Wireframes

We then created paper wireframes and uploaded them to Figma for critique upon what aspects could be improved before transforming them to digital wireframes. We utilized the information architecture to wireframe the most important screens and then slowly went down to wireframing the pages with lower priority. In this gallery view, you can see our paper wireframes for the landing page.

Wireframes

WIREFRAMES

We then constructed wireframes for the entire web application. These wireframes helped with visualizing the visual hierarchy and layout of each page without focusing on the details. Feedback from the per wireframes was taken into account when designing digital wireframes. . These wireframes served as a draft for our high-fidelity mock-up screens.

HIGH-FIDELITY MOCK UP

High-Fi Mockup

We then created high-fidelity mock-ups of key screens in our app. We performed competitive analyses again to help design these high-fidelity mockups in order to make them look visually appealing and follow design trends in the industry to make them appeal to the target users.

bottom of page