Groupeton

PHASE TWO

Asking The Public

After having a clear understanding of what I wanted to accomplish , I then decided to create some mockups on how I wanted the application to look like . My main priority was optimizing the layout for mobile screens. This lead me to having big buttons and big text.

I took to reddit to ask an open ended question to see if others felt the same. This was the general response of the users :

Question : What feature do you think is missing from most cycling/biking apps? - View Reddit Post

PHASE THREE

The Problem Statements

After gaining a better understanding of some of the problems users had with popular biking applications. I then finalized my problem statement. The most prominent pain point is the fact that users are not able to expand their network and meet riders near their area. With that being said, I decided that I would focus my application on two things :

- Create a group ride which will let users get information on the location and time.

- Let users search for group rides that are taking place in a desired city.

PHASE FOUR

Persona

After having a better sense of the application, I then spent some time generating personas. The ideal user of this application is someone who is new to a given city and wants to ride bike with others.

PHASE FIVE

Flowchart

Then the flowchart was created in order to properly outline the flow of the application. I made sure to touch on every single pain point when creating the path. The main components of the app would be to create, view and search for local rides.

PHASE SIX

Moodbard

The moodboard emphasizes the styling of the application. I decided to go with these colors due to the fact that they each complimented one another.

PHASE SEVEN

LO-FI Wireframes

The low-fidelity wireframes helped me visualize the flowchart. The main focus of these wireframes were to give myself and my classmates the look and feel of this application.

PHASE EIGHT

Hi-Fi Wireframes

Based on the low-fidelity wireframes , I then created the set of high-fidelity wireframes. My main goal when creating these was to make each possible path intuitive and user friendly.

PHASE NINE

Validation Testing

After completing the high fidelity wireframes, I then asked some of my classmates if they could go over my work and add any additional comments. This phase was extremely beneficial for me as having other eyes on a project can really help in its success.

PHASE TEN

Final Version

After taking my classmates' feedback, I then went inside adobe Xd and made the necessary adjustments. I then took my mockups and imported them into InVison. That way, I could add interactive elements and give viewers the look and feel that I envisioned. Linked bellow is the fully functioning prototype.