Heart U Not is all about helping people
with there relationship problems and reconnecting there love...

Goal

To create the best eCommerce experience for a Detroit start-up company, Heart U Not. Also, help create Heart U Nots Logo, branding identity guide lines. This was an amazing project to work on. Heart U Not is a company that focuses on couples relationships, by selling Michigan based greeting cards and other products to help spice up couples Love life. Everything that Heart U Not sells is based from Michigan, all the designers, printing and making of all greeting cards. The goal of this project was to show a personal love for all couples and not to make the company seem like a giant corp. When Heart U Not is a small businass from Detroit, MI and wants to grow.

center

Step 1: Discovery

Discovery on this project was fun and amazing with the client.Not only did I think he had a great idea, I loved how passionate he was about is product and service. In the kickoff meeting it was very important to the client to sure that the website was easy to use, since his target audience had such a large range. The most challenging part that we discovered was how to so our audience that we cared and we have the knowledge this feild.

Step 2: Research, Persona, mind mapping

After the breif I know I had a lot of research to do about my clients new business adventure. I spend alot of my time researching relationship website and also greeting card sites. After doing the research I started to with personas and mind mapping. I search and used my clients connections to build user personas, then once we are done with the wireframe and sketches we will be holding a small user Study experience to fulfill a great user experience.

center

Step 3: Sketching, Wireframing, User testing

Once I completed the research and persona phase, then I moved on to sketching. I did some initial sketching on paper with pencil and sharpies. After some review, used sketch to create detailled wireframes. The key here was to design, review and iterate until I had a smooth user experience for the clients needs.

Step 4: high fidelity drawing

I used Sketch 3 to design the interface of the app. with symbols and text styles, it was easy to iterate the design and to create an awesome prototype, then integrate user and client feedback. For 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 then re-iterated the design.

center

Step 5: Releasing the goods

Now, that the we have done the high fidelity and user testing, now we can slice and dice the design and start making the website happen. The client wanted to use Squarespace CMS platform. I create this wbsite by become a squarespace custom API developer, which was fun to learn and create something new. This way I could have full control of the project and design, without the restrictions of just using a template. Once I had a working site, I did somemore testing with users. Gave the users tasks to complete and used the feedback to make some design changes.

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, Research, 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

    <