Heart U Not is a great website
for reconnecting RELATIONSHIPS...
Heart U Not is all about helping people
with there relationship problems and reconnecting there love...
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.
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.
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
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
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...
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.
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
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)
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
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.
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,
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.
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