Freelance
Consulting Marketing Site Revamp
Revamped Alpha Code's website with current company information and services to improve credibility, and user-friendliness for non-technical future maintenance and scalability.
Role
Web Designer & Developer
Duration
1.5 weeks (January 2023)
Team
Individual
The Client
Alpha Code
Alpha Code is a consulting firm that helps corporate leaders and individuals unlock their potential through consulting, coaching, mentoring, and training. Led by a team with extensive experience in learning and people development, as well as experience working in international teams, they strive to aid both individuals and businesses in discovering their unique qualities, gaining clarity in their goals, and leaving a lasting impact.
A Bird's Eye View
The Overall Process
This is the recap of the process I did in this project. The whole process is not linear, there were times when I need to go back and forth to align and communicate back with the client to find a middle ground in order to move forward.
Alignment
The Scope
I redesigned their whole marketing services website (mobile and desktop) and developed the website in WIX. The client specifically requested that the website built should give them the ability to sustain and scale the website independently. WIX is then chosen to cater the client’s profile who is not proficient in design and tech.
Alpha Code's Old Website
The Challenges
The client's brief outlined that their website was no longer reflective of their current mission and services, as it featured outdated information. Furthermore, the website's design was unprofessional and unappealing. The client also mentioned difficulties in maintaining and updating the website, as they lack the necessary access and budget to make changes independently, instead needing to rely on a third-party.
The Constraints
The timeline was tight as I had only 1.5 weeks for both design and development. Some of the website content was not fully ready yet, so I utilized placeholders to ensure that the team could continue working independently and make updates later on. There were also limitations with the web builder, thus, some of the designs I created in Figma had to be adjusted to fit within those constraints.
Research
Diving deeper into the challenges
After I received the first client’s brief, I set another meeting to dive deeper into the challenges that the client mentioned earlier. Since the client was more familiar with corporate work environment, we communicate effectively with face 2 face meetings. During the meeting, we did a simple activity which is to run through their current website and similar website together, and pinpoints sections that they don’t like, would like to add, or lacking. The results from this activity were then divided into 3: The Goal, Need, and Problem.
REFLECTION
To be more accurate, I can do a competitive analysis and examine the website structure thoroughly. However, due to time constraints, I think this hands-on activity suit best to dig into the client’s needs and goals further.
PROBLEM
What causes frustrations
Their old website showed irrelevant information which made their team worked twice in explaining their services to potential clients
This is due to the website they are using being from a 3rd party and they have no direct access to editing it
NEEDS
What needs to be delivered
An up-to-date list of services and their information
Showcase testimonies, Alphacode pictures, and social media content
GOALS
What it hopes to achieve
Scalability & Sustainability — The client wants to be able to scale and sustain this website independently without requiring any 3rd party.
Increase credibility and conversion rate (potential clients → clients) especially for corporate services
REFLECTION
Lacking user's perspectives
In the research phase, I solely depend on the client’s perspective. If I had more resources and time, I would try to seek and validate problems from the users’ side by doing the same activity but with a user/ potential customer, so that the design of the website would be more centered on the user’s needs.
Information Architecture
The Blueprint
From the results earlier, I arranged an information architecture to lay out the contents and structure of the website.
REFLECTION
Here, I skipped wireframing due to time constraints. So I explained the flow to my client by using my information architecture and website references to allow better visualization. These resources were also sufficient for me to proceed in exploring the UI designs.
information architecture
Visual References
In this phase, I had another meeting with the client to explain the expectation of how the website structure will look and its flow. To help visualize my explanations, I used some screenshots from existing websites that best depict the idea I want to convey. This allows my clients to visualize what I said easier, hence grasping the idea faster, granting better communication and brainstorming. After the meeting, I continued on revising the flows based on the feedback. Once approved, I jumped directly on exploring the UI designs.
Impactful and Engaging Landing Page
The new version of Alpha Code's website (2nd iteration) offers a more sophisticated and structured design compared to the old version. The 'Contact' call-to-action on the header and the impact summary are prominently displayed to capture user's attention as well as increase credibility. The website now also clearly separates individual and corporate services, allowing for better focus on each and increased emphasis on corporate services.
Real testimonials, satisfied clients, proven impact
Testimonials, client companies, and impact summary are highlighted to show more credibility to the users.
Easily review service information simultaneously
With a clear service page for all type of individual and corporate services, users are now able to review the programs offered simultaneously.
UI Style Guide
I developed a simple UI style guide in Figma to help my design process in creating the website. This style guide is then adapted to WIX for clients to use graphic assets, UI components, color and text styles easily.
Development
Website Overview
This video gives an overview of Alpha Code's live website. Some features are directly designed and integrated on WIX, and some designs are altered slightly to fit WIX restrictions. The final site's content and design may also change due to updates made by the client's team.
Reflection
Key Takeaways
The design process in this project was rushed due to the tight timeline. I realised that there was no proper documentation of each phase as I constantly moved from one task to the next one immediately. Aside from that, the website I designed is mainly biased toward the client's perspective and not user-centered. However, I will try to validate the effectiveness of this website by showing the impact data I received once their website is shared to the public (so stay tuned!).
Although the design style is challenging and unfamiliar to me, it offers a new opportunity to learn new design variations. Communication with the client, mostly face-to-face and audio calls, is also a challenge as it differs from my typical email/text communication. Albeit the challenge, this helps me develop my verbal communication skills, on-site negotiation skills and adapt to the client's preferred way of communicating.
Overall a fun project to work on!
...
check out my other works?
