Create a Mobile Web App that acts as a social news aggregation and discussion website. Registered users can submit content to the site such as links, text posts, and images or a combination which can then be engaged with by other users through discussions via commenting.
Start with the basics.
For this challenge there was a tight timeline so I started with writing out all my notes and thoughts to better set myself up for rapid brainstorming, research and sketches. I knew that my main focus was to design and create a "home" but the real challenge was quickly figuring out the hierarchy and information architecture of the application. It's hard to design a single screen without understanding the entire landscape.
Please note that for this challenge I focused on the screen size of the iPhone X and Google Chrome as the web browser.
The basic Research
I started researching all existing social, chat and forum/discussion apps. I tested them all out via the native application and the mobile web app taking notes on functionality and flow. I then did some initial research with my chosen focus group and sent out a quick questionnaire gathering information on social and chat apps that they use daily. I defined a broad audience broken down by Generations and did initial research on their motivations and statistics on social app usage.
This research lead me to focus on apps such as Snapchat, Facebook, Instagram and LinkedIn. Key insights that help drive decisions during the design of the challenge were:
Baby boomers spend 27 hours per week online, which is two hours more per week than those who are between 16 and 34.
Baby Boomers are highly intelligent, and highly inquisitive. They read far more than their younger counterparts; seeking information and answers, and traverse multiple sources to get it.
Initial Personas and Motivations
Humans who will eventually use social and news apps and who will rely more on technology to get answers quickly.
Motivation: Use free time to skim through content without engaging in discussions or commenting.
The Tension Seeker
Motivation: Find hot topics/discussions to engage in and thrive off of the argumentative aspect of the comments.
The Knowledge Seeker
Motivation: Using the platform to post topics or questions that they are seeking valuable answers to from the online community.
Wireframes and Flow
I started wireframing two flows based on my Personas and Initial Research. The focus of the flows were to capture all the defined features based on assumptions and initial research and the user flow of:
As a user I want to read a Popular discussion that I found on the Home screen.
As a user I want to explore all discussions inside of a channel.
As a user I want to comment on a discussion.
As a user I want to reply to someone's comment.
Synthesizing and Feedback
After confirming that the intended flows worked I went and started iterations on the hi-fi screens to come back and test with the user group. A lot of decisions were determined by the initial interviews and feedback from the hi-fi iterations. You can see the breakdown for final decisions a little ways below.
I also did small a/b testing on typography. The final decision came to Roboto as the header and Tisa Pro as body. You can see examples below. These fonts were chosen based on their focus on accessibility and legibility. They both are commonly used and should continue to be updated as needed based on changing accessibility and user feedback.
After taking these back to the users the winner was a clear choice with minor feedback to help shape the final design. Below is a break down of all the features and functions of the home screen with an explanation for the decision of each one.
For the final design I have chosen to show the flow of a user landing on the homepage and tapping into a chosen discussion. I originally was going to show the second screen of "Channels" but based on main functionality desired for this challenge I chose to focus on the feature of Commenting/Replying and actions within a discussion.
However having the design of the additional screen did help unify the flow and help get a better picture of the overall navigation. All features that you see on screen have been discussed and confirmed with Development that's something that is possible for a Custom Mobile Web app (pwa). However with that said, I never said it was going to be cheap to build. ;P
There are still many things I would test and explore regarding all the functionality of the app. I tested most colors for AA compliance but given more time I would have created a vast color pallet to choose from for instances throughout the application among all the other wonderful possibilities.
Something I've learned. I think if I were creating this product, I would have gone a native app. After chatting with development I suppose it depends on features and browser releases it may be just as expensive to create a native app. I'm still up to debate about this. :)