Designing an app through prototyping & wireframing
Overview
Through a UX Design class from General Assembly, I designed a mobile app using all the skills, techniques and topics I learnt during the 10-week class.
Challenge
The challenge that I wanted to find a solution to was reducing the amount of worrying, anxiety and stress job seekers face while looking for jobs. Through UX research, my solution was to create an app designed to allow job seekers to communicate job-related queries with each other while using incentives that help with their job search.
What
User Experience Design, Summer 2016
Taught at General Assembly, Chicago
10 weeks, 140 hours total
UX Tools Used
Justinmind
Justinmind Prototyper
Balsamiq
Approach: User Research
With the problem that I suspected, I created through user interviews, I researched competitors, built two user personas and developed the main user's goals.
Persona 1 & 2
User Goals
Users want to reduce stress and worrying while looking for a job
Users want to communicate with others to find their career path
Users want to convert the stress upon them to positive thinking
Users want to be motivated while job searching
How Might We get peers to boldly ask questions about job search?
How Might We get other peers to honestly answer questions?
How Might We offer help to job seekers that is affordable?
Card Sorting (To design information architecture)
To figure out how to categorize information on an app, I used a technique called Card Sorting. This helped to create a site map for my app. I chose 4 users to help me out with it. I asked them to think of different categories they've seen on an app and to write them down on Post-It notes. This helped to reveal how they mentally classify the cards, and also what terms they use for the categories. After the users were done, I looked for:
1. Patterns around how participants classify information.
2. Unexpected groupings that can inform how the information architecture of my app should look like.
Feature Priortization: MoSCoW Method
To find out which features on my app would be more important than the others, I needed to prioritize my features. I used the MoSCoW method which stand for the Must have, Should have, Could have and Will have features. First, I wrote out all the necessary features based on the user goals. Then I categorized them based on if I must, should, could or will have the specific app feature. This helped me to start sketching out app screens that fit all the required features but leaving room for new ones in the future.
Features all listed out that might be on the app prototype
Features all classified based on their needs for the app prototype
Sketching (Preliminary & Revised)
I love sketching. So much more on paper than on a computer. First I sketched out a couple of screens with the basic features. I realized that I missed out on sketching out an app screen that would help users get job help. I re-sketched them to add a screen named 'Prize Options' that could be accessed through the 'Scoreboard' page where users can see the amount of points they've earned so far.
Preliminary Sketches
Revised Sketches
Outcomes
Low Fidelity Wireframes (using Balsamiq)
Since this was my first ever time with UX tools, I wanted to experiment and use more than one for this project. I used Balsamiq, a super fun wireframing tool to transform my paper sketches into app screens. Even though I mentioned my love for paper sketching, Balsamiq felt friendly in terms of its design and I was comfortable using it in just a few minutes!
Main Page
Scoreboard Page
Sign Up Page
Prize Options Page
Login Page
Home Page
Ask the Question Page
Answer the Question Page
High Fidelity Wireframes (using Justinmind Prototyper)
I wanted a platform to not only design my app but also test it. I used another platform, Justinmind which also has a prototyping tool with it. I created a logo to go with my app name: JobSeek. When I thought of my app's personality, I wanted it to portray a calming venue to accept all kinds of questions from job seekers. This was why I used the color blue for the app. I wanted to use other yet similar colors to reflect the same soothing feel hence the purple and green shades.
