Design
After our research portion concluded, the next step to our project was to create a benchmark for what we wanted our design to look like and what requirements we were going to follow when creating iterations and mockups for our application.
​
We started to think about the functionality of the app, and thought of different scenarios that our user group could be in. We ended up creating storyboards for the different scenarios, which are shown below. These are just examples of what our user group could experience and how they could use our app.
​
Lastly, we drew out an Information Architecture (IA) which helped us map out the pages of our app and link pages together.
Design Requirements
Action, object, & context
-
Help users create their own accounts by their own email or phone number
-
Help users to find and subscribe the interesting online communities after their work time
-
Allow users to make their own comments/questions under those communities
-
Allow users to send friend requests and build a community
​
Data, functional, & context
-
Users could decide to show their personal information or not in their profile page
-
Users are able to upload the photo/video under the community comments
-
Users could update/cancel their friends/followers relationship in the contact page
​
Design Goals
1. Encourages social engagement outside of the work environment
2. Should connect users that share similar interests and hobbies
3. Social engagement between users and events is intuitive
Storyboards
After deciding our design goals, we began our storyboards. Storyboarding is a key component of designing and conveying a user experience. We create storyboards to represent our product’s function in a particular scenario. This scenario will provide us a perfect story of users with visual pictures to convey the users’ experience and help to build the prototype.
​
Each member of our team created two storyboards - one hand-drawn, and one photographed.
Information Architecture
After the storyboards, we developed an Information Architecture (IA). IA is a diagram of the modules and pages/screens in our application. IA diagram should include top-level components and sub-components to show pathways and hierarchy.
Through the IA, we were able to map out the different pages of our application and also figure out the different components we wanted to implement within our app. We decided on a map page, a profile page, a search page and a messaging page. There is a task bar for easy access as well, so the user can toggle between pages easily.