Koombea Marketing Site
César Insignares
The product:
A marketing site in which clients can book an appointment to start an app development project and helps to the company’s SEO ranking.
Project overview
Project duration:
2019 - Current
The problem:
The company had an outdated website that had sub-par user experience and wasn’t driving as much traffic as needed.
Project overview
The goal:
Create an intuitive and beautiful website for an app development company.
My role:
UX designer, UX researcher, UI designer.
Project overview
Responsibilities:
Whole designing process, from user research to development hand-off
Understanding
the user
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users want a quick and easy way to book an appointment. However, many app development websites are overwhelming and confusing to navigate, which frustrated many users. This caused a normally easy experience to become challenging for them, defeating the purpose of an easy solution.
User research: pain points
Navigation
Due to the amount of services that these kind of websites offer and can be difficult and confusing to navigate through them.
Interface
The interfaces of these sites tend to be too sterile.
Experience
Usually the way of contacting these companies is difficult.
1
2
3
Persona: Sebastian
Problem statement:
Sebastian is a start-up company CEO
who needs an intuitive way to partner up with an app development company
because most of their websites are hard to navigate.
User journey map
I created a user journey map of Sebastian’s experience using the site to help identify possible pain points and improvement opportunities.
Starting
the design
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy given the amount of content.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper wireframe
screen size variation(s)
Because Koombea’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Easy access to the contact page
Clear and intuitive navigation
Digital wireframe
screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback from key stake holders about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
Colombia, remote
Participants:
5 participants
Length:
20-30 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
Having an image on the banner in the responsive view puts the CTA below the fold, making it harder to find the contact button.
Fold
Form
Having too many fields to to fill on a form might deter users to submit it.
1
2
Refining
the design
Mockups
On the first iteration the CTA to go to the contact page was below the page fold, so I rearranged the elements so it is above the fold.
Before usability study
After usability study
Mockups: Original screen size
Mockups: Screen size variations
High-fidelity�prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Accessibility considerations
I used headings with different sized text for clear visual hierarchy
I used landmarks to help users navigate the site, including users who rely on assistive technologies
I designed the site with alt text available on each page for smooth screen reader access
1
2
3
Going forward
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. After launch our traffic grew exponentially and the generation of leads has been on the uprise and consistent.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps
Conduct follow-up usability testing on the Marketing website
Identify any additional areas of need and ideate on new features
1
2
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you for reviewing my work on the Koombea’s Website!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: caesarinsig@gmail.com