Droneification
Re-branding and redesigning an e-commerce drone store, Droneification, to gain an online presence, helping promote their products with drop-shipping services and give their brand identity with their unique blog.
The Challenge
On this project, I was the supporting UX designer and my responsibilities were to work collaboratively to aid, research, provide ideas and provide solutions for the team and Droneification.
building an identity for a startup brand and helping them gain a customer base by creating a reputation within the drone community. Due to the nature of Droneification services, this would require customers to order online – thus connecting with users is essential. To sell such products of high quality and value, customers would need to rely on customer service as well as straightforward navigation on the website.
While in my final year of Uni, we were also working on this project during the pandemic – working from home for the most part!
Role
Supporting UX Designer
Timeline: 12 weeks
Team: 5
Platform: Figma
Tools: Miro, Jam board, Trello.
Approach
Research:
User Surveys
Competitive analysis
Desk research
How we might Q’s
Personas
Card sorting (Lightning demos/Long term goals)
Design:
Supported with wire-framing
UI design – input controls, (colour palettes- supported they let us choose.)
Logo sketching.
Prototyping:
low fidelity prototype
Mid-fidelity
High fidelity on Figma.
Testing:
Accessibility Audit
Usability Testing
Results
- Droneification should be an engaging website that is easy to navigate through, display a list of different drones varying in price to target a range of audiences; the outcome of this development will be positive due to different audiences vouching for the company.
- The blog should be functional and readable, to excite drone enthusiasts and for users to learn about technology and trends for drones.
- Delivered the project, to stakeholders and they were pleased with the prototype so they gave us the go-ahead on handing it over developers, for the development stage.
The Process
Process
Execute research to explore the issues that Droneification faced, then define the actual problem statements in-depth with research methods needed to understand users and problems and ensure we had a shared vision of the new product in a team. The second stage of the process is to provide a design that solves the problem we identified. We will deliver this solution and then regularly review this in the design and prototype. The outcome will be a completed prototype sent to Droneification’s developers.
My process followed the double diamond design model.
Research
Competitive Analysis
We conducted a competitive analysis on various competitors (which drove high traffic to their sites or which were highest on the google search engine.) such as, DJI, Drones direct, Behive, The Drone co. etc. We analysed their key value propositions, layout and features.
User Surveys
User research to understand the customers for droneification to find their age range, metrics, Interests, and goals when shopping for drones.
Desk Research
During this phase, we also executed desk research for current products/accessories and drones to be well informed of what is trending.
Insights
From this research, we discovered our project insights for goals.
We realised many competitors used a consistent design and prominent/recognizable brand design or colours; competitors would also contain concise details for their products, however not many had suggestions for drones for specific uses. I suggested we use that to our advantage, by providing more detail on drones which users may find valuable to their interests; or a blog for drone enthusiasts so they have more of a reason to visit the store.
We found that our target audience ranged from 16- 50+ with different backgrounds, careers, lifestyles. We found that 79% of users implied they prefer purchasing drones online. We also found that there were groups who shared the same interests for purchasing drones; these were for photography, videography, toys, Racing and mini drones.
Personas
developing, personas to drill down potential users so we can focus on ticking their goals and minimize their frustrations.
HWM
To further collate this data we executed HMW Q’s to pinpoint what we need to highlight in our designs, with reasoning; followed by sprint questions and long term goals for Droneification.
Dot voted as a team to understand what we felt was most important.
Ideation And Design
Solutions
Once we had the big picture and began to identify our problems, we conducted 3 exercises as a team:
1.Notes & Ideas – favourite 2 year goal, voted sprint questions, favourite lightning demos.
2.Crazy 8’s sketches – quantity over quality.
3.Concept sketch-with annotations for reasons why
as a team, we voted on which sketches we liked the most – what we could work on during the mid-fidelity stage.
Customer Journey Map
customer journey maps simulating what a user may go through while on our website.
Mid Fidelity
Based on the ideation stage and research gained it was time to work on the prototype everyone was allocated to a relevant page to construct.
Customer service
Based on the research, I suggested that our contact us page display three methods of contact and is easily accessed on every prototype page, highlighting its importance.
I was required to make a contact us and profile page. Here the goal was to execute a similar design from the sketches made before; the design was focused on a straightforward UI including icons to highlight navigation or buttons.
After feedback from the stakeholders and team new UI changes were made accordingly.
Colour scheme
we were allowed to choose our own colour scheme.
Iterations
These are the 2ND Iteration of our mid-fidelity design focusing on the pages I worked on-the contact us, the profile and an added FAQ page. (There are different drafts of the pages to provide a choice of design) The fundamental changes from mid-fidelity design are the changes to the icons; as feedback suggested we simplify the icons. In these designs, it was essential to focus on how we can highlight the brand’s identity and ensure we kept a clean UI.
3rd iteration. We worked in sprints to complete the iterations as fast as possible and received user feedback and made adjustments.
Design Conclusion
This phase required multiple iterations and user testing, for usability and heuristic evaluation. We collaboratively were able to work on these changes to adjust the design to meet set requirements and user goals.
Final design
Final result
After final reviewing and user testing, this is the result of the new Droneification site prototype.
Upon signing up or logging in we opted to give users a choice to sign up from a pre-existing e.g. Twitter account or on Droneification. We adopted the ‘blobs’ design throughout the pages.
Based on user feedback we included a ‘Wish list’ page – for every time a user clicks on the heart button it gets added to the wish list.
On ‘My Account’ under ‘Order History’ users can track their order and order again.
Users are given multiple payment options – option to ‘save for future purchases’ & ‘same shipping information’ to speed up the process.
Highlighted by the users to ALWAYS have the total at the top of the page – in case they change their mind and want to add/remove items.
We added a progress bar at the top during the checkout process. This ‘Review’ stage aims to have all necessary information regarding prices and delivery.
Next Steps
Takeaways
- Iterate, iterate, iterate – an iterative approach affords us to gain validation along the way.
- Creative confidence – act on your big ideas, discuss with your team and tailor it to the user’s needs.
- Communication is vital – as a team we had to update, notify each other along the way, dedicating a page to each team member then reviewing together was effective and less time-consuming.
- Make it – it does not have to be perfect, just have it done and adapt/ refine along the way
Next Steps
- Our next steps are handing the prototype over to the development team And optimizing it for desktop versions. This project was well executed and met stakeholder requirements.
Challenges
- Due to covid-19, all communication had to be transferred from the office to online, resulting in a lack of face-to-face interaction and a challenge for user testing; we had to adapt to get the job done. If we were in a different environment, we could gain a better insight into the prototype from user testing in person.
- Maintaining time management was vital for this project, as this was during my final year in university prioritizing many other projects was essential.
Process improvements?
Ensuring everyone was on the same page when making designs, for proper consistency and less redundancy in designs or time wasted.