Heal the
World
Graphic Designer / UI/UX
About
Heal the world is a static website with a single mission; to communicate to it's users what the company is about, and make it easy for them to get in touch. My client's short term goal was to have a place where he could redirect his clients, and therefore start generating an online presence by utilizing his social media accounts. When I was hired, I was asked to make a low fidelity project as well as a high fidelity one.
Duration: 2 weeks
Tools: Photoshop, Adobe Illustrator, Adobe XD
CONTEXT
Making a dream into an idea, and that idea into something functional is already hard as it is, and not something easy for entrepreneurs to achieve. Now, try communicating that idea to a whole network of people across the globe! Sure, it's plausible. However, how can you make sure that what they understood is actually what you meant? With this in mind, I found myself in a journey to find an online web representation of my client's goal.
The Process
Research
Most of the research for this project was conducted in a one on one interview with my client, where I asked him a number of questions to get a better sense, and understanding of what he wanted to transmit to his users. These questions are my go to when starting a project since it allows me to get a better view of what the project's scope is.
Questions
1. What do you want your product to do?
2. What goals do you want to accomplish with this product?
3. Who is the audience?
4. In what platforms will they use this product?
5. How often will it be used?
6. What would be the most ideal varitation of this product?
7. Why are you doing this?
8. What's the scope of the project and what is your current budget?
Brand Needs
In this part, I analysed the data collected from the interview, and recompiled it. For my client's case we had a few key findings. One, was that he was very interested in the visual look of the site, the second was his interest in wanting his users to have the option of navigating to other social media apps, therefore creating a portal, the third was the scope of the project.
As further research, I decided to look around the web for envormental conservation websites to show my client. This helped me furhter narrow down what visual appeal he was looking for.
User Goals
-
Goal: users want to join an enviromental conservation community.
- Goal: users want to help heal the world.
The founder of Heal the World believes there are many people around the world that want to help heal it. He finds that the biggest problem to their inactivity is that they don't have an easy way to reach a community with like-minded people.
DEFINITION
Environmental conservationists need a way to reach people with similar interests in different social media platforms. The company's goal is to create portal that easily allows their users to understand the long term goal of the community, as well as how they plan to achieve it with the help that they offer.
User Persona
Seeing how the user's goals should be a reflection of what they company is trying to achieve, a persona was made utilizing the research we had made during the brand needs stage. This persona was made for the purpose of better representing the type of user that the site will accommodate. It will also help me understand my users’ needs, experiences, behaviors, goals, and frustrations.
User Story
Even though Heal the World is a small project, I decided that making a user story could bring us some benefits. This is due to the fact that user stories can help us identify possible holes inside our work that we may have missed. In this particular case, since the objective is to bring the users an easy navigation inside the page, patching up these small holes could greatly benefit the experience the user has when searching for specific pieces of data..
Core features
So, now that I have a clearer view of what the user's goals are, I can begin defining the website's core features. These features have to be a reflection of the defined concepts we have made during the user persona and story phase. They will be the engine of our website, and therefore will be what makes our website unique in it's way of accomplishing it's goal.
Social media accessibility through the website will be at one click away no matter what page the user is on. To accomplish this a floating social media bar will be added.
There should always be a path that takes us to the desired data the user wants. This means, giving our user a way to access other pages at all times. Will be further developed during the sitemap's development
Information should be clear and easily accessible to our users. Simple UI design.
Sitemap
Now that I have defined the core features for the page, I went ahead, and created a sitemap to help me visualize how these features can be organized and displayed in the website.
CREATION
Taking into account the core features, the next step is to begin the production of low-fidelity wire frames. I made three wire frames for each page of the website. Low fidelity wire frames are important when developing an online product, as it helps the designer map out shell of the website's interface, its screens and basic information architecture.
Wireframe goals
-
Visual outlining
-
Typographic hierarchy
-
User information delivery
Home Page
About Page
Contact Page
Medium Fidelity Wireframes
At this point, I start to define specific elements. Adding this detail takes a little longer, but it's still quick to produce. In bigger projects many low fidelity wireframes can be created, however, low-fidelity wireframes will not offer enough detail, and clarity to be followed. So, medium-fidelity wireframes are the next iteration, adding a bit more to the wireframes that in result helps conceptualizing the final design.
Home Page
About Page
Contact Page
Moodboard
Now that I have the technical scheme for the project, I can start making the moodboard. The moodboard will help me develop the concept's visual idea. I normally use Behance to make my moodboards, since it offers a quick and easy way to find ideas, and add them to a moodboard. During this process I will keep an eye out for color schemes, text combinations, images, materials, and design ideas that might fit the project.
High Fidelity Prototype
Giving life to the project both visually and mechanically is the most enjoyable part of UI/UX, for most designers. Gladly, making a high fidelity prototype requires both. This is when all of the research we have done finally becomes one. In this part I can see what my hard work, and countless hours of research has created. This is not to say that changes can't be made anymore, they can be done, but they shouldn't structurally be big changes, that's what the other wireframes were for.
