I’m currently enrolled as a student at General Assembly San Francisco, CA. We were assigned our first project where our goal was to create an idealistic mobile application that will solve one of our partner’s everyday life problem via user research, affinity charts, user flows, sketching, and interactive prototyping.
Three days. About four to five hours every day
Pen, pencil, COPIC grey markers, sketch pads, post-it notes, & iPhone camera
Researcher & Designer
My partner, Cindy, owns a small greeting card business in which she works with various shop owners across the Bay Area. Her business is doing very well as many shop owners buys her products and she’s been successful. However, running a store by herself turns out to be very stressful at times because with the phone calls and emails as the only way of communicating, she finds herself spending way too much time trying to contact her clients, dealing with late transactions, and just overall bad communication between both parties.
To create an mobile application in an ideal situation in which it solves Cindy’s problem of contacting her clients and making sure her clients pays her invoices on time. This application called “Connect” will be able to provide a professional real-time way for business owners to connect with their clients as well as provide a way for business owners to keep up with their invoices in making sure which are paid and which aren’t. This is spin-off of common text messaging applications in which it provides a space just for companies and their clients.
After meeting with my partner, we had to spend around 10 minutes talking about a brief summary of our everyday life, our daily routine, and mainly what makes us frustrated. I was able to learn about Cindy’s daily routine as well as gain insight about her small business as to what she sells, her roles, what small shop owners she deals with, and her frustrations with it. With some additional questioning, I was able to pinpoint one of her main problems with her business and was able to develop an idea on what mobile application should be made.
I used an affinity chart to define the major pain points I need to solve in this application.
I divided it into:
1. User Response Issues
2. Payment Problems
3. Possible Application Layout Solutions
During interviews, I asked her what tools or applications she uses to deal with communication and payments with her business. She told me she uses quickbooks to keep her invoices and resorts to G mail and calling as a means to communication.
My first initial idea was to create a mobile application that provided a way of communication. From previous knowledge, I know there are various instant messaging applications already made for the iPhone and Android platforms so I went to gather the main instant messaging applications available and what services they offer.
My conclusion from researching all these applications was that — they all provided a good way for instant messaging in addition with cute interactive emoticons. I wanted to find out what would make these applications different from the one I want to create and it hit me, these applications are too casual. In terms of professional messaging, people resort to emails, phones, and LinkedIn direct messaging (which is almost another type of email service). Also, from my research and analysis, I realized that people, even myself, are more inclined to check their text messages via any social media application versus their emails. As soon as a notification goes off for a text, it gets checked right away.
In addition to the communication problem, I wanted to fit in a way where Cindy can use one single application to keep track of her invoices rather than switching applications to do two different tasks. This is where my idea of fitting in a transaction keeper came up.
I brought up this idea to my partner and she agreed with me. People don’t like to check their emails because it’s draining to see number of work emails piled up on top of the spam. Due to the lack of being able to keep up with emails, important work emails may be lost in the crowd or it might take a long time to find and respond to certain emails. Because business owners need a reliable and efficient way to communicate with their clients as well as need a way to keep track of their transactions on which client has paid or hasn’t paid. Cindy’s initial reaction to this idea was overall positive.
STORY BOARDS, USER FLOWS, AND INITIAL SKETCHES:
Story Board: I began with a story board of how this application would solve Cindy’s problem and would make her life easier. I centered this storyboard around her but as well as tried to make it universal for all users.
So when I was thinking about my storyboard, I wanted to find a way that can summarize the problem and solution in a quick and concise way.
It starts out with the user, Cindy, being frustrated because none of her clients are responding to her promptly and she needs to get her invoices paid. Cindy downloads the “Connect” mobile application and asks her clients who want to work with her to download the application as well. Cindy and the client now have a professional, efficient, and new way of communicating things such as product updates, changes, alerts, and payments. Cindy also can keep track of her clients and transactions of whose paid and who hasn’t with the simple “complete” button. Cindy is now happy after downloading the application because it’s made her business communication so much more efficient and simpler.
User Flow & Sketching:
The way I spread out my thought process during this project was that I did the user flow and sketching simultaneously.
I went about this from the user point of view while using the application. I used rectangles to represent different pages or choices and I used diamonds to represent the options the user makes (yes/no).
Iterations: I went through several sketches because the design of the user flow was quite confusing for me before I got to my final user flow diagram.
Before I went into implementing the user flow into the application. My first thought process was to just sketch out the six major screens the mobile application would have.
I jotted notes on which button described which action, I labeled the major titles, and I tried to create a universal scheme.
I had many iterations for this process, lots of sketching and lots of erasing. I think I depleted my pencil’s eraser by half at this point.
ITERATIONS. These two pictures represent one of the various iterations I had to made. I tried to be creative and design a cute way to go from the “instant messaging” page back to the “dashboard” as well as have a option to go directly to the “transaction” page.
USER TRIAL: I had to change this because during my user testing, two outcomes came out. The first tester knew what each button meant and didn’t have a preference on the layout. However, the second user became confused on what the right button was. I drew it as a “home” button but one of my testers interpreted it as a “house” button which didn’t make sense to him. This was when I knew I had to change it.
So with a “ahah!” moment, I decided to just make this more universal and make the layout look like the typical instant messaging application. Being fancy didn’t really work out for me there.
User Trial: I ran this through a second time with the same second user and he liked the overall layout better and the “back” arrow was clear of what t was.
This is the front page of the mobile application with the user login screen, along with the “sign up” and “lost password” option on bottom left and right. I tried to model this as close to a typical user login screen as much as I can.
After logging in with your account, the application takes you to the dashboard screen where the user can take two paths: transaction page noted by the $ sign and the instant messaging page noted by the chat box sign.
The user’s basic information is also listed where the user can freely edit information as needed.
Clicking the chat box will direct the user into the instant messaging page where the names are all listed in a list format.
This portion is very self-explanatory. The main feature for this is for business owners and their clients to communicate, update each other, and send pictures and invoices.
Clicking on the $ option will lead the user into the transaction page.
When the user is completed with a transaction and want to mark it as “completed”, they can tap on the name and the circle will turn from blank to green. Green means completed. The right side of the screen shows a input feature where business owners can record their transactions.
When I showed my partner this application, she really liked the idea and liked how easy it was to navigate. Key words were: clear, neat, and easy — which is what I wanted to portray in this mobile application design.
If this was a real mobile application that could be made, I want to research more on how to make this more eye-catching and competitive. How can I change it in a way that it stands out from other texting competitors besides the transaction page? I also want to expand the usability test to more people to see if this application is universally understood.
When I was first assigned to this project, I realized that it took me awhile to understand what I had to do. I need to understand user research better so I can conduct better research that will be able to give me more information on the pain points I had to solve.
Another thing is my sketching and presentation. I need to find better ways to present my project. I need to work on my voice and public speaking. Sketching-wise, I liked how my sketch process was but I need to learn to differentiate when to be creative and when to be simplistic.
Overall, I liked this project and it was a way for me to experiment with how I dealt with research and implement a design in a short period of time.