DevConnect Presentation
This was my final project for my General Assembly course which was 10am-6pm Monday to Saturday (40hrs time limit)
User Research Goals
I wanted to base my research that would help people around my age who play video games. With the continuous growth and mainstream presence of video games, I thought this was a truly relevant Idea.
RedLine
I could have used resources and actual data to back up my argument for the creation of this app instead of creating something solely for my friends and me.
User Research Outline/Affinity Map
I asked questions that prompted the interviewees their thoughts about their connection and their perspective on the general connection between gamers and game developers. I took their answers and put them in an affinity map sorted by interviewee and by topics which were: I Want Participation Consistency, I Like Positive Connections, I Want to Be Heard, and I Want a Personal Connection. (I did introduce myself and the topic but did not put it on the chart, I told them My name and told them that we would be talking about the connection between game developers and gamers and wanted their experience. No wrong answers so do not be afraid to speak your mind)
RedLine
Questions at times were a little leading and could have been broken down further to make them more specific. Needed backup questions as everyone answered, "How do you connect with developers" with "I don't" and I had to retool my questions in the middle of the interview. However, their lack of answers in this case helped to solidify the fact that this is a service that is viable and useful to the public.
Would have loved to try and contact game developers to get their side of this conversation but class requirements could not permit me to do so.
User Persona
This user persona was the culmination of the 4 interviews that were conducted, and it showed similarities in their age and demographics. This was a good baseline when it comes to whom I am making this product for and what capabilities are at my disposal.
RedLine
Could have been more specific with my wording. I should have used a different template from Dirbble or a similar site instead of the template that was given to me. The wording could have been changed, for example, "needs and goals" could have been "motivations" and "frustrations" to "pain points".
HMW Statement/Problem Statement
The highlighted how might we statements were combined to create the problem statement that I was aiming to solve.
RedLine
Could have used more specific work and broken down each word and definition (like the term interacts, and I could have specified where the frustrations of players come from) to convey this project's goals and vision more clearly.
User Flow Outline + Map
For the Players who are using this app, I developed a simple user flow that will act as their first steps when opening the app. Whether they have already signed up or not.
RedLine
Add more design suggestions like making the screen more engaging with animation or making it more interactive with special commands.
The user flow chart was rushed and pretty sloppy, if I were to do it over I would make this much clearer and neater.
The chart only specifies signing in and not signing up which I would change.
Low Fidelity Wire Frame Sketches
These are the low-fidelity wireframe sketches I developed on paper before putting them into Figma.
The goal was to make a UI that would be simple to understand with some preexistent iconography but add enough of a differentiation to make it my own. As well as having similar features to other social media sites.
RedLine
Sloppy drawing but I could have put labels on the page just to remind myself what I was thinking at the time of creation but since it was an extremely fast turnaround, I was able to remember. but working on long-term projects I know that labels will help for sure.
User Testing Outline + Results
In the user flows I asked participants to do a quick test of the product to make sure there was no confusion in setting up an account and signing in.
In my pre-speech, I told them to please think aloud while doing the test, and that the people were not being tested, but rather, the product.
RedLine
Tasks were very simple and straightforward, not much room for detail but, I would have liked to explore more of the profile section and the following screen.
Style Guide
I chose my style guide based on my thoughts that gamers like fairly loud colors (based on most accessories for computers have some form of RGB lights) but at the same time, I didn't want the users to be blinded by color so I made them a pale blue and grape purple which passed the usability tests. (and for some reason always reminded me of wizards lol)
RedLine
I made the style guide before doing any of the Figma wireframes, so there was major indecision with what I wanted my buttons and components to look like. I ended up deciding on a black background w/ blue writing, but I should have gone back in and specified which I decided on somewhere on the guide.
Mid Fidelity Wire Frame
This is my Figma file for the mid-fidelity wire frame, where I added color and text from the style guide and blocked out places where there would be pictures & logos.
RedLine
Could have been cleaner and the text could have been too size. but I think that had something to do with me still figuring out Figma and its interface. I have most definitely learned from this experience and am much better for it.
Lots of hierarchical problems and overall adjustments needed to be made in all categories.
Final High Fidelity Wireframes
This is the final Wireframe for the DevConnect Project. I made a ton of changes starting with changing this from a mobile site into a phone app. Then I changed around Icons and the navigation to fit the new style.
Visual and Textual were exponentially improved and provided an easy course of viewing for the users.
Added a UI tutorial to increase learnability and future usability.
RedLine
I would have loved to have worked on a logo and or splash image as well as more screens but due to the time constraints, I decided to just do the sign-in and sign-up/onboarding pages. As for the "DevPost" page, I would like to find icons that can differentiate posts between bug fixes, updates, and announcements. Sizing could have been better (specifically with the navigation bar) but that will come with time and learning the standards. Overall, I am very satisfied and proud of my first major UX/UI project and look forward to completing more on my journey to becoming a UX/UI Designer!
