top of page
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Purple Dot.png
Red Dot.png

Evaluation Findings

To evaluate our paper prototype, we did three rounds of usability testing with people we had interviewed. We wanted to get feedback on our designs to know if our user group felt that our app could reduce some of the pain points associated with moving to a new country.

The main findings from our usability testing were:

  • In our prototype, the “my journey” screen showed a person walking up a mountain. However, our users felt that the mountain metaphor was very unclear.

  • Our users wanted more opportunity to personalize their profiles and control over who they were matched with

  • The app needed a simpler way to add an interest

Red Dot.png
Blue Dot.png
Purple Dot.png

Prototype

Paper Prototype

After we knew the page hierarchy of the app, we were ready to begin developing a low-fidelity paper prototype. We decided to create a paper prototype to get a clearer sense of our visual and design plans for each page of the app. We had each gone through separate rounds of interface design sketching and ideation, so we were able to compare and contrast our designs and develop a prototype that represented what we felt were the best of our combined ideas.

Our paper prototype focussed on three main tasks: adding a new interest to create a group and add a new event, adding a new reflection to a user’s journey, and viewing a past reflection. We felt that these were the most important functions of our app, so we intended for our paper prototype to help us evaluate and solve usability issues early.

Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png

Annotated Wireframes 

Using the feedback from the usability testing, we created annotated wireframes that outlined the application’s layout and visual design. This process helped us visualize what the final version of Belong would look like. We made several important design decisions, such as switching from a hamburger menu to a bottom bar and figuring out locations for add and back buttons. Our goal was to make the layout of each page as consistent as possible.

Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png
Red Dot.png
Blue Dot.png
Purple Dot.png

High-fidelity Mockup 

The final step of prototyping was to create high-fidelity mockups of our app. We wanted high-fidelity mockups in order to showcase the best screens of our app, convey a clean and joyous feel, and show what the final version of Belong would look like. The process of creating final mockups required a lot of discussion and feedback, but ultimately, we agreed on a layout and aesthetic for five screens.

Hi-Fidelity Mockups.png
48418348_646600589194856_209774291878045
48167227_124338898506936_300459052993033
bottom of page