Design Hive: Bee-lieve in Conversions with Thoughtful Design
Design Challenge to create a mobile-first responsive website and to create branding and logo for our own digital product development agency.
MY ROLE
UX/UI Designer
Project management
TOOLS
Figjam, Figma, Photoshop
DURATION
48 Hours
INTRODUCTION AND BRIEF
During a two-day design collab-athon organised by General Assembly, our team collaborated with software engineers to create our own digital product development agency website. After developing our website, we pitched our brand to the judges and other participating teams. Our objective was to design and develop a product development agency website tailored to potential clients seeking product development services. We were tasked with brainstorming a captivating name, appealing design, and establishing a compelling brand for our agency.
MEET THE 'HIVE'
Our team consisted of three UX designers and initially two software engineers. However, one of our developers had to drop out midway. Despite this unexpected setback, we persevered as a strong team of four.
Eileen Zhang (UX)
Jessica Hombre (UX)
Carl Chen
(Developer)
Lucy Gao (UX)
REQUIREMENTS
We were required to provide comprehensive information about our UX design and software development services, as well as showcasing our portfolio to give potential clients an insight into our agency's capabilities. Additionally, we were committed to developing a mobile-first, responsive, browser-based website that adheres to the a11y checklist for accessibility.
We were also provided with six primary user stories which gave us an idea on what functionalities and features were important to our users.
TIME MANAGEMENT
Armed with all the necessary information, our team engaged in a fruitful discussion to devise a plan of action that took into account our time constraint. To facilitate seamless collaboration, we created a Figjam board encompassing a team charter, task schedules, and a dedicated research space. This endeavour proved particularly valuable as it provided our developers with insights into how UX Designers typically organise and collaborate on work using Figma and Figjam.
To ensure effective communication in our entirely remote setup, establishing robust channels was paramount. As we were already using Slack's messaging platform, we leveraged its huddle function as it was convenient and it also offered a screen-sharing feature that proved to be incredibly useful.
After receiving the brief on Friday night, our initial huddle on Saturday morning centred around open discussions regarding our individual strengths, weaknesses, and the feasibility of design implementation. Crucially, we identified our key deliverables, with the developers emphasising the importance of well-researched designs and wireframes that could be iterated upon based on their capability.
Recognising the significance of time, we strategised task time-blocking to optimise productivity and minimise time wastage. While the project may seem daunting, we remained mindful of our well-being, ensuring that lunch and rest breaks were scheduled to prioritise our overall health and work-life balance.
CREATING OUR BRAND
Next, we devoted 10 minutes to a collective brainstorming session to generate potential brand names. Through lively discussion, we managed to compile a list of contenders which we then conducted a group vote to determine the most fitting option. Ultimately, we voted on 'DesignHive' This choice resonated with us as it conveyed a sense of uniqueness and offered opportunities to incorporate a sense of delight into our branding, establishing a distinctive selling point. This creative direction provided valuable inspiration to our UX team, as it fuelled ideas for compelling content and UX writing that we could incorporate throughout the website.
PRIORITISING HOW TO CONDUCT RESEARCH GIVEN THE SHORT TIMEFRAME
Considering the urgency imposed by our time constraint and the emphasis on refining the UI elements and content styling, our team of UX designers made a strategic decision to prioritise competitive analysis. Due to insufficient time for primary research, we opted to delve into the exploration of industry leaders. Our objective was to gain valuable insights into best practices in competitor web design, enabling us to incorporate and adapt these principles effectively within our own project.
UNDERSTANDING WHO THE MAIN COMPETITORS ARE
During our research, we examined six competitors and evaluated both their desktop and mobile-based websites. Given our specific requirements and the constraints of our time, we made a strategic decision to perform a pros and cons analysis. This allowed us to gain valuable insights into the various features and functionalities employed by our competitors, ultimately guiding us in determining the elements that deserved our highest priority.
.png)
Based on our findings, effective features and functionalities comprised a clear and compelling call to action, urging users to contact the agency via an enquiry form. Additionally, presenting engaging information about the agency's core offerings in the hero section, incorporating impact statistics and social proof, ensuring strong UX writing, and optimising the website for mobile users were identified as key elements for success.
However, we also identified certain areas that could be improved. These included suboptimal content positioning, particularly with social proof and impact statistics being placed towards the end of the page. Excessive scrolling to access essential information on the landing page was also a drawback. Another con was when the home page was presented as a portfolio rather than showcasing selected works and directing visitors to a projects page. Furthermore, we noticed a lack of a clear and compelling call to action, as well as insufficient optimisation for mobile users.
.png)
One user-friendly feature we also identified was a category filter for the projects page. Recognising its potential value, we discussed with our developers to assess its feasibility, it became apparent that building out all the interactivities associated with this functionality might be challenging within our limited timeframe. As a result, we collectively agreed that while it would be a desirable addition, it would be considered a "nice to have" feature if time permitted its implementation.
MVP
Structured landing and portfolio page that converts.
Metrics of success
-
Scroll-depth
-
Click-through rate of the CTA button
-
Email enquiry form submissions
CONTENT LAYOUT
In light of our research findings and insights, we embarked on designing a basic content layout for both the mobile and desktop versions of our landing page and projects page. Our design approach adhered to the best practices and information architecture principles that emerged from our competitor analysis, ensuring a solid foundation for our website.
In particular, our focus was on creating a logical structure that addressed needs based on the user stories, building trust and legitimacy, and incorporating clear and strong call-to-action elements through an enquiry form.
Create Structure
-
Hierarchy that helps to put more emphasis on the content we want our customers to see first
-
It scrolls like its telling a compelling story
Build Trust
-
Transparency by explaining the process
-
Show Statistics of success
-
List past clients and achievements using strong language (eg. 'Trusted by')
Clear and strong CTA
-
Obvious
-
Legible (WCAG Level AAA )
-
Using the z layout scanning pattern
DESIGNING AND BUILDING MOBILE-FIRST PLATFORM
Given the time frame, we kicked things off by prioritising designing and building the mobile prototype first. This allowed us to later adapt it to fit the desktop layout.
Throughout the project, we constantly made adjustments to the design to ensure that it was feasible for the developers to build within our given timeframe. We had to find that sweet spot where we could balance our vision with what was realistically achievable.
LOW-FI WIREFRAMES
To translate our vision into tangible form, we created low-fidelity wireframes that served as a blueprint for our agency's web pages, encompassing both mobile and desktop formats. These wireframes provided a skeletal representation of the layout and structure, allowing us to visualise the overall composition and flow of our website.
Once we had completed the mobile landing page wireframe, we promptly engaged in a check-in session with our developers, providing them with an update on our design progress. Given that we were halfway through the day, our intention was to present them with a basic framework that they could begin working with. Consequently, they took the landing page wireframe and proceeded to build components, constructing the foundational structure of the page while incorporating responsive elements to ensure optimal user experience across devices.
COLLABORATIVE APPROACH
To ensure seamless collaboration and timely progress, we scheduled regular hourly check-ins with our developers, ensuring alignment and addressing any concerns that arose. During our first check-in, we were pleased to witness the developers successfully creating a responsive mobile-to-desktop browsing experience.
However, the envisioned carousel design for the 'our process' section posed difficulties in replication. To overcome this obstacle, the developer presented an alternative carousel variation, which we gratefully accepted and iterated upon to refine our design.
HIGH-FI WIREFRAMES
As our dedicated developers continued to diligently work on the basic version of mobile landing page, our UX design team commenced work on the high-fidelity pages, taking advantage of the already established content layout. To optimise efficiency, we used a UI kit on Figma to ensure wireframe consistency and facilitate effective communication of our design elements to the developers. To create the visual identity of our brand, we decided on a logo design and colour palette selection that we felt was consistent with our branding.
.png)
After our high fidelity wireframe for the mobile and desktop landing page were completed, we eagerly shared it with the developers. As it was getting late in evening at this point, we collectively agreed to let the developers commence the implementation for high fidelity version of the landing page, while our UX team dedicated their efforts to finalising the second page that showcased the agency’s projects.
UNEXPECTED SETBACK
Navigating a sudden dropout of a team member
As the morning of the final day of our collab-athon dawned upon us, a sense of anticipation filled the air as we gathered for our scheduled our team huddle. However, much to our surprise, we encountered an unexpected twist - one of our developers had dropped out! Despite our best efforts to contact him, it became apparent that he was no longer available to contribute to the project. This unforeseen setback left our team with only one developer, Carl, tasked with building the last page for the projects within a tight five-hour timeframe.
Resilience and adaptability quickly became our allies, and we gathered together to devise a new plan for the day, taking stock of the progress we had achieved thus far. Despite the challenge, our mobile and desktop responsive landing page was looking great and we were all impressed with how much was built out in just one day. Carl had diligently honed his frontend coding skills overnight, and he was eager to continue on with the rest of the build. We rallied behind Carl, granting him the responsibility of completing the final page while our UX team took charge of preparing the presentation for our pitch.
WRAPPING UP
Just moments before the presentation, our team gathered for a final huddle, eagerly reviewing Carl's impressive work on the last page. We were thoroughly impressed by his inclusion of the previously mentioned category filter feature, which enhanced the user experience by allowing projects to be filtered based on their respective service categories. Carl walked us through both the mobile and desktop versions of our website, showcasing its diverse features and functionalities.
During this crucial meeting, we ensured that Carl was well-informed about the flow of our presentation. We provided guidance on when he should demonstrate our website, highlighting key information, and discussing the challenges he encountered during its development. With a clear understanding of the running order, we were ready to confidently pitch our digital product development agency, DesignHive, to the judges and other participating teams.
FINAL SOLUTION
Mobile
Landing Page
Our Work
About Us
Desktop
Landing Page
Our Work
About Us
THE PITCH
Winning the Best pitch award!
Our collective efforts and unwavering dedication paid off as we were honoured with the award for "Best Presentation." Considering the unforeseen setback we encountered, we couldn't be prouder of our remarkable achievement.
NEXT STEPS
-
Build and thoroughly test out the remaining pages, such as About Us, Contact Us, and Services page.
-
A/B test the landing page to evaluate the hierarchy of information. This will help us ensure that the structure is optimised and engaging for our users.
-
Once the website is deployed, we will conduct speed tests to ensure that our users can enjoy a fast and seamless browsing experience.
-
To improve accessibility and SEO, we'll check that all images have alt text. This makes our website more searchable and inclusive for all users.
-
Incorporate micro-interactions specifically designed for mobile users. These delightful interactions will add an extra layer of engagement and interactivity to the mobile experience.
REFLECTIONS