Single app that takes photos, edits photo and does
fun funky things to personalize your memorize...

Goal

Building a photo editor can be challenging sometimes to make it user friendly. The goal was to focus on UCD (user-centered design) to create an iOS app that was fun and easy for the user to use. With tons of cool filters, text, cropping, etc..

center

Step 1: Discovery

I did some initial brainstorming on what kind of photo editor to create. I began the project by:

  • Defining the onjectives
  • Defining target audience
  • Brainstorming app concepts / feature ideas
  • Prioritizing based on value

In conclusion I wanted to create a fun and user freindly app focusing my design around UCD methodologies. Creating the app so that any age group could use the app and have fun creating amasoning photos and being able to share them.

Step 2: Research

I most likely did my research the hard way but in my eyes it was well needed. The research was accomplished the old fashion way(sweet and walking), by the way I enjoyed very much, I enjoy interacting with people. I went to down town detroit to the art district and just plannly talking with people that I noticed were taking photos. After talking to many different people I came to the conclusion that some photo editing apps can be just hard to use. So many different filters, options, etc.

Spet 3: Sketching and Wireframing

I did some initial sketching on paper with pencil and sharpies. After some review and iteration, used Axure to create detailled wireframes. The key here was to design, review and iterate until we had a smooth user experience.

  • low fidelity sketches
  • medium fidelity drawings using Sketch
  • using the medium fidelity drawings from sketch, I created a live interactive prototype using inVision
  • I had users do testing of the prototype
  • After the users finished went back to the drawing board on a few features

Step 4: High Fidelity Drawing

I used the Sketch to design the interface of the app. With symbols and text styles, it was easy to iterate the design and integrate user feedback. Again user testing, I used inVision to create and install the invision prototype and asked the selected users to perform specific tasks. From observation and their feedback, I re-iterated some of the designs and features that were in need attention.

center

Step 5: Design and development

I used Sketch to design the final high fidility user interface. Once, completed the design phase and everything looks pixel perfect, I imported each screen element in to xCode. Now, that all design elements are in xCode we can start creating all of the UI controllers. Since the app is made and working we need to bug test, fix issues and then get ready to ship final product.

What keeps and get me motivated

Bueatiful Imagery
Always focusing on the user
To improve websites and mobile applications
Coding who doesn't love to code
Always stay creative

The process that was used
for the success of this app...

Quick overview

Project starting – Let’s find some skeletons
Preliminary research – Alpha, Omega and the Persona
Prototyping & Usability testing – Let the fun begin
Detailed design & A/B testing – Going in the right direction
Follow-up – Oh, I’ll always, I’ll always love you

 

 

 

Step One:
Project starting


Project starting – Let’s find some skeletons The visible part of our UX design process starts when we first get in touch with a new client. In this early stage we try to get as much information as we can. We are eager to find all hidden skeletons (desires, barriers, deadlines, preferences, etc.) that could cause any inconveniences in case they pop up later. In order to be the best detectives we do these things:

  • Pre kick-off questionsIn the interest of being able to properly prepare for the kick-off meeting we send the client a few general questions. These questions are in connection with their target audience, their competitors and existing design materials as well as the roles of the project members.
  • Step Two:
    Preliminary Research, Research, Mood Boards, Persona


    So after we gather and organize the information we got… well, we dig deeper for some more. We usually do a 7 day long preliminary research where we…

  • Set up interviews with users of the target group to validate personas and complete the customer & user journeys

  • Research the competitors, get information about features, advantages and disadvantages

  • Design mood boards for the product

  • Schedule the project tasks in detail (weekly plan for at least 2 months and milestones for the rest of the project, time does depand on the project)


    Step Three:
    Prototyping & Usability testing – Let the fun begin


    We always show everything to the client the moment it’s ready, as it is the most important thing that they know about the UX design process steps.

  • Sketching We always start with sketching. It is the easiest way of visualizing our ideas. We usually force ourselves to create three different versions for solving a particular problem. It makes us think so we won’t get lazy. We always show everything to the client. Always. Even the sketches, because it helps the client understand the evolution of the process and our way of thinking.

  • Prototyping When we have a few good ideas and know how the main structure of the application will look like we start building a wireframe and the prototype. If we’re in a hurry and the product is a simpler one, sometimes we draw the wireframe or just use the sketches, take photos of them, and use one of the prototyping on paper apps such as Marvel or POP. Otherwise, most of the time we use Axure or Invision to create low-fidelity wireframes and prototypes in order to be efficient and as quick as possible.

    \

  • User testing We at Fuzed Labs work with 1 week design sprints. Testing in many iterations is a must-have when it comes to prototypes. We always validate our ideas based on tests with real users. During the UX design process it’s very important to understand that the product is for the users and not vice versa.

  • Creating a screen flow In case one of the stakeholders (client, developers, etc.) need one, we create a screen flow to show all the connections between the screens.


    Step Four:
    Detailed design & A/B testing – Going in the right direction


    So on one side we have our mood boards that we showed to the client who gave feedback and hopefully now we have an idea about what style the application should have. On the other side we have a cool prototype which gives us most of the screens including arrangement, functionality, etc.

  • Collecting best practices We usually look for existing design examples (that can be an app from the store or a project on Dribble) and we collect so-called best practices. We usually use Pinterest dashboards.

  • Look & Feel Let’s jump to the look and feel. We usually design 1 screen in different versions. the first is a light one, the second is pretty dark and the third is something colorful. Differences can be in the colors, shapes, fonts, icons, light-dark elements, etc. We always ask the client what elements they like from the different versions. If a second round is necessary, we design some more variations with the selected elements. You can read more on this topic here.

  • Detailed design The next step of our UX design process is when we design all the pixel perfect screens in Photoshop or Sketch.

  • Creating specification We always create some sort of specification for the developers. A UI kit is always a must-have. We usually create animations for the interactions as they can be used for showing great things to the clients, but it’s a very helpful asset for the developers as well. If you have an idea how an animation should look like you shouldn’t write it down. You should share it visually, as it’s much easier and quicker to understand for everyone.

  • A/B testing We usually use A/B testing to decide which version of the app is better and to get a higher conversion rate.


    Step Five:
    Follow-up – Oh, I’ll always, I’ll always love you


    We like it when the product goes in the right direction. We want to be sure that the application is implemented the way we designed it for a great user experience. There are two possibilities:

  • If the development process is parallel with the design, it’s quite easy to follow what’s being built as we communicate with the client/the developers on a daily basis.

  • But if the development process is after the design process, we usually have to schedule post design meetings where we look at the product being developed from a UX perspective. Our goal is to have a great product as a reference, not a product which could have been great, if…


    Well, this is how we do it. This is our ideal UX process at this very moment, but we know that it won’t be the same when we try applying it to a real project. Of course it gives us the ability to plan things by and large, but it constantly changes based on the project. We also have to accept that there is no such thing as a perfect UX process, it always can and should be improved.
    We know that we don’t know everything, but we’re continuously trying to improve our process. So if you feel like sharing your way, or you have any ideas/comments on this, please feel free to use the comments section..
  • We specialize in web/mobile responsive design, mobile application design and development

    Like what you see?

    Then send a message or drop a call
    and we can create something gnarly together!

    info@fuzedlabs.com

    ©2016 Fuzed Labs

    <