Client: TBA - London, UK
Roles: User Interface, Information Architecture, Visual design & UX
Fields: Social network

 

problems

In the world where people spend most of their time on mobile devices, getting helps still seems hard. When a client approached me to address this, I was intrigued to jumped in.

Helping each other is very human thing. We provide and get help from families, friends or even strangers. We wanted to extend this to greater area. We wanted to make people easier to get helps and provide helps. 

I helped client brainstorm the key ideas, refine the concept, and reshaping the product. I designed the app workflow, wireframes and pixel precision design. Iterations are performed to ensure all aspects of the apps speak the same language and meet the expectation. 
 

Discovering

When client approached me, they already have an existing design but they were not satisfied with the current design and need more work on the UX as well as the UI. It made sense to me to review the existing design and started from there. To help me understand the current design better, I decided to create a user journey map and divided it based on main key users. I also asked few questions that I think is important which help me discover the proper journey

User flows from existing design and the new one (on the right) (click/ tap for bigger pict)

After existing flow mapped out I get better idea on how the flow works and what is missing. I then did some research to see some existing patterns and then proposed a new workflow with more efficient way. I focused on eliminating pain points on this user journey that was not necessary

 

Ideation & Wireframing 

Once the proposed flow agreed among the team members, I started to working on first concept of the app. I was inspired to embrace iOS7 guideline and don't do much custom control in order to save time in development phase. It should be light & warm, use clear typography, and focus on content.

Then I started the wireframing process. I was starting with the most important pages to the least important. Since the constraint of the project didn't let me spend lot of times on exploring things, I skipped the low-fi and went straight to the hi-fi wireframes (more like early version of the design mockup). I use sketch app because it lets me measure things easily.

Happy2help early exploration (click/ tap for bigger pict)

We created lot of topics & discussion. We use basecamp to gather feedbacks & share files on dropbox

We created lot of topics & discussion. We use basecamp to gather feedbacks & share files on dropbox

Feedback

Once most of the screens are there, team members provide constructive feedback based on agreed user flow. Later, we came up with some feedbacks to improve the app. We used basecamp to make our communication easier. 32 threads discussion created, 24 files shared and we used dropbox to store and sync all design manifests. 

To save time in the tight deadline, instead do the improvements on the hi-fi wireframes we decided to incorporate the improvements on the final design.

 

Set the tone

To design the final mockup we need to set the tones of the app that reflect the brand of the product. Since the app didn't have this yet, I created quick simple brand guideline to ensure all the design process will follow the guides and become more consistent.iya

Happy 2 help Brand Guideline

Happy 2 help Brand Guideline

Previously I already create a few color palette that used on the first iterations. But since it's major tone is set in blue, we don't really like it. Plus we feel that we should give more cheer feeling, warm tone to the app. It results with the color palette above and two typefaces: asap & muli.

 

Put the details

When all is set, it's time to transform the early design to the final design based on the brand guideline and integrate the feedback to the process. The process follow the same flow; start with the important page to the least important.  
 

Explore Screens

These screens are where user mostly spend a lot of time on the app. We expect people to browse existing helps and see how usually people ask helps.

Explore Screen & explanation (click/ tap for bigger pict)

Explore Screen & explanation (click/ tap for bigger pict)

Swipe interaction

Swipe interaction

We want to give a quick access to the user to perform main actions which is to give/ provide help. But we also provide another alternative to "book" it or add it to their favorite which we call "interested". You can see how these actions is afforded by using swipe gesture.

 

Category page

For this page, I decided to go with grid layout so it's easier for people to browse. This fit where our category is still small. Icons help give exposure & recognize each category easily. Tapping on each category will go to specific category page.

Category page (click/ tap for bigger pict)

Category page & search flow (click/ tap for bigger pict)

 

Help post detail 

Big typography and proportional spacing is making it easy for people to scan. Big single CTA displayed at the bottom so people will more likely to tap (See more explanation below).yg d

Detail Post (click/ tap for bigger pict)

Details page flow (click/ tap for bigger pict)

I create the animation to simulate how enter category & attachment work

Posting help

Asking for a help should be no brainer. However this can be easily misunderstood on what kind of help that we afford on the platform. To address this, I try to use default caption so people know what they have to write on the title of the help. We also plan to educate this on on boarding screens. I don't want to throw user to different screens to just filling the requirement such as categories & attachment so designing a page with segmented section is decent choice for this. 

Explore screens.

Explore screens.

 

Close help Karma points

Once the help is done, we will encourage people to close the post. Upon closing the help, help seeker (HS) need to give some awards to help provider (Help Provider) with karma point. HS can do this easily when HS is on help post. Please click on the flows below to read the explanation

Award Karma flow (click/ tap for bigger pict)

Sidebar menu

With the new iOS7 trend on the hamburger menu, it leaves us with lot of space to fill. This give us benefit to put more content. We want to give more exposure on people avatar so it's obvious when user logged in or not. Tap on avatar will bring them to profile screen. 

Sidebar screen logged and  logged out  (click/ tap for bigger pict)

Inbox

Inbox is a combination of two submenu. Conversation/ message & activity. I combine this so that user don't have to switch between menu to see their notification. In messages you will see different visual treatment on the list. It's more like combination an inbox & sent message. The top two list is a message/ conversation when you become a HP. The last two messages is a conversation where someone offering you a help. Tap into these, will go the chat page.

Inbox screens consist of Message & Activity, conversation/ chat, attached picture & swipe to close help (click/ tap for bigger pict)

Sign up/ Login screens

I revised the flow to not put these screens in the first experience of the app. I want users be able to see the benefit of the app. Give little reward (after downloading the app) to experience directly how the app works. So we put this screens every time unregistered/ logged out user do some actions like interested, provide help or post help.  The direction is a bit different here. We thought we want to try to give it a fresh look but still keep it consistent with the tone that we used in other screens (side menu)

Signup-login form (click/ tap for bigger pict)

Signup-login form (click/ tap for bigger pict)


Top Karma

It's important for us to give a proper exposure the people who helps a lot. This is one of our solution on how to bring people to the app, provide feedback without exchange some profits. We put some badges to users that has karma points in certain level. This help them to get more exposure and motivated to help more people.

Top karma screen.

 

Support page & Settings

Support & setting page (click/ tap for bigger pict)


Onboarding Screens

The purpose of having onbarding screens is to give a short insight on what user can do within the app. It should be made by at least three things:

  1. Telling the benefits of the app
  2. Illustrating the apps’s use.
  3. It should be no brainer

here, instead using illustration I go straight provide a picture of people trying the app and focusing the picture on the current interface and try to communicate how the interface looks like. I'd love to go crazy and provide more delightful onboarding like educating in time, but it will require more time to develop where we don't have that luxury yet. So this is what I came as a solution.

Onboarding screens focus on introducing what user can do within the app

 

Conclusion

Still reading this? Glad you make it to this point! So I learn few things when designing this app.

  1. As a freelancer it's important for you to balance between feature with timeline & budget. Make sure you make an efficient design decision while still provide a win win solution for both.
  2. Collaborating & communicating is always important in every aspect of design process.
  3. Be flexible & supportive. When the devs need your support & guidance, be available for them because they're the people who gonna make your design comes live.

I've been in high & low working on this and it's been a great journey so far. Some fun facts:

  • Decided to accept the work because the purpose the app: to help each other (humble)
  • It's my first time working on client project using sketch

I hope you enjoy this extensive breakdown on my design process.
Ps: sorry if it's a very long content. Btw, I hope to hear your feedback! :)

Thank you for reading this!